ArkTS开发布局———线性布局(Row、Column)

1,155 阅读2分钟

线性布局

如果布局内子元素超过1个,且能够以某种方式线性排列时优先考虑此布局。 通过线性容器Row和Column构建。线性布局是其他布局的基础,其子元素在线性方向上(水平方向和垂直方向)依次排列。线性布局的排列方向由所选容器组件决定,Column容器内子元素按照垂直方向排列,Row容器内子元素按照水平方向排列

  • 布局容器:具有布局能力的容器组件,可以承载其他元素作为其子元素,布局容器会对其子元素进行尺寸计算和布局排列。

  • 布局子元素:布局容器内部的元素。

  • 主轴:线性布局容器在布局方向上的轴线,子元素默认沿主轴排列。Row容器主轴为水平方向,Column容器主轴为垂直方向。

    在主轴的方向对齐方式

    justifyContent(FlexAlign.Start):元素在首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐。

    justifyContent(FlexAlign.End):元素在尾部对齐,最后一个元素与行尾对齐,其他元素与后一个对齐。

    justifyContent(FlexAlign.Spacebetween):均匀分配元素,相邻元素之间距离相同。第一个元素与行首对齐,最后一个元素与行尾对齐。

    justifyContent(FlexAlign.SpaceAround):均匀分配元素,相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

    justifyContent(FlexAlign.SpaceEvenly):均匀分配元素,相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

  • 交叉轴:垂直于主轴方向的轴线。Row容器交叉轴为垂直方向,Column容器交叉轴为水平方向。

    Column:

    alignItems(HorizontalAlign.Start):子元素在水平方向左对齐

    alignItems(HorizontalAlign.Center):子元素在水平方向居中对齐。

    alignItems(HorizontalAlign.End):子元素在水平方向右对齐。

    Row:

    alignItems(VerticalAlign.Top):子元素在垂直方向顶部对齐。

    alignItems(VerticalAlign.Center):子元素在垂直方向居中对齐。

    alignItems(VerticalAlign.Bottom):子元素在垂直方向底部对齐。

  • 间距:布局子元素的间距。

    Row({ space: 35 })

    Column({ space: 35 })

自适应和具体的内容看官方文档

线性布局(Row/Column)-构建布局-开发布局-基于ArkTS的声明式开发范式-UI开发-开发-HarmonyOS应用开发