Column

About 3 min

Column

沿垂直方向布局的容器。

权限列表

子组件

可以包含子组件。

接口

Column(options?: { space?: Length })

  • 参数

    参数名

    参数类型

    必填

    默认值

    参数描述

    space

    Length

    0

    纵向布局元素间距。

属性

名称

参数类型

默认值

描述

alignItems

HorizontalAlign

Center

设置子组件在水平方向上的对齐格式。

  • HorizontalAlign枚举说明

    名称

    描述

    Start

    按照语言方向起始端对齐。

    Center

    居中对齐,默认对齐方式。

    End

    按照语言方向末端对齐。

示例

@Entry
@Component
struct ColumnExample {
  build() {
    Column({ space: 5 }) {
      Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Column({ space: 5 }) {
        Column().width('100%').height(50).backgroundColor(0xAFEEEE)
        Column().width('100%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').height(107).border({ width: 1 })

      Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Column() {
        Column().width('50%').height(50).backgroundColor(0xAFEEEE)
        Column().width('50%').height(50).backgroundColor(0x00FFFF)
      }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })

      Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Column() {
        Column().width('50%').height(50).backgroundColor(0xAFEEEE)
        Column().width('50%').height(50).backgroundColor(0x00FFFF)
      }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })
    }.width('100%').padding({ top: 5 })
  }
}
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