梅克尔工作室-赵一帆-鸿蒙笔记2
常用基礎組件
組件介紹
組件（Component）是界面搭建與顯示的最小單位，HarmonyOS ArkUI聲明式開發范式為開發者提供了豐富多樣的UI組件，我們可以使用這些組件輕松的編寫出更加豐富、漂亮的界面。
組件根據功能可以分為以下五大類：
1.基礎組件
2.容器組件
3.媒體組件
4.繪制組件
5.畫布組件
其中基礎組件是視圖層的基本組成單元，包括Text、Image、TextInput、Button、LoadingProgress等，例如下面這個常用的登錄界面就是由這些基礎組件組合而成。
下面我們將分別介紹這些常用基礎組件的使用。
Text
Text組件用于在界面上展示一段文本信息，可以包含子組件Span。
文本樣式
針對包含文本元素的組件，例如Text、Span、Button、TextInput等，可使用fontColor、fontSize、fontStyle、 fontWeight、fontFamily這些文本樣式，分別設置文本的顏色、大小、樣式、粗細以及字體，文本樣式的屬性如下表
下面示例代碼中包含兩個Text組件，第一個使用的是默認樣式，第二個給文本設置了一些文本樣式。
@Entry @Component struct TextDemo {build() {Row() {Column() {Text('HarmonyOS')Text('HarmonyOS').fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial')}.width('100%')}.backgroundColor(0xF1F3F5).height('100%')} }效果圖如下：
除了通用屬性和文本樣式設置，下面列舉了一些Text組件的常用屬性的使用。
設置文本對齊方式
使用textAlign屬性可以設置文本的對齊方式，示例代碼如下：
Text('HarmonyOS').width(200).textAlign(TextAlign.Start).backgroundColor(0xE6F2FD)textAlign參數類型為TextAlign，定義了以下幾種類型：
👉Start（默認值）：水平對齊首部。
👉Center：水平居中對齊。
👉End：水平對齊尾部。
設置文本超長顯示
當文本內容較多超出了Text組件范圍的時候，您可以使用textOverflow設置文本截取方式，需配合maxLines使用，單獨設置不生效，maxLines用于設置文本顯示最大行數。下面的示例代碼將textOverflow設置為Ellipsis ，它將顯示不下的文本用 “...” 表示：
Text('This is the text content of Text Component This is the text content of Text Component').fontSize(16).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis}).backgroundColor(0xE6F2FD)效果圖如下：
設置文本裝飾線
使用decoration設置文本裝飾線樣式及其顏色，大家在瀏覽網頁的時候經常可以看到裝飾線，例如帶有下劃線超鏈接文本。decoration包含type和color兩個參數，其中type用于設置裝飾線樣式，參數類型為TextDecorationTyp，color為可選參數。
下面的示例代碼給文本設置了下劃線，下劃線顏色為黑色：
Text('HarmonyOS').fontSize(20).decoration({ type: TextDecorationType.Underline, color: Color.Black }).backgroundColor(0xE6F2FD)效果圖如下：
TextDecorationTyp包含以下幾種類型：
👉None：不使用文本裝飾線。
👉Overline：文字上劃線修飾。
👉LineThrough：穿過文本的修飾線。
👉Underline：文字下劃線修飾。
Image
Image組件用來渲染展示圖片，它可以讓界面變得更加豐富多彩。只需要給Image組件設置圖片地址、寬和高，圖片就能加載出來，示例如下：
Image($r("app.media.icon")).width(100).height(100)效果圖如下：
設置縮放類型
為了使圖片在頁面中有更好的顯示效果，有時候需要對圖片進行縮放處理。您可以使用objectFit屬性設置圖片的縮放類型，objectFit的參數類型為ImageFit。
現有原始圖片如下：
將圖片加載到Image組件，設置寬高各100，設置objectFit為Cover（默認值），設置圖片背景色為灰色0xCCCCCC。示例代碼如下：
Image($r("app.media.image2")).objectFit(ImageFit.Cover).backgroundColor(0xCCCCCC).width(100).height(100)效果圖如下：
ImageFit包含以下幾種類型：
👉Contain：保持寬高比進行縮小或者放大，使得圖片完全顯示在顯示邊界內。
👉Cover（默認值）：保持寬高比進行縮小或者放大，使得圖片兩邊都大于或等于顯示邊界。
👉Auto：自適應顯示。
👉Fill：不保持寬高比進行放大縮小，使得圖片充滿顯示邊界。
👉ScaleDown：保持寬高比顯示，圖片縮小或者保持不變。
👉None：保持原有尺寸顯示。
加載網絡圖片
比如瀏覽新聞的時候，圖片一般從網絡加載而來，Image組件支持加載網絡圖片，將圖片地址換成網絡圖片地址進行加載。
Image('https://www.example.com/xxx.png')為了成功加載網絡圖片，您需要在module.json5文件中申明網絡訪問權限。
{"module" : {"requestPermissions":[{"name": "ohos.permission.INTERNET"}]} } 說明：應用訪問網絡需要申請ohos.permission.INTERNET權限，因為HarmonyOS提供了一種訪問控制機制即應用權限，用來保證這些數據或功能不會被不當或惡意使用。關于應用權限的的詳細信息開發者可以參考：訪問控制。
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)效果圖如下：
type的參數類型為InputType，包含以下幾種輸入類型：
👉Normal：基本輸入模式。支持輸入數字、字母、下劃線、空格、特殊字符。
👉Password：密碼輸入模式。
👉Email：e-mail地址輸入模式。
👉Number：純數字輸入模式。
設置光標位置
可以使用TextInputController動態設置光位置，下面的示例代碼使用TextInputController的caretPosition方法，將光標移動到了第二個字符后。
@Entry @Component struct TextInputDemo {controller: TextInputController = new TextInputController()build() {Column() {TextInput({ controller: this.controller })Button('設置光標位置').onClick(() => {this.controller.caretPosition(2)})}.height('100%').backgroundColor(0xE6F2FD)} }效果圖如下：
獲取輸入文本
我們可以給TextInput設置onChange事件，輸入文本發生變化時觸發回調，下面示例代碼中的value為實時獲取用戶輸入的文本信息。
@Entry @Component struct TextInputDemo {@State text: string = ''build() {Column() {TextInput({ placeholder: '請輸入賬號' }).caretColor(Color.Blue).onChange((value: string) => {this.text = value})Text(this.text)}.alignItems(HorizontalAlign.Center).padding(12).backgroundColor(0xE6F2FD)} }效果圖如下：
Button
Button組件主要用來響應點擊操作，可以包含子組件。下面的示例代碼實現了一個“登錄按鈕”：
Button('登錄', { type: ButtonType.Capsule, stateEffect: true }).width('90%').height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor('#007DFF')效果圖如下：
設置按鈕樣式
type用于定義按鈕樣式，示例代碼中ButtonType.Capsule表示膠囊形按鈕；stateEffect用于設置按鈕按下時是否開啟切換效果，當狀態置為false時，點擊效果關閉，默認值為true。
我們可以設置多種樣式的Button，除了Capsule可以以設置Normal和Circle：
👉Capsule：膠囊型按鈕（圓角默認為高度的一半）。
👉Circle：圓形按鈕。
👉Normal：普通按鈕（默認不帶圓角）。
設置按鈕點擊事件
可以給Button綁定onClick事件，每當用戶點擊Button的時候，就會回調執行onClick方法，調用里面的邏輯代碼。
Button('登錄', { type: ButtonType.Capsule, stateEffect: true })....onClick(() => {// 處理點擊事件邏輯})包含子組件
Button組件可以包含子組件，讓您可以開發出更豐富多樣的Button，下面的示例代碼中Button組件包含了一個Image組件：
效果圖如下：
6 LoadingProgress
LoadingProgress組件用于顯示加載進展，比如應用的登錄界面，當我們點擊登錄的時候，顯示的“正在登錄”的進度條狀態。LoadingProgress的使用非常簡單，只需要設置顏色和寬高就可以了。
LoadingProgress().color(Color.Blue).height(60).width(60)效果圖如下：
7 使用資源引用類型
Resource是資源引用類型，用于設置組件屬性的值。推薦大家優先使用Resource類型，將資源文件（字符串、圖片、音頻等）統一存放于resources目錄下，便于開發者統一維護。同時系統可以根據當前配置加載合適的資源，例如，開發者可以根據屏幕尺寸呈現不同的布局效果，或根據語言設置提供不同的字符串。
例如下面的這段代碼，直接在代碼中寫入了字符串和數字這樣的硬編碼。
Button('登錄', { type: ButtonType.Capsule, stateEffect: true }).width(300).height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor('#007DFF')我們可以將這些硬編碼寫到entry/src/main/resources下的資源文件中。
在string.json中定義Button顯示的文本。
{"string": [{"name": "login_text","value": "登錄"}] }在float.json中定義Button的寬高和字體大小。
{"float": [{"name": "button_width","value": "300vp"},{"name": "button_height","value": "40vp"},{"name": "login_fontSize","value": "18fp"}] }在color.json中定義Button的背景顏色。
{"color": [{"name": "button_color","value": "#1890ff"}] }然后在Button組件通過“$r('app.type.name')”的形式引用應用資源。app代表應用內resources目錄中定義的資源；type代表資源類型（或資源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”；name代表資源命名，由開發者定義資源時確定。
Button($r('app.string.login_text'), { type: ButtonType.Capsule }).width($r('app.float.button_width')).height($r('app.float.button_height')).fontSize($r('app.float.login_fontSize')).backgroundColor($r('app.color.button_color'))Column&Row組件的使用
概述
一個豐富的頁面需要很多組件組成，那么，我們如何才能讓這些組件有條不紊地在頁面上布局呢？這就需要借助容器組件來實現。
容器組件是一種比較特殊的組件，它可以包含其他的組件，而且按照一定的規律布局，幫助開發者生成精美的頁面。容器組件除了放置基礎組件外，也可以放置容器組件，通過多層布局的嵌套，可以布局出更豐富的頁面。
ArkTS為我們提供了豐富的容器組件來布局頁面，本文將以構建登錄頁面為例，介紹Column和Row組件的屬性與使用。
組件介紹
布局容器概念
線性布局容器表示按照垂直方向或者水平方向排列子組件的容器，ArkTS提供了Column和Row容器來實現線性布局。
Column表示沿垂直方向布局的容器。
Row表示沿水平方向布局的容器。
主軸和交叉軸概念
在布局容器中，默認存在兩根軸，分別是主軸和交叉軸，這兩個軸始終是相互垂直的。不同的容器中主軸的方向不一樣的。
👉主軸：在Column容器中的子組件是按照從上到下的垂直方向布局的，其主軸的方向是垂直方向；在Row容器中的組件是按照從左到右的水平方向布局的，其主軸的方向是水平方向。
圖2-1 Column容器&Row容器主軸
👉交叉軸：與主軸垂直相交的軸線，如果主軸是垂直方向，則交叉軸就是水平方向；如果主軸是水平方向，則交叉軸是垂直方向。
圖2-2 Column容器&Row容器交叉軸
屬性介紹
了解布局容器的主軸和交叉軸，主要是為了讓大家更好地理解子組件在主軸和交叉軸的排列方式。
接下來，我們將詳細講解Column和Row容器的兩個屬性justifyContent和alignItems。
1. 主軸方向的對齊（justifyContent）
子組件在主軸方向上的對齊使用justifyContent屬性來設置，其參數類型是FlexAlign。FlexAlign定義了以下幾種類型：
👉Start：元素在主軸方向首端對齊，第一個元素與行首對齊，同時后續的元素與前一個對齊。
👉Center：元素在主軸方向中心對齊，第一個元素與行首的距離以及最后一個元素與行尾距離相同。
👉End：元素在主軸方向尾部對齊，最后一個元素與行尾對齊，其他元素與后一個對齊。
👉SpaceBetween：元素在主軸方向均勻分配彈性元素，相鄰元素之間距離相同。 第一個元素與行首對齊，最后一個元素與行尾對齊。
👉SpaceAround：元素在主軸方向均勻分配彈性元素，相鄰元素之間距離相同。 第一個元素到行首的距離和最后一個元素到行尾的距離是相鄰元素之間距離的一半。
👉SpaceEvenly：元素在主軸方向等間距布局，無論是相鄰元素還是邊界元素到容器的間距都一樣。
2. 交叉軸方向的對齊（alignItems）
子組件在交叉軸方向上的對齊方式使用alignItems屬性來設置。
Column容器的主軸是垂直方向，交叉軸是水平方向，其參數類型為HorizontalAlign（水平對齊），HorizontalAlign定義了以下幾種類型：
👉Start：設置子組件在水平方向上按照起始端對齊。
👉Center（默認值）：設置子組件在水平方向上居中對齊。
👉End：設置子組件在水平方向上按照末端對齊。
Row容器的主軸是水平方向，交叉軸是垂直方向，其參數類型為VerticalAlign（垂直對齊），VerticalAlign定義了以下幾種類型：
👉Top：設置子組件在垂直方向上居頂部對齊。
👉Center（默認值）：設置子組件在豎直方向上居中對齊。
👉Bottom：設置子組件在豎直方向上居底部對齊。
接口介紹
接下來，我們介紹Column和Row容器的接口。
Column和Row容器的接口都有一個可選參數space，表示子組件在主軸方向上的間距。
效果如下：
組件使用
我們來具體講解如何高效的使用Column和Row容器組件來構建這個登錄頁面。
當我們從設計同學那拿到一個頁面設計圖時，我們需要對頁面進行拆解，先確定頁面的布局，再分析頁面上的內容分別使用哪些組件來實現。
我們仔細分析這個登錄頁面。在靜態布局中，組件整體是從上到下布局的，因此構建該頁面可以使用Column來構建。在此基礎上，我們可以看到有部分內容在水平方向上由幾個基礎組件構成，例如頁面中間的短信驗證碼登錄與忘記密碼以及頁面最下方的其他方式登錄，那么構建這些內容的時候，可以在Column組件中嵌套Row組件，繼而在Row組件中實現水平方向的布局。
根據上述頁面拆解，在Column容器里，依次是Image、Text、TextInput、Button等基礎組件，還有兩組組件是使用Row容器組件來實現的，主要代碼如下：
@Entry @Component export struct LoginPage {build() {Column() {Image($r('app.media.logo'))...Text($r('app.string.login_page'))...Text($r('app.string.login_more'))...TextInput({ placeholder: $r('app.string.account') })...TextInput({ placeholder: $r('app.string.password') })...Row() {Text($r(…)) Text($r(…)) }Button($r('app.string.login'), { type: ButtonType.Capsule, stateEffect: true })...Row() {this.imageButton($r(…))this.imageButton($r(…))this.imageButton($r(…))}...}...} }我們詳細看一下使用Row容器的兩組組件。
兩個文本組件展示的內容是按水平方向布局的，使用兩端對齊的方式。這里我們使用Row容器組件，并且需要配置主軸上（水平方向）的對齊格式justifyContent為FlexAlign.SpaceBetween（兩端對齊）。
Row() {Text($r(…)) Text($r(…)) }.justifyContent(FlexAlign.SpaceBetween).width('100%')其他登錄方式的三個按鈕也是按水平方向布局的，同樣使用Row容器組件。這里按鈕的間距是一致的，我們可以通過配置可選參數space來設置按鈕間距，使子組件間距一致。
Row({ space: CommonConstants.LOGIN_METHODS_SPACE }) {this.imageButton($r(…))this.imageButton($r(…))this.imageButton($r(…)) }至此，你已經完成這個登錄頁面的簡單布局實現了。你可以參考《常用組件與布局》這個Codelab驗證一下頁面效果。
另外，你也可以通過《常用布局容器對齊方式》這個Codelab來深入學習Column、Row、Flex、Stack容器組件的對齊方式，掌握更多布局容器的使用方法。
參考資料
常用基礎的組件的更多使用方法可以參考：
Text
Image
TextInput
Button
LoadingProgress
引用資源類型的使用可以參考：
資源訪問
Column組件的相關API參考：Column組件。
Row組件的相關API參考：Row組件。
鏈接
總結
以上是生活随笔為你收集整理的梅克尔工作室-赵一帆-鸿蒙笔记2的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 长相思 (上)
- 下一篇： Java开发的六大基本原则