鸿蒙布局Column/Row/Stack

简介

鸿蒙开发中，最常用的两种线性布局

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的值越来，层级就越高，也就是在最上层，也最容易被看到。