线性布局容器表示按照垂直方向或者水平方向排列子组件的容器,ArkTS提供了Column和Row容器来实现线性布局。
在布局容器中,默认存在两根轴,分别是主轴和交叉轴,这两个轴始终是相互垂直的。不同的容器中主轴的方向不一样的。
image.png
image.png
了解布局容器的主轴和交叉轴,主要是为了让大家更好地理解子组件在主轴和交叉轴的排列方式。
接下来,我们将详细讲解Column和Row容器的两个属性justifyContent和alignItems。
justifyContent,设置子组件在主轴方向上的对齐格式。
alignItems,设置子组件在交叉轴方向上的对齐格式。
1. 主轴方向的对齐(justifyContent)
子组件在主轴方向上的对齐使用justifyContent属性来设置,其参数类型是FlexAlign。FlexAlign定义了以下几种类型:
image.png
image.png
image.png
image.png
image.png
image.png
2. 交叉轴方向的对齐(alignItems)
子组件在交叉轴方向上的对齐方式使用alignItems属性来设置。
Column容器的主轴是垂直方向,交叉轴是水平方向,其参数类型为HorizontalAlign(水平对齐),HorizontalAlign定义了以下几种类型:
image.png
image.png
image.png
Row容器的主轴是水平方向,交叉轴是垂直方向,其参数类型为VerticalAlign(垂直对齐),VerticalAlign定义了以下几种类型:
image.png
image.png
image.png
接下来,我们介绍Column和Row容器的接口。 Column,Column(value?:{space?: string | number}) Row,Row(value?:{space?: string | number})
Column和Row容器的接口都有一个可选参数space,表示子组件在主轴方向上的间距。
效果如下:
image.png
image.png
image.png
在设置了display:flex模式后,配合下图属性使用
image.png
参考: