鴻蒙ArkTS語言入門——容器和組件的使用
經過前面的學習,筆者為大家介紹了使用ArkTS如何搭建一個簡單的頁面，介紹了一個頁面的組成部分以及一部分的容器和組件，在接下來的這篇博客中，筆者將為對之前的知識進行一個補充，主要是針對一些組件更多屬性的應用，還會介紹其他例如列表組件的使用，使得頁面的功能更加豐富。
Column與Row
首先如圖
我們可以看到，Column和Row都有一個可選參數“space”，space的類型可以是string或number類型，space的作用是調節其在主軸上子組件之間的距離（Column和Row的主軸分別為縱向和橫向），舉個例子：
Column(){
Test($r('app.string.orther_login_method'))
.fontsize(50)
Row(){
Image($r('app.media.method1'))
Image($r('app.media.method2'))
Image($r('app.media.method3'))
}
}該代碼顯示效果如下：
但在加入Column和Row的space參數后。
Column({spaec:30}){
Test($r('app.string.orther_login_method'))
.fontsize(50)
Row({spaec:20}){
Image($r('app.media.method1'))
Image($r('app.media.method2'))
Image($r('app.media.method3'))
}
}該效果就呈現為：
比較后不難發現，在縱向和橫向上，各個組件之間的距離發生的變化。
這個便是space參數的用法。
接下來，還要介紹這個兩個容器的重要屬性“justifyContent”以及“alignItems”。
其中，justifyContent的數據類型為FlexAlign,它的具體類型有以下幾個：
接下來，我為大家提供前三個代碼示例：
Column(){
Test($r('app.string.orther_login_method'))
.fontsize(50)
Row(){
Image($r('app.media.method1'))
Image($r('app.media.method2'))
Image($r('app.media.method3'))
}
.justifyContent(FlexAlign.Start)//首端對齊
.width('100%')
}效果如圖：
同理：
Column(){
Test($r('app.string.orther_login_method'))
.fontsize(50)
Row(){
Image($r('app.media.method1'))
Image($r('app.media.method2'))
Image($r('app.media.method3'))
}
.justifyContent(FlexAlign.End)//末端對齊
.width('100%')
}效果如圖：
同理：
Column(){
Test($r('app.string.orther_login_method'))
.fontsize(50)
Row(){
Image($r('app.media.method1'))
Image($r('app.media.method2'))
Image($r('app.media.method3'))
}
.justifyContent(FlexAlign.Center)//中心對齊
.width('100%')
}效果如圖：
接下來，我們來介紹alignItems屬性，該屬性可以控制該容器的子組件在交叉軸上（Column與Row的交叉軸分別為橫向與縱向）上的排列方式，alignItems屬性在這兩個容器中的參數類型并不相同，其中Column容器的參數為HorizontalAlign(水平對齊)，而Row容器的參數為VerticalAlign（垂直對齊），它們分別由如下幾個排列方式：
圖片
下面，我將以Column容器為例，介紹它的alignItems屬性的用法：
Column(){
Test($r('app.string.orther_login_method'))
.fontsize(50)
Row(){
Image($r('app.media.method1'))
Image($r('app.media.method2'))
Image($r('app.media.method3'))
}
}
.alignItems(HorizontalAlign.Start)//首端對齊
.width('100%')效果如圖，可以發現子組件排列在了Column容器的交叉軸的最左端：
同理：
Column(){
Test($r('app.string.orther_login_method'))
.fontsize(50)
Row(){
Image($r('app.media.method1'))
Image($r('app.media.method2'))
Image($r('app.media.method3'))
}
}
.alignItems(HorizontalAlign.Center)//中心對齊
.width('100%')效果如圖：
同理：
Column(){
Test($r('app.string.orther_login_method'))
.fontsize(50)
Row(){
Image($r('app.media.method1'))
Image($r('app.media.method2'))
Image($r('app.media.method3'))
}
}
.alignItems(HorizontalAlign.End)//末端對齊
.width('100%')效果如圖：
以上便是全部對Column和Row容器的補充內容。
下面我們來一起學習新的組件內容：
在日常生活的軟件中，大家應該經常能碰到像這樣的頁面：
它通過一行行的表格使它的功能整齊排列在頁面中，不僅使得頁面美觀，而且給用戶帶來了方便的使用體驗，那么這樣的表格是如何實現的？接下來將介紹一個生成表格的組件----List。
List
如圖所示，可以看到List組件一共有三個參數，分別是“space”“initalIndex”以及“scroller”，其中space的作用是用于調整列表項之間的間距。
initalIndex是用于設置List初次加載時起始位置顯示的item。
scroller的作用則是控制List組件的滾動。
而List組件的屬性則主要有以下兩種：
在正式學習List組件之前，我們需要學會ForEach循環渲染，它將有利于我們更好的構建出大量格式相仿的表格項，大大減少我們的代碼量。
ForEach循環渲染
不難發現它也是擁有3個參數。
- 參數1：arr arr為需要迭代的數組，我們需要將數據提前存放在這個數組里，ForEach會將數據按順序渲染進列表項里'。
- 參數2：itemGenerator itemGenerator是為子組件生成函數，主要是用于設定好列表樣式以進行循環渲染。
- 參數3:keyGenerator keyGenerator是用于為數組唯一鍵值生成函數。
學習完ForEach后，我們便可以開始學習使用List組件了，首先，我們先來看看構建一個列表的步驟，如下圖：
接下來，我將以此圖為例，嘗試做出一張列表。
我們先對列表的每一項進行分析，例如：
在這個列表項里，我們可以看到，它是由最左側的圖標，接著的文本，還有最右側的箭頭圖標三個部分組成的，獲得這些信息后，我們首先得創建一個命名為itemData的類，用于存放一個列表項里的數據（定義列表數據對象）：
export default class itemData{
img?:Resouce;
title: Resouce;
others:Resouce;
//初始化列表項數據構建對應數據
constructor（img?:Resouce，title: Resouce，others:Resouce）{
this.img = img;
this.title = title;
this.others = others;
}
}接著到第二步，創建列表數據數組，代碼如下：
export class MainViewModel{
...
//創建函數getSettingListData用于接收數據
getSettingListData():array<ItemData>{
//創建數組settingListData用于存放接收到的數據
let settingListData:ItemData[] = [
new ItemData($r('app.media,news'),$r('app.string.setting_List_news'),$r('app.strinjg.setting.List.toggle')),
new ItemData($r('app.media.data'),$r('app.string.setting_List_data'),null),
new ItemData($r('app.media.menu'),$r('app.string.setting_List_menu'),null),
...
];
return settingListData;
}
}
export default new MainViewModel();第三步，使用List組件構建列表。
@Builder SettingCell(item:ItemData){
Row(){
Row({space:12}){
Image(item.img)
Test(item.title)
}
if(itme.others == null){
Image($r('app.media.right_grey'))//向右箭頭圖標
}else{
Toggle(Toggle({type:ToggleType.switch,isOn:false}))//啟動按鈕
}
}
.justifyContent(FlexAlign.SpaceBetween)//第一個元素行首對齊，最后一個元素行尾對齊
.width('100%')
}第四步，使用ForEach構建列表：
@Component
export default struct Setting{
@Builder SettingCell(item:ItemData){...}
...
List(){
ForEach(MainViewModel.getSettingListData(),//遍歷數組數據
(item:ItemData) => {ListItem(){
this.settingCell(item)
}//生成子組件
},item => JSON.stringify(item))//生成數組項鍵值
}
.divider({...})//設置列表分割線
...
}經過上面的步驟，我們就能完成一個List列表的構建，完成一個。
這樣的列表。
以上便是本片博客的全部內容，如果描述有誤，還請讀者指正！編者會繼續努力，帶來更多詳盡的基礎知識。
此博客由金陵科技學院-開放原子開源社-張子航編寫。
