组件介绍

布局容器概念

线性布局容器表示按照垂直方向或水平方向排列子组件的容器.

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

主轴和交叉轴概念

默认存在两根轴, 主轴和交叉轴,这两个轴始终相互垂直.

• 主轴:
  • Column中的子组件从上到下的垂直方向布局,主轴方向是垂直方向
  • Row中的子组件是从左到右的水平方向布局,主轴方向是水平方向
• 交叉轴:
  • 与主轴垂直相交的轴线
  • 主轴是垂直方向,交叉轴主向是水平主向
  • 主轴是水平方向,交叉轴方向是垂直方向

属性介绍

justifyContent 主轴方向上的对齐

其参数类型是 FlexAlign

• Start: 元素在主轴方向首端对齐,第一个元素与行首对齐,同时后续元素与前一个对齐.
• Center: 元素在主轴方向中心对齐, 第一个元素与行首的距离以及最后一个元素与尾距离相同.
• End: 元素在主轴方向尾部对齐, 最后一个元素与行尾对齐,其他元素与后一个对齐.
• SpaceBetween: 元素在主轴方向均匀分配弹性元素,相邻元素之间距离相同.第一个元素与行首对齐,最后一个元素与行尾对齐.
• SpaceAround: 元素在主轴方向均匀分配弹性元素,相邻元素之间距离相同.第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半.
• SpaceEvenly: 元素在主轴方向等间距布局,无论是相依元素还是边界元素到容器到容器的间距都一样.

alignItems 交叉轴方向上的对齐

其参数类型是 alignItems

Column容器的主轴是垂直方向,交叉轴是水平方向,其参数类型为 HorizontalAlign(水平对齐), HorizontalAlign定义了以下几种类型:

• Start: 设置子组件在水平方向上按照起始端对齐
• Center(默认值): 设置子组件在水平方向上居中对齐
• End: 设置子组件在水平方向上末端对齐

Row容器的主轴是水平方向, 交叉轴是垂直方向,其参数类型为 VerticalAlign(垂直对齐), VerticalAlign定义了以下几种类型:

• Top: 设置子组件在垂直方向上居顶部对齐
• Center(默认值):设置子组件在垂直方向上居中对齐.
• Bottom:设置子组件在垂直方向上居底部对齐.

接口介绍

容器组件	接口
Column	Column(value?:{spze?:string | number})
Row	Row(value?:{space?:string | number})

Column和Row容器的接口都有一个可选参数space, 表示子组件在主轴方向上的间距.