第九讲_ArkUI线性布局（Row/Column）_arkts column 子节点高度分布

1. 线性布局概述

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。

2. 线性容器Row

Row容器内子元素按照水平方向排列，通过 space 属性设置排列方向上子元素的间距。

@Entry
@Component
struct RowLayout {
  build() {
    Row({space: 20}) {
      Button("第一按钮")
      Button("第二按钮")
      Button("第三按钮")
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11

2.1 子元素在主轴上的排列方式

在布局容器内，可以通过justifyContent属性设置子元素在容器主轴上的排列方式。Row容器的主轴是水平方向的。

• FlexAlign.Start：子元素在水平方向首端对齐（默认值）
• FlexAlign.Center：子元素在水平方向居中对齐
• FlexAlign.End：子元素在水平方向尾部对齐
• FlexAlign.SpaceBetween：子元素在水平方向均匀分配，第一个子元素与首端对齐、最后一个子元素与尾部对齐
• FlexAlign.SpaceAround：子元素在水平方向相邻元素之间距离相同，第一个子元素到首端的距离和最后一个子元素到尾部的距离是相邻元素之间距离的一半
• FlexAlign.SpaceEvenly：子元素在水平方向均匀分配，相邻元素之间的距离、第一个子元素与首端的距离和最后一个子元素到尾部的距离都完全一样

@Entry
@Component
struct RowLayout {
  build() {
    Row() {
      Button("第一按钮")
      Button("第二按钮")
      Button("第三按钮")
    }
    // 不设置Row容器宽，则Row容器的宽是子元素宽的总和
    .width("100%")
    .justifyContent(FlexAlign.SpaceBetween)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

@Entry
@Component
struct RowLayout {
  build() {
    Row() {
      Button("第一按钮")
      Button("第二按钮")
      Button("第三按钮")
    }
    // 不设置Row容器宽，则Row容器的宽是子元素宽的总和
    .width("100%")
    .justifyContent(FlexAlign.SpaceAround)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

@Entry
@Component
struct RowLayout {
  build() {
    Row() {
      Button("第一按钮")
      Button("第二按钮")
      Button("第三按钮")
    }
    // 不设置Row容器宽，则Row容器的宽是子元素宽的总和
    .width("100%")
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.2 子元素在交叉轴上的对齐方式

交叉轴是垂直于主轴的，因为Row容器的主轴是水平方向的，所以Row容器的交叉轴是垂直方向的。

在布局容器内，可以通过alignItems属性设置子元素在容器交叉轴上的对齐方式。

• VerticalAlign.Top：子元素在垂直方向顶部对齐
• VerticalAlign.Center：子元素在垂直方向居中对齐
• VerticalAlign.Bottom：子元素在垂直方向底部对齐

@Entry
@Component
struct RowLayout {
  build() {
    Row() {
      Button("第一按钮")
      Button("第二按钮")
      Button("第三按钮")
    }
    // 不设置Row容器宽，则Row容器的宽是子元素宽的总和
    .width("100%")
    // 不设置Row容器高，则Row容器的高等于子元素的高
    .height("100%")
    .justifyContent(FlexAlign.SpaceEvenly)
    .alignItems(VerticalAlign.Center)

  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

除了通过alignItems属性控制所有子元素在容器交叉轴上的对齐方式外，alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于alignItems属性。

• ItemAlign.Auto：使用默认值
• ItemAlign.Start：交叉轴上首部对齐（默认值）
• ItemAlign.Center：交叉轴上居中对齐。
• ItemAlign.End：交叉轴上底部对齐。
• ItemAlign.Stretch：交叉轴上拉伸填充，拉伸到容器同高（前提：子元素不设置高）
• ItemAlign.Baseline：交叉轴上文本基线对齐。

@Entry
@Component
struct RowLayout {
  build() {
    Row() {
      Button("第一按钮")
        .alignSelf(ItemAlign.Stretch)
      Button("第二按钮")
        .alignSelf(ItemAlign.Start)
      Button("第三按钮")
    }
    // 不设置Row容器宽，则Row容器的宽是子元素宽的总和
    .width("100%")
    // 不设置Row容器高，则Row容器的高等于子元素的高
    .height("100%")
    .justifyContent(FlexAlign.SpaceEvenly)
    .alignItems(VerticalAlign.Center)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3. 线性容器Column

Column容器内子元素按照垂直方向排列，通过 space 属性设置排列方向上子元素的间距。

@Entry
@Component
struct ColumnLayout {
  build() {
    Column({space: 20}) {
      Button("第一按钮")
      Button("第二按钮")
      Button("第三按钮")
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11

3.1 子元素在主轴上的排列方式

在布局容器内，可以通过justifyContent属性设置子元素在容器主轴上的排列方式。Column容器的主轴是垂直方向的。

• FlexAlign.Start：子元素在垂直方向首端对齐（默认值）
• FlexAlign.Center：子元素在垂直方向居中对齐
• FlexAlign.End：子元素在垂直方向尾部对齐
• FlexAlign.SpaceBetween：子元素在垂直方向均匀分配，第一个元素与首端对齐、最后一个元素与尾部对齐
• FlexAlign.SpaceAround：子元素在垂直方向相邻元素之间距离相同，第一个元素到首端的距离和最后一个元素到尾部的距离是相邻元素之间距离的一半
• FlexAlign.SpaceEvenly：子元素在垂直方向均匀分配，相邻元素之间的距离、第一个元素与首端的间距、最后一个元素到尾部的间距都完全一样

@Entry
@Component
struct ColumnLayout {
  build() {
    Column({space: 20}) {
      Button("第一按钮")
      Button("第二按钮")
      Button("第三按钮")
    }
    // 不设置Column容器高，则Column容器的高是子元素高的总和
    .height("100%")
    .justifyContent(FlexAlign.SpaceBetween)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

@Entry
@Component
struct ColumnLayout {
  build() {
    Column({space: 20}) {
      Button("第一按钮")
      Button("第二按钮")
      Button("第三按钮")
    }
    // 不设置Column容器高，则Column容器的高是子元素高的总和
    .height("100%")
    .justifyContent(FlexAlign.SpaceAround)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

@Entry
@Component
struct ColumnLayout {
  build() {
    Column({space: 20}) {
      Button("第一按钮")
      Button("第二按钮")
      Button("第三按钮")
    }
    // 不设置Column容器高，则Column容器的高是子元素高的总和
    .height("100%")
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.2 子元素在交叉轴上的对齐方式

交叉轴是垂直于主轴的，因为Column容器的主轴是垂直方向的，所以Column容器的交叉轴是水平方向的。

在布局容器内，可以通过alignItems属性设置子元素在容器交叉轴上的对齐方式。

• HorizontalAlign.Start：子元素在水平方向左对齐（默认值）
• HorizontalAlign.Center：子元素在水平方向居中对齐
• HorizontalAlign.End：子元素在水平方向右对齐

@Entry
@Component
struct ColumnLayout {
  build() {
    Column({space: 20}) {
      Button("第一按钮")
      Button("第二按钮")
      Button("第三按钮")
    }
    // 不设置Column容器高，则Column容器的高是子元素高的总和
    .height("100%")
    // 不设置Column容器宽，则Column容器的宽等于子元素的宽
    .width("100%")
    .justifyContent(FlexAlign.SpaceEvenly)
    .alignItems(HorizontalAlign.Center)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

除了通过alignItems属性控制所有子元素在容器交叉轴上的对齐方式外，alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于alignItems属性。

• ItemAlign.Auto：使用默认值
• ItemAlign.Start：交叉轴上首部对齐（默认值）
• ItemAlign.Center：交叉轴上居中对齐。
• ItemAlign.End：交叉轴上底部对齐。
• ItemAlign.Stretch：交叉轴上拉伸填充，拉伸到容器同宽（前提：子元素不设置宽）
• ItemAlign.Baseline：交叉轴上文本基线对齐。

@Entry
@Component
struct ColumnLayout {
  build() {
    Column({space: 20}) {
      Button("第一按钮")
        .alignSelf(ItemAlign.Stretch)
      Button("第二按钮")
        .alignSelf(ItemAlign.Start)
      Button("第三按钮")
    }
    // 不设置Column容器高，则Column容器的高是子元素高的总和
    .height("100%")
    // 不设置Column容器宽，则Column容器的宽等于子元素的宽
    .width("100%")
    .justifyContent(FlexAlign.SpaceEvenly)
    .alignItems(HorizontalAlign.Center)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19