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

交叉軸

1. 垂直于主軸方向的軸線。Row容器交叉軸為縱向，Column容器交叉軸為橫向。
2. 通過alignItems屬性設置子元素在交叉軸（排列方向的垂直方向）上的對齊方式
3. alignSelf屬性用于控制單個子元素在容器交叉軸上的對齊方式，其優(yōu)先級高于alignItems屬性，如果設置了alignSelf屬性，則在單個子元素上會覆蓋alignItems屬性
4. 開發(fā)前請熟悉鴻蒙開發(fā)指導文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

Column容器內(nèi)子元素在水平方向上的排列

typescript
復制代碼
Column() {
...
}.alignItems(HorizontalAlign.Start)

1. HorizontalAlign.Start：子元素在水平方向左對齊
2. HorizontalAlign.Center：子元素在水平方向居中對齊
3. HorizontalAlign.End：子元素在水平方向右對齊。

Row容器內(nèi)子元素在垂直方向上的排列

typescript
復制代碼
Row() {
...
}.alignItems(VerticalAlign.Top)

1. VerticalAlign.Top：子元素在垂直方向頂部對齊
2. VerticalAlign.Center：子元素在垂直方向居中對齊
3. VerticalAlign.Bottom：子元素在垂直方向底部對齊

層疊布局（Stack）

1. 層疊布局主要用于實現(xiàn)基于Z軸的布局，容器中的子元素（子組件）依次入棧，后一個子元素覆蓋前一個子元素，子元素可以疊加，也可以通過zIndex設置位置
2. 可以通過[alignContent參數(shù)]實現(xiàn)位置的相對移動

typescript
復制代碼
Stack({ alignContent: Alignment.BottomStart })

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

彈性布局（Flex）

1. Row和Column容器只支持單方向的布局。你可以把Flex理解為它倆的升級版，能更靈活的控制布局方向和子元素布局。
2. 可以設置布局方向，是否自動換行等

審核編輯 黃宇