# 5.1:线性布局容器(Row、Column)

线性容器类表示按照水平方向或者竖直方向排列子组件的容器,ArkUI开发框架通过 RowColum 来实现线性布局。

# 5.1.1:主轴和纵轴概念

什么是主轴和纵轴?对于线性容器来说,有主轴和纵轴之分,如果布局是沿水平方向,那么主轴就指水平方向,而纵轴就是垂直方向;如果布局是沿垂直方向,那么主轴就是指垂直方向,而纵轴就是水平方向。

# 5.1.2:Row

Row 按照水平方向布局子组件,主轴为水平方向,纵轴为竖直方向。

# 5.1.2.1:Row定义介绍

interface RowInterface {
  (value?: { space?: string | number }): RowAttribute;
}
1
2
3
  • value:可选参数, space 表示设置 Row 的子组件在水平方向上的间距,简单样例如下所示:

    Row() {
      Text()
        .width(90)
        .height('100%')
        .backgroundColor("#aabbcc")
      Text()                        // 模拟子组件之间的间隔为20
        .width(20)
        .height('100%')
      Text()
        .width(20)
        .height('100%')
        .layoutWeight(1)
        .backgroundColor("#ccaabb")
    }
    .width('100%')
    .height(60)
    
    Row({space: 20}) {              // 设置子组件之间的间隔为20
      Text()
        .width(90)
        .height('100%')
        .backgroundColor("#aabbcc")
      Text()
        .width(20)
        .height('100%')
        .layoutWeight(1)
        .backgroundColor("#ccaabb")
    }
    .margin({top: 10})
    .width('100%')
    .height(60)
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31

    样例运行结果如5_1所示:

    5_1_1

# 5.1.2.2:Row属性介绍

declare class RowAttribute extends CommonMethod<RowAttribute> {
  alignItems(value: VerticalAlign): RowAttribute;
  justifyContent(value: FlexAlign): RowAttribute;
}
1
2
3
4
  • alignItems:参数类型为 VerticalAlign ,表示子组件在竖直方向上的布局方。式, VerticalAlign 定义了一下三种对其方式:

    • Top:设置子组件在竖直方向上居顶部对齐。
    • Center(默认值):设置子组件在竖直方向上居中对其。
    • Bottom:设置子组件在竖直方向上居底部对齐。

    简单样例如下所示:

    Row() {
      Text("Top")
        .fontSize(26)
        .backgroundColor("#aabbcc")
    }
    .alignItems(VerticalAlign.Top)    // 设置子组件在竖直方向顶部对齐
    .borderWidth(2)
    .borderColor(Color.Pink)
    .width('100%')
    .height(60)
    
    Row() {
      Text("Center")
        .fontSize(26)
        .backgroundColor("#aabbcc")
    }
    .alignItems(VerticalAlign.Center) // 设置子组件在竖直方向居中对齐
    .borderWidth(2)
    .borderColor(Color.Pink)
    .width('100%')
    .height(60)
    
    Row() {
      Text("Bottom")
        .fontSize(26)
        .backgroundColor("#aabbcc")
    }
    .alignItems(VerticalAlign.Bottom) // 设置子组件在竖直方向底部对齐
    .borderWidth(2)
    .borderColor(Color.Pink)
    .width('100%')
    .height(60)
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32

    样例运行结果如下图所示:

    5_1_2
  • justifyContent:设置子组件在水平方向上的对齐方式, FlexAlign 定义了一下几种类型:

    • Start:元素在主轴方向首端对齐, 第一个元素与行首对齐,同时后续的元素与前一个对齐。
    • Center:元素在主轴方向中心对齐,第一个元素与行首的距离与最后一个元素与行尾距离相同。
    • End:元素在主轴方向尾部对齐, 最后一个元素与行尾对齐,其他元素与后一个对齐。
    • SpaceBetween:主轴方向均匀分配弹性元素,相邻元素之间距离相同。 第一个元素与行首对齐,最后一个元素与行尾对齐。
    • SpaceAround:主轴方向均匀分配弹性元素,相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
    • SpaceEvenly:主轴方向元素等间距布局, 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

    简单样例如下所示:

    @Entry @Component struct RowTest {
    
      build() {
        Column({space: 10}) {
          Row() {
            Text()
              .size({width: 90, height: 50})
              .backgroundColor('#aabbcc')
            Text()
              .size({width: 90, height: 50})
              .backgroundColor('#bbccaa')
            Text()
              .size({width: 90, height: 50})
              .backgroundColor('#ccaabb')
          }
          .justifyContent(FlexAlign.Start)
          .size({width: "100%", height: 90})
          .borderWidth(2)
          .borderColor(Color.Pink)
          Row() {
            Text()
              .size({width: 90, height: 50})
              .backgroundColor('#aabbcc')
            Text()
              .size({width: 90, height: 50})
              .backgroundColor('#bbccaa')
            Text()
              .size({width: 90, height: 50})
              .backgroundColor('#ccaabb')
          }
          .justifyContent(FlexAlign.Center)
          .size({width: "100%", height: 90})
          .borderWidth(2)
          .borderColor(Color.Pink)
          Row() {
            Text()
              .size({width: 90, height: 50})
              .backgroundColor('#aabbcc')
            Text()
              .size({width: 90, height: 50})
              .backgroundColor('#bbccaa')
            Text()
              .size({width: 90, height: 50})
              .backgroundColor('#ccaabb')
          }
          .justifyContent(FlexAlign.End)
          .size({width: "100%", height: 90})
          .borderWidth(2)
          .borderColor(Color.Pink)
          Row() {
            Text()
              .size({width: 90, height: 50})
              .backgroundColor('#aabbcc')
            Text()
              .size({width: 90, height: 50})
              .backgroundColor('#bbccaa')
            Text()
              .size({width: 90, height: 50})
              .backgroundColor('#ccaabb')
          }
          .justifyContent(FlexAlign.SpaceBetween)
          .size({width: "100%", height: 90})
          .borderWidth(2)
          .borderColor(Color.Pink)
          Row() {
            Text()
              .size({width: 90, height: 50})
              .backgroundColor('#aabbcc')
            Text()
              .size({width: 90, height: 50})
              .backgroundColor('#bbccaa')
            Text()
              .size({width: 90, height: 50})
              .backgroundColor('#ccaabb')
          }
          .justifyContent(FlexAlign.SpaceAround)
          .size({width: "100%", height: 90})
          .borderWidth(2)
          .borderColor(Color.Pink)
          Row() {
            Text()
              .size({width: 90, height: 50})
              .backgroundColor('#aabbcc')
            Text()
              .size({width: 90, height: 50})
              .backgroundColor('#bbccaa')
            Text()
              .size({width: 90, height: 50})
              .backgroundColor('#ccaabb')
          }
          .justifyContent(FlexAlign.SpaceEvenly)
          .size({width: "100%", height: 90})
          .borderWidth(2)
          .borderColor(Color.Pink)
        }
        .padding(10)
        .size({width: "100%", height: '100%'})
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99

    样例运行结果如下图所示:

    5_1_2_2_2

    📢:如果 Row 设置了 space 参数,则 justifyContent 参数不起作用。

# 5.1.3:Column

Column 按照竖直方向布局子组件,主轴为竖直方向,纵轴为水平方向。

# 5.1.3.1:Column定义介绍

interface ColumnInterface {
  (value?: { space?: string | number }): ColumnAttribute;
}
1
2
3
  • value:可选参数, space 表示设置 Column 的子组件在竖直方向上的间距,参数和 Row 一样,读者可类比 Row 来理解,具体用法就不再介绍了。

# 5.1.3.2:Column属性介绍

declare class ColumnAttribute extends CommonMethod<ColumnAttribute> {
  alignItems(value: HorizontalAlign): ColumnAttribute;
  justifyContent(value: FlexAlign): ColumnAttribute;
}
1
2
3
4
  • alignItems:设置子组件在水平方向上的布局方式, HorizontalAlign 定义了以下三种对其方式:

    • Start:设置子组件在水平方向上按照语言方向起始端对齐。
    • Center(默认值):设置子组件在水平方向上居左对齐。
    • End:设置子组件在水平方向上按照语言方向末端对齐。

    简单样例如下图所示:

    Column() {
      Text("Start")
        .fontSize(22)
        .backgroundColor('#aabbcc')
    }
    .alignItems(HorizontalAlign.Start)
    .size({width: "100%", height: 60})
    .borderWidth(2)
    .borderColor(Color.Pink)
    
    Column() {
      Text("Center")
        .fontSize(22)
        .backgroundColor('#aabbcc')
    }
    .alignItems(HorizontalAlign.Center)
    .size({width: "100%", height: 60})
    .borderWidth(2)
    .borderColor(Color.Pink)
    
    Column() {
      Text("End")
        .fontSize(22)
        .backgroundColor('#aabbcc')
    }
    .alignItems(HorizontalAlign.End)
    .size({width: "100%", height: 60})
    .borderWidth(2)
    .borderColor(Color.Pink)
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29

    样例运行结果如下图所示:

    5_1_3_2_1
  • justifyContent:设置子组件在竖直方向上的对齐方式, FlexAlign 定义了一下几种类型:

    • Start:元素在主轴方向首端对齐, 第一个元素与行首对齐,同时后续的元素与前一个对齐。
    • Center:元素在主轴方向中心对齐,第一个元素与行首的距离与最后一个元素与行尾距离相同。
    • End:元素在主轴方向尾部对齐, 最后一个元素与行尾对齐,其他元素与后一个对齐。
    • SpaceBetween:元素在主轴方向均匀分配弹性元素,相邻元素之间距离相同。 第一个元素与行首对齐,最后一个元素与行尾对齐。
    • SpaceAround:元素在主轴方向均匀分配弹性元素,相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
    • SpaceEvenly:元素在主轴方向元素等间距布局, 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

    简单样例如下所示:

    @Entry @Component struct ColumnTest {
    
      build() {
        Column({space: 5}) {
          Column() {
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#aabbcc')
          
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#bbccaa')
          
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#ccaabb')
          }
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.Start)
          .size({width: "100%", height: 120})
          .borderWidth(2)
          .borderColor(Color.Pink)
          
          Column() {
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#aabbcc')
          
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#bbccaa')
          
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#ccaabb')
          }
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.Center)
          .size({width: "100%", height: 120})
          .borderWidth(2)
          .borderColor(Color.Pink)
          
          Column() {
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#aabbcc')
          
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#bbccaa')
          
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#ccaabb')
          }
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.SpaceAround)
          .size({width: "100%", height: 120})
          .borderWidth(2)
          .borderColor(Color.Pink)
          
          Column() {
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#aabbcc')
          
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#bbccaa')
          
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#ccaabb')
          }
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.SpaceBetween)
          .size({width: "100%", height: 120})
          .borderWidth(2)
          .borderColor(Color.Pink)
          
          Column() {
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#aabbcc')
          
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#bbccaa')
          
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#ccaabb')
          }
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.End)
          .size({width: "100%", height: 120})
          .borderWidth(2)
          .borderColor(Color.Pink)
          
          Column() {
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#aabbcc')
          
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#bbccaa')
          
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#ccaabb')
          }
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.SpaceEvenly)
          .size({width: "100%", height: 120})
          .borderWidth(2)
          .borderColor(Color.Pink)
    
        }
        .padding(10)
        .size({width: "100%", height: '100%'})
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123

    样例运行结果如下图所示:

    5_1_3_2_2

    📢:如果 Column 设置了 space 参数,则 justifyContent 参数不起作用。

# 5.1.4:Blank

Blank 表示空白填充组件,它用在 RowColumn 组件内来填充组件在主轴方向上的剩余尺寸的能力。

# 5.1.4.1:Blank定义介绍

interface BlankInterface {
  (min?: number | string): BlankAttribute;
}
1
2
3
  • minBlank 组件在容器主轴上的最小尺寸。

# 5.1.4.2:Blank属性介绍

declare class BlankAttribute extends CommonMethod<BlankAttribute> {
  color(value: ResourceColor): BlankAttribute;
}
1
2
3
  • color:设置空白填充的填充颜色。

Blank 组件简单样例如下所示:

@Entry @Component struct Index {
  build() {
    Column({space: 10}) {
      Row() {
        Text('Bluetooth').fontSize(18)      // 靠左显示
        Blank()                             // 铺满剩余尺寸
        Toggle({ type: ToggleType.Switch }) // 靠右显示
      }
      .width('100%')
      .backgroundColor(Color.Pink)
      .borderRadius(15)
      .padding({ left: 10})
    }
    .padding(10)
    .size({ width: "100%", height: '100%' })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

样例运行结果如下图所示:

5_1_4_2_1

📢: Blank 具有以下特性:

  • 只在 RowColumn 中生效。
  • 除了 color 外不支持通用属性。
  • 只在 RowColumn 有剩余空间才生效。
  • 适合用在多设备适配场景中。

# 5.1.5:小结

本节介绍了线性容器布局里的主轴和纵轴的概念以及 ColumnRow 的使用方法,读者可以借助线性容器组件实现简单的UI布局了,最后主要注意的是 ColumnRowspacejustifyContent 参数不能混用。

(adsbygoogle = window.adsbygoogle || []).push({});
请作者喝杯咖啡

津公网安备 12011402001367号

津ICP备2020008934号-2