Column&Row組件的使用
1 概述
一個豐富的頁面需要很多組件組成，那么，我們如何才能讓這些組件有條不紊地在頁面上布局呢？這就需要借助容器組件來實現。
容器組件是一種比較特殊的組件，它可以包含其他的組件，而且按照一定的規律布局，幫助開發者生成精美的頁面。容器組件除了放置基礎組件外，也可以放置容器組件，通過多層布局的嵌套，可以布局出更豐富的頁面。
ArkTS為我們提供了豐富的容器組件來布局頁面，本文將以構建登錄頁面為例，介紹Column和Row組件的屬性與使用。
2 組件介紹
布局容器概念
線性布局容器表示按照垂直方向或者水平方向排列子組件的容器，ArkTS提供了Column和Row容器來實現線性布局。
- Column表示沿垂直方向布局的容器。
- Row表示沿水平方向布局的容器。
主軸和交叉軸概念
在布局容器中，默認存在兩根軸，分別是主軸和交叉軸，這兩個軸始終是相互垂直的。不同的容器中主軸的方向不一樣的。
- 主軸：在Column容器中的子組件是按照從上到下的垂直方向布局的，其主軸的方向是垂直方向；在Row容器中的組件是按照從左到右的水平方向布局的，其主軸的方向是水平方向。
圖2-1 Column容器&Row容器主軸
- 交叉軸：與主軸垂直相交的軸線，如果主軸是垂直方向，則交叉軸就是水平方向；如果主軸是水平方向，則交叉軸是垂直方向。
圖2-2 Column容器&Row容器交叉軸
屬性介紹
了解布局容器的主軸和交叉軸，主要是為了讓大家更好地理解子組件在主軸和交叉軸的排列方式。
接下來，我們將詳細講解Column和Row容器的兩個屬性justifyContent和alignItems。
| 屬性名稱 | 描述 |
|---|---|
| justifyContent | 設置子組件在主軸方向上的對齊格式。 |
| alignItems | 設置子組件在交叉軸方向上的對齊格式。 |
1. 主軸方向的對齊（justifyContent）
子組件在主軸方向上的對齊使用justifyContent屬性來設置，其參數類型是FlexAlign。FlexAlign定義了以下幾種類型：
- Start：元素在主軸方向首端對齊，第一個元素與行首對齊，同時后續的元素與前一個對齊。
- Center：元素在主軸方向中心對齊，第一個元素與行首的距離以及最后一個元素與行尾距離相同。
- End：元素在主軸方向尾部對齊，最后一個元素與行尾對齊，其他元素與后一個對齊。
- SpaceBetween：元素在主軸方向均勻分配彈性元素，相鄰元素之間距離相同。 第一個元素與行首對齊，最后一個元素與行尾對齊。
- SpaceAround：元素在主軸方向均勻分配彈性元素，相鄰元素之間距離相同。 第一個元素到行首的距離和最后一個元素到行尾的距離是相鄰元素之間距離的一半。
- SpaceEvenly：元素在主軸方向等間距布局，無論是相鄰元素還是邊界元素到容器的間距都一樣。
- 交叉軸方向的對齊（alignItems）
子組件在交叉軸方向上的對齊方式使用alignItems屬性來設置。
Column容器的主軸是垂直方向，交叉軸是水平方向，其參數類型為HorizontalAlign（水平對齊），HorizontalAlign定義了以下幾種類型：
- Start：設置子組件在水平方向上按照起始端對齊。
- Center（默認值）：設置子組件在水平方向上居中對齊。
- End：設置子組件在水平方向上按照末端對齊。
Row容器的主軸是水平方向，交叉軸是垂直方向，其參數類型為VerticalAlign（垂直對齊），VerticalAlign定義了以下幾種類型：
- Top：設置子組件在垂直方向上居頂部對齊。
- Center（默認值）：設置子組件在豎直方向上居中對齊。
- Bottom：設置子組件在豎直方向上居底部對齊。
接口介紹
接下來，我們介紹Column和Row容器的接口。
| 容器組件 | 接口 | |
|---|---|---|
| Column | Column(value?:{space?: string | number}) |
| Row | Row(value?:{space?: string | number}) |
Column和Row容器的接口都有一個可選參數space，表示子組件在主軸方向上的間距。
效果如下：
3 組件使用
我們來具體講解如何高效的使用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容器組件的對齊方式，掌握更多布局容器的使用方法。
4 參考鏈接
- Column組件的相關API參考：Column組件。
Column、Row、Flex、Stack容器組件的對齊方式，掌握更多布局容器的使用方法。
