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

文本樣式
fontColor：文本的顏色

fontSize：文本大小

fontStyle ：文本樣式

fontWeight：文本粗細

fontFamily：設置文本的字體列表。使用多個字體，使用“，”進行分割，優先級按順序生效。例如：“Arial，sans-serif”

設置文本對齊方式
使用textAlign屬性可以設置文本的對齊方式

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

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

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

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

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

.width(100)

.height(100)

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

ImageFit包含以下幾種類型：

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

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

Auto：自適應顯示。

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

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

None：保持原有尺寸顯示。
比如瀏覽新聞的時候，圖片一般從網絡加載而來，Image組件支持加載網絡圖片，將圖片地址換成網絡圖片地址進行加載。

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

在設置圖片時，應單獨在main-ets-MainAbility中重建一個目錄文建，將照片復制在其中，然后再Image("重建文件名/照片名.jpg")

3. TextInput
TextInput組件用于輸入單行文本，響應輸入事件。TextInput的使用也非常廣泛，例如應用登錄賬號密碼、發送消息等。和Text組件一樣，TextInput組件也支持文本樣式設置，下面的示例代碼實現了一個簡單的輸入框：

TextInput()

.fontColor(Color.Blue)

.fontSize(20)

.fontStyle(FontStyle.Italic)

.fontWeight(FontWeight.Bold)

.fontFamily('Arial')

設置輸入提示文本
當我們平時使用輸入框的時候，往往會有一些提示文字。例如登錄賬號的時候會有“請輸入賬號”這樣的文本提示，當用戶輸入內容之后，提示文本就會消失，這種提示功能使用placeholder屬性就可以輕松的實現。您還可以使用placeholderColor和placeholderFont分別設置提示文本的顏色和樣式，示例代碼如下：

TextInput({ placeholder: '請輸入帳號' })

.placeholderColor(0x999999)

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

設置輸入類型
可以使用type屬性來設置輸入框類型。例如密碼輸入框，一般輸入密碼的時候，為了用戶密碼安全，內容會顯示為“......”，針對這種場景，將type屬性設置為InputType.Password就可以實現。示例代碼如下：

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

.type(InputType.Password)

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。