HarmonyOS--ArkUI组件--容器组件Column和Row

ArkTS提供了Column和Row容器来实现线性布局。

• Column表示沿垂直方向布局的容器。
• Row表示沿水平方向布局的容器。

  

   Column和Row容器的接口:

  

   Column和Row容器的属性：

  一：主轴方向的对齐（justifyContent属性）

  justifyContent参数类型是FlexAlign,

  FlexAlign类型有:Start(默认)/Center/End/SpaceBetween/SpaceAround/SpaceEvenly

  二：交叉轴方向上的对齐 （alignItems属性）

  Column容器的主轴是垂直方向，交叉轴是水平方向，其参数类型为HorizontalAlign（水平对齐）

  Row容器的主轴是水平方向，交叉轴是垂直方向，其参数类型为VerticalAlign（垂直对齐）

  HorizontalAlign类型有 Start/Center(默认)/End

  VerticalAlign类型有 Top/Center(默认)/Bottom

  接口和属性用法：

  Column(space:20) {
      //
      Row() {
          Text('aaa')
      }
      .justifyContent(FlexAlign.SpaceBetween)
      //FlexAlign类型有:Start(默认)/Center/End/SpaceBetween/SpaceAround/SpaceEvenly
      .alignItems(VerticalAlign.Top)
      //VerticalAlign类型有 Top/Center(默认)/Bottom
      .width('100%')
        
  }
  .justifyContent(FlexAlign.start)
  .alignItems(HorizontalAlign.start)