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

github_39096247

已于 2023-12-05 14:43:50 修改

阅读量2.9k

点赞数 1

分类专栏： harmonyos 文章标签： harmonyos

于 2023-09-08 14:16:33 首次发布

本文链接：https://blog.csdn.net/github_39096247/article/details/132756611

版权

harmonyos 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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)