ArkTS提供了Column和Row容器来实现线性布局。
- Column表示沿垂直方向布局的容器。
- Row表示沿水平方向布局的容器。
Column和Row容器的接口:
Column和Row容器的属性:![](https://img-blog.csdnimg.cn/4ffa8f6c195f4f89a5211f02c7b3879d.png)
一:主轴方向的对齐(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)