鴻蒙ArkUI開發(fā)：常用布局【主軸】

ArkUI中常用布局容器

線性布局（Row/Column）

1. 線性布局的子元素在線性方向上（水平方向和垂直方向）依次排列
2. 線性布局容器包括[Row]和[Column]。Column容器內(nèi)子元素按照垂直方向排列，Row容器內(nèi)子元素按照水平方向排列
3. 開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

主軸

1. 線性布局容器在布局方向上的軸線，子元素默認沿主軸排列。
2. Row容器主軸為橫向，Column容器主軸為縱向。通過justifyContent屬性設(shè)置子元素在容器主軸上的排列方式
3. 默認相鄰子元素是緊貼著的，也可以通過space設(shè)置子元素間的間距

Column容器內(nèi)子元素在主軸上的排列

主軸方向：垂直向下

typescript
復(fù)制代碼
Column() {
...
}.justifyContent(FlexAlign.Start)

1. justifyContent(FlexAlign.Start)：元素在主軸方向首端對齊，第一個元素與行首對齊，同時后續(xù)的元素與前一個對齊
2. justifyContent(FlexAlign.Center)：元素在主軸方向中心對齊，第一個元素與行首的距離與最后一個元素與行尾距離相同
3. justifyContent(FlexAlign.End)：元素在主軸方向尾部對齊，最后一個元素與行尾對齊，其他元素與后一個對齊
4. justifyContent(FlexAlign.Spacebetween)：主軸方向均勻分配元素，相鄰元素之間距離相同。第一個元素與行首對齊，最后一個元素與行尾對齊
5. justifyContent(FlexAlign.SpaceAround)：主軸方向均勻分配元素，相鄰元素之間距離相同。第一個元素到行首的距離和最后一個元素到行尾的距離是相鄰元素之間距離的一半
6. justifyContent(FlexAlign.SpaceEvenly)：主軸方向均勻分配元素，相鄰元素之間的距離、第一個元素與行首的間距、最后一個元素到行尾的間距都完全一樣

Row容器內(nèi)子元素在主軸上的排列

主軸方向：水平向右

typescript
復(fù)制代碼
Row() {
...
}.justifyContent(FlexAlign.Start)

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

1. justifyContent(FlexAlign.Start)：元素在主軸方向首端對齊，第一個元素與行首對齊，同時后續(xù)的元素與前一個對齊
2. justifyContent(FlexAlign.Center)：元素在主軸方向中心對齊，第一個元素與行首的距離與最后一個元素與行尾距離相同
3. justifyContent(FlexAlign.End)：元素在主軸方向尾部對齊，最后一個元素與行尾對齊，其他元素與后一個對齊
4. justifyContent(FlexAlign.Spacebetween)：主軸方向均勻分配元素，相鄰元素之間距離相同。第一個元素與行首對齊，最后一個元素與行尾對齊
5. justifyContent(FlexAlign.SpaceAround)：主軸方向均勻分配元素，相鄰元素之間距離相同。第一個元素到行首的距離和最后一個元素到行尾的距離是相鄰元素之間距離的一半
6. justifyContent(FlexAlign.SpaceEvenly)：主軸方向均勻分配元素，相鄰元素之間的距離、第一個元素與行首的間距、最后一個元素到行尾的間距都完全一樣

審核編輯 黃宇