DevEvo studio中的組件及其作用

• 布局容器的概念

線性布局容器表示按照垂直方向或者水平方向排列子組件的容器，ArkTS提供了Column和Row容器來實現線性布局。（主軸，交叉軸）

• Column表示沿垂直方向布局的容器。

• Row表示沿水平方向布局的容器。

2.Column和Row容器的兩個屬性

• 對齊的方式

i.主軸方向的對齊（justifyContent）

子組件在主軸方向上的對齊使用justifyContent屬性來設置，其參數類型是FlexAlign。FlexAlign定義了以下幾種類型：

• End：元素在主軸方向尾部對齊，最后一個元素與行尾對齊，其他元素與后一個對齊。

• Start：元素在主軸方向首端對齊，第一個元素與行首對齊，同時后續的元素與前一個對齊。

• Center：元素在主軸方向中心對齊，第一個元素與行首的距離以及最后一個元素與行尾距離相同。

• SpaceBetween：元素在主軸方向均勻分配彈性元素，相鄰元素之間距離相同。 第一個元素與行首對齊，最后一個元素與行尾對齊。

• SpaceAround：元素在主軸方向均勻分配彈性元素，相鄰元素之間距離相同。 第一個元素到行首的距離和最后一個元素到行尾的距離是相鄰元素之間距離的一半

• SpaceEvenly：元素在主軸方向等間距布局，無論是相鄰元素還是邊界元素到容器的間距都一樣。

ii.交叉軸方向的對齊（alignItems）

Column容器的主軸是垂直方向，交叉軸是水平方向，其參數類型為HorizontalAlign（水平對齊），HorizontalAlign定義了以下幾種類型：

• Start：設置子組件在水平方向上按照起始端對齊

• Center（默認值）：設置子組件在水平方向上居中對齊。

• End：設置子組件在水平方向上按照末端對齊。

iii.Row容器的主軸是水平方向，交叉軸是垂直方向，其參數類型為VerticalAlign（垂直對齊），VerticalAlign定義了以下幾種類型

• Top：設置子組件在垂直方向上居頂部對齊。

• Center（默認值）：設置子組件在豎直方向上居中對齊。

• Bottom：設置子組件在豎直方向上居底部對齊。

• 組件

• Text 文本組件

• Text、Span、Button、TextInput等可使用

• fontColor、fontSize、fontStyle、 fontWeight、fontFamily這些文本樣式，分別設置文本的顏色、大小、樣式、粗細以及字體，文本樣式的屬性

Text('HarmonyOS').width(200).textAlign(TextAlign.Start).backgroundColor(0xE6F2FD)例如下：

textAlign參數類型為TextAlign，定義了以下幾種類型：start， cente，r end

• Image 圖像組件

• 圖像可以用來渲染頁面，是頁面更加豐富多彩，如

Image($r("app.media.icon")).width(100).height(100)

• 設置縮放類型

• 將圖片加載到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：保持原有尺寸顯示。

• TextInput 輸入組件

• TextInput組件用于輸入單行文本，響應輸入事件。TextInput的使用也非常廣泛，例如應用登錄賬號密碼、發送消息等。和Text組件一樣，TextInput組件也支持文本樣式設置。例如

TextInput().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial')

• type的參數類型為InputType，包含以下幾種輸入類型：

• Normal：基本輸入模式。支持輸入數字、字母、下劃線、空格、特殊字符。

• Password：密碼輸入模式

• Email：e-mail地址輸入模式

• Number：純數字輸入模式

• Button 按鈕組件

• Button組件主要用來響應點擊操作，可以包含子組件，如；

Button({type:ButtonType.Circle,stateEffect: true}){Image($r('app.media.weibo')).width(40).height(40)}

• • 可以設置按鈕樣式

• Capsule：膠囊型按鈕

• Circle：圓形按鈕。

• Normal：普通按鈕（默認不帶圓角）。

• 設置按鈕點擊事件

總結

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

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