1.Text
Text組件用于在界面上展示一段文本信息，可以包含子組件Span。

文本樣式
fontColor：文本的顏色

fontSize：文本大小

fontStyle ：文本樣式

fontWeight：文本粗細(xì)

fontFamily：設(shè)置文本的字體列表。使用多個(gè)字體，使用“，”進(jìn)行分割，優(yōu)先級(jí)按順序生效。例如：“Arial，sans-serif”

設(shè)置文本對(duì)齊方式
使用textAlign屬性可以設(shè)置文本的對(duì)齊方式

.textAlign(TextAlign.Start)：水平對(duì)齊首部

.textAlign(TextAlign.Center)：水平居中對(duì)齊

.textAlign(TextAlign.End)：水平對(duì)齊尾部

2.image
Image組件用來(lái)渲染展示圖片，它可以讓界面變得更加豐富多彩。只需要給Image組件設(shè)置圖片地址、寬和高，圖片就能加載出來(lái)，示例如下：

Image($r("app.media.icon"))

.width(100)

.height(100)

設(shè)置縮放類型
為了使圖片在頁(yè)面中有更好的顯示效果，有時(shí)候需要對(duì)圖片進(jìn)行縮放處理。您可以使用objectFit屬性設(shè)置圖片的縮放類型，objectFit的參數(shù)類型為ImageFit。

ImageFit包含以下幾種類型：

Contain：保持寬高比進(jìn)行縮小或者放大，使得圖片完全顯示在顯示邊界內(nèi)。

Cover（默認(rèn)值）：保持寬高比進(jìn)行縮小或者放大，使得圖片兩邊都大于或等于顯示邊界。

Auto：自適應(yīng)顯示。

Fill：不保持寬高比進(jìn)行放大縮小，使得圖片充滿顯示邊界。

ScaleDown：保持寬高比顯示，圖片縮小或者保持不變。

None：保持原有尺寸顯示。
比如瀏覽新聞的時(shí)候，圖片一般從網(wǎng)絡(luò)加載而來(lái)，Image組件支持加載網(wǎng)絡(luò)圖片，將圖片地址換成網(wǎng)絡(luò)圖片地址進(jìn)行加載。

Image('https://www.example.com/xxx.png'）

在設(shè)置圖片時(shí)，應(yīng)單獨(dú)在main-ets-MainAbility中重建一個(gè)目錄文建，將照片復(fù)制在其中，然后再Image("重建文件名/照片名.jpg")

3. TextInput
TextInput組件用于輸入單行文本，響應(yīng)輸入事件。TextInput的使用也非常廣泛，例如應(yīng)用登錄賬號(hào)密碼、發(fā)送消息等。和Text組件一樣，TextInput組件也支持文本樣式設(shè)置，下面的示例代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的輸入框：

TextInput()

.fontColor(Color.Blue)

.fontSize(20)

.fontStyle(FontStyle.Italic)

.fontWeight(FontWeight.Bold)

.fontFamily('Arial')

設(shè)置輸入提示文本
當(dāng)我們平時(shí)使用輸入框的時(shí)候，往往會(huì)有一些提示文字。例如登錄賬號(hào)的時(shí)候會(huì)有“請(qǐng)輸入賬號(hào)”這樣的文本提示，當(dāng)用戶輸入內(nèi)容之后，提示文本就會(huì)消失，這種提示功能使用placeholder屬性就可以輕松的實(shí)現(xiàn)。您還可以使用placeholderColor和placeholderFont分別設(shè)置提示文本的顏色和樣式，示例代碼如下：

TextInput({ placeholder: '請(qǐng)輸入帳號(hào)' })

.placeholderColor(0x999999)

.placeholderFont({ size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic })

設(shè)置輸入類型
可以使用type屬性來(lái)設(shè)置輸入框類型。例如密碼輸入框，一般輸入密碼的時(shí)候，為了用戶密碼安全，內(nèi)容會(huì)顯示為“......”，針對(duì)這種場(chǎng)景，將type屬性設(shè)置為InputType.Password就可以實(shí)現(xiàn)。示例代碼如下：

TextInput({ placeholder: '請(qǐng)輸入密碼' })

.type(InputType.Password)

總結(jié)

以上是生活随笔為你收集整理的梅科尔工作室-王少鹏-鸿蒙笔记2的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。