1 概述
一個豐富的頁面需要很多組件組成属愤，那么船万，我們?nèi)绾尾拍茏屵@些組件有條不紊地在頁面上布局呢？這就需要借助容器組件來實現(xiàn)舶衬。
容器組件是一種比較特殊的組件，它可以包含其他的組件赎离，而且按照一定的規(guī)律布局逛犹，幫助開發(fā)者生成精美的頁面。容器組件除了放置基礎(chǔ)組件外梁剔，也可以放置容器組件虽画，通過多層布局的嵌套，可以布局出更豐富的頁面憾朴。
ArkTS為我們提供了豐富的容器組件來布局頁面狸捕，本文將以構(gòu)建登錄頁面為例，介紹Column和Row組件的屬性與使用众雷。
2 組件介紹
布局容器概念
線性布局容器表示按照垂直方向或者水平方向排列子組件的容器，ArkTS提供了Column和Row容器來實現(xiàn)線性布局做祝。
Column表示沿垂直方向布局的容器砾省。
Row表示沿水平方向布局的容器。
主軸和交叉軸概念
在布局容器中混槐，默認(rèn)存在兩根軸编兄，分別是主軸和交叉軸，這兩個軸始終是相互垂直的声登。不同的容器中主軸的方向不一樣的狠鸳。
- 主軸：在Column容器中的子組件是按照從上到下的垂直方向布局的，其主軸的方向是垂直方向悯嗓；在Row容器中的組件是按照從左到右的水平方向布局的件舵，其主軸的方向是水平方向。
圖1 Column容器&Row容器主軸
- 交叉軸：與主軸垂直相交的軸線脯厨，如果主軸是垂直方向铅祸，則交叉軸就是水平方向；如果主軸是水平方向，則交叉軸是垂直方向临梗。
圖2 Column容器&Row容器交叉軸
屬性介紹
了解布局容器的主軸和交叉軸涡扼，主要是為了讓大家更好地理解子組件在主軸和交叉軸的排列方式。
接下來盟庞，我們將詳細(xì)講解Column和Row容器的兩個屬性justifyContent和alignItems吃沪。
1. 主軸方向的對齊（justifyContent）
子組件在主軸方向上的對齊使用justifyContent屬性來設(shè)置，其參數(shù)類型是FlexAlign什猖。FlexAlign定義了以下幾種類型：
- Start：元素在主軸方向首端對齊票彪，第一個元素與行首對齊，同時后續(xù)的元素與前一個對齊卸伞。
- Center：元素在主軸方向中心對齊抹镊，第一個元素與行首的距離以及最后一個元素與行尾距離相同。
- End：元素在主軸方向尾部對齊荤傲，最后一個元素與行尾對齊垮耳，其他元素與后一個對齊。
- SpaceBetween：元素在主軸方向均勻分配彈性元素遂黍，相鄰元素之間距離相同终佛。 第一個元素與行首對齊，最后一個元素與行尾對齊雾家。
- SpaceAround：元素在主軸方向均勻分配彈性元素铃彰，相鄰元素之間距離相同。 第一個元素到行首的距離和最后一個元素到行尾的距離是相鄰元素之間距離的一半芯咧。
- SpaceEvenly：元素在主軸方向等間距布局牙捉，無論是相鄰元素還是邊界元素到容器的間距都一樣。
2. 交叉軸方向的對齊（alignItems）
子組件在交叉軸方向上的對齊方式使用alignItems屬性來設(shè)置敬飒。
Column容器的主軸是垂直方向邪铲，交叉軸是水平方向，其參數(shù)類型為HorizontalAlign（水平對齊）无拗，HorizontalAlign定義了以下幾種類型：
- Start：設(shè)置子組件在水平方向上按照起始端對齊带到。
- Center（默認(rèn)值）：設(shè)置子組件在水平方向上居中對齊。
- End：設(shè)置子組件在水平方向上按照末端對齊英染。
Row容器的主軸是水平方向揽惹，交叉軸是垂直方向，其參數(shù)類型為VerticalAlign（垂直對齊）四康，VerticalAlign定義了以下幾種類型：
- Top：設(shè)置子組件在垂直方向上居頂部對齊搪搏。
- Center（默認(rèn)值）：設(shè)置子組件在豎直方向上居中對齊。
- Bottom：設(shè)置子組件在豎直方向上居底部對齊箭养。
接口介紹
接下來慕嚷，我們介紹Column和Row容器的接口。
Column和Row容器的接口都有一個可選參數(shù)space，表示子組件在主軸方向上的間距喝检。
效果如下：
3 組件使用
我們來具體講解如何高效的使用Column和Row容器組件來構(gòu)建這個登錄頁面嗅辣。
當(dāng)我們從設(shè)計同學(xué)那拿到一個頁面設(shè)計圖時，我們需要對頁面進(jìn)行拆解挠说，先確定頁面的布局澡谭，再分析頁面上的內(nèi)容分別使用哪些組件來實現(xiàn)。
我們仔細(xì)分析這個登錄頁面损俭。在靜態(tài)布局中蛙奖，組件整體是從上到下布局的，因此構(gòu)建該頁面可以使用Column來構(gòu)建杆兵。在此基礎(chǔ)上雁仲，我們可以看到有部分內(nèi)容在水平方向上由幾個基礎(chǔ)組件構(gòu)成，例如頁面中間的短信驗證碼登錄與忘記密碼以及頁面最下方的其他方式登錄琐脏，那么構(gòu)建這些內(nèi)容的時候攒砖，可以在Column組件中嵌套Row組件，繼而在Row組件中實現(xiàn)水平方向的布局日裙。
根據(jù)上述頁面拆解吹艇，在Column容器里，依次是Image昂拂、Text受神、TextInput、Button等基礎(chǔ)組件格侯，還有兩組組件是使用Row容器組件來實現(xiàn)的鼻听，主要代碼如下：
@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(…))
}
...
}
...
}
}
我們詳細(xì)看一下使用Row容器的兩組組件。
兩個文本組件展示的內(nèi)容是按水平方向布局的联四，使用兩端對齊的方式精算。這里我們使用Row容器組件，并且需要配置主軸上（水平方向）的對齊格式j(luò)ustifyContent為FlexAlign.SpaceBetween（兩端對齊）碎连。
Row() {
Text($r(…))
Text($r(…))
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
其他登錄方式的三個按鈕也是按水平方向布局的，同樣使用Row容器組件驮履。這里按鈕的間距是一致的鱼辙，我們可以通過配置可選參數(shù)space來設(shè)置按鈕間距，使子組件間距一致玫镐。
Row({ space: CommonConstants.LOGIN_METHODS_SPACE }) {
this.imageButton($r(…))
this.imageButton($r(…))
this.imageButton($r(…))
}
至此倒戏，你已經(jīng)完成這個登錄頁面的簡單布局實現(xiàn)了。
