簡介

鴻蒙開發中，最常用的兩種線性布局

Column:垂直布局方式
Row：水平布局方式

我們以Column為例進行講解

請看一下下面代碼

@Entry
@Component
struct ColumnTest {build() {Column({space: 10}){Text('Column垂直布局')Column({space:20}){Button('測試').width('50%').backgroundColor(Color.Green)Button('測試1').width('50%').backgroundColor(Color.Red)Button('測試2').width('50%').backgroundColor(Color.Blue)}.width('80%').height('50%').backgroundColor(Color.White).justifyContent(FlexAlign.Center)// .alignItems(HorizontalAlign.Start).border({width: 1,color: Color.Red,style: BorderStyle.Dotted,radius: 10})}.width('100%').height('100%').backgroundColor(0xffeeeeee).padding({top: 50})}
}

1. Column({space: 10}) 這里的space: 10，表示Column里面每個元素之間的間距為10

2. width(‘100%’)，height(‘100%’) 表示寬高占比

3. backgroundColor(0xffeeeeee) 設置背景顏色

4. padding({top: 50}) 設置頂部內邊距

```
padding(50) 表示上下左右，內邊距全部都是50
padding({top: 50,left: 30}) 表示頂部內邊距50，左邊內邊距30
```
如果使用margin外邊距，道理類似

5. border({width: 1,color: Color.Red,style: BorderStyle.Dotted,radius: 10}) 設置容器的邊框

```
width: 1 邊框寬1
color: Color.Red 邊框顏色
style: BorderStyle.Dotted 邊框線條方式Dotted 點Dashed 線段Solid 實線
radius: 10 設置容器圓角
```

6. justifyContent(FlexAlign.Center)表述元素在主軸排列方式

對于Column來說主軸就是Y（豎軸）

對于Row來說主軸就是X（橫軸）

FlexAlign有以下幾種排列方式：

FlexAlign.Start 頭部對齊
FlexAlign.Center 中間對齊
FlexAlign.End 底部對齊
FlexAlign.SpaceAround 元素與元素之間，元素與頂部或底部之間距離一樣
FlexAlign.SpaceBetween 元素與元素之間距離一樣，元素與頂部或底部之間距離為0
FlexAlign.SpaceEvenly 元素與元素之間距離一樣，元素與頂部或底部之間距離為元素相鄰間距的一般

FlexAlign.Start 展示方式

FlexAlign.End 展示方式

FlexAlign.Center 展示方式

FlexAlign.SpaceAround 展示方式

FlexAlign.SpaceBetween 展示方式

FlexAlign.SpaceEvenly 展示方式

7. .alignItems(HorizontalAlign.Start)表述元素在副軸排列方式

對于Column來說副軸就是X（橫軸）

對于Row來說副軸就是Y（豎軸）

HorizontalAlign有以下幾種排列方式：

HorizontalAlign.Start
HorizontalAlign.Center
HorizontalAlign.End

HorizontalAlign.Start 展示方式

HorizontalAlign.Center 展示方式

HorizontalAlign.End 展示方式

Stack—堆疊布局方式

這是一種在屏幕Z軸方向上的一種布局方式，類似于將所有的元素堆疊在一起，最后加入的在最上層，除非有明確指明放在那一層。

Stack(){Column().width(300).height(300).backgroundColor(Color.Black)Column().width(250).height(250).backgroundColor(Color.Orange)Column().width(200).height(200).backgroundColor(Color.Red)}.width('100%').height('50%').backgroundColor(Color.White).alignContent(Alignment.Center)

上面我們定義了3個Column，以Stack的方式堆疊在一起。

這里面的寬高/背景色，就不再介紹。

alignContent(Alignment.Center)排列方式介紹

Alignment有以下幾種形式

Alignment.TopStart  左上角
Alignment.Top 頂部中間
Alignment.TopEnd 右上角
Alignment.Start 中間左邊
Alignment.Center 中間
Alignment.End 中間右邊
Alignment.BottomTop 左下角
Alignment.Bottom 底部中間
Alignment.BottomEnd 右下角

zIndex的使用

除了按照順序添加元素外，還可以使用zIndex手動調整添加元素在stack中的第幾層。

Column().width(100).height(100).backgroundColor(Color.Red).zIndex(4)

zIndex的值越來，層級就越高，也就是在最上層，也最容易被看到。