HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第68天，线性布局（Row/Column）
HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第68天，线性布局（Row/Column）
1、线性布局（Row/Column）
1.1、概述
线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。
图1 Column容器内子元素排列示意图
图2 Row容器内子元素排列示意图
1.2、基本概念
- 布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。
- 布局子元素：布局容器内部的元素。
- 主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，Column容器主轴为垂直方向。
- 交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为垂直方向，Column容器交叉轴为水平方向。
- 间距：布局子元素的间距。
1.3、布局子元素在排列方向上的间距
在布局容器内，可以通过space属性设置排列方向上子元素的间距，使各子元素在排列方向上有等间距效果。
1.3.1、Column容器内排列方向上的间距
图3 Column容器内排列方向的间距图
1.3.2、Row容器内排列方向上的间距
图4 Row容器内排列方向的间距图
1.4、布局子元素在交叉轴上的对齐方式
在布局容器内，可以通过alignItems属性设置子元素在交叉轴（排列方向的垂直方向）上的对齐方式。且在各类尺寸屏幕中，表现一致。其中，交叉轴为垂直方向时，取值为VerticalAlign类型，水平方向取值为HorizontalAlign。
alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于alignItems属性，如果设置了alignSelf属性，则在单个子元素上会覆盖alignItems属性。
1.4.1、Column容器内子元素在水平方向上的排列
图5 Column容器内子元素在水平方向上的排列图
- HorizontalAlign.Start：子元素在水平方向左对齐。
图6 Row容器内子元素在垂直方向上的排列图
- VerticalAlign.Top：子元素在垂直方向顶部对齐。
- VerticalAlign.Center：子元素在垂直方向居中对齐。
- VerticalAlign.Bottom：子元素在垂直方向底部对齐。
1.5、布局子元素在主轴上的排列方式
在布局容器内，可以通过justifyContent属性设置子元素在容器主轴上的排列方式。可以从主轴起始位置开始排布，也可以从主轴结束位置开始排布，或者均匀分割主轴的空间。
1.5.1、Column容器内子元素在垂直方向上的排列
图7 Column容器内子元素在垂直方向上的排列图
- justifyContent(FlexAlign.Start)：元素在垂直方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
- justifyContent(FlexAlign.Center)：元素在垂直方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
- justifyContent(FlexAlign.End)：元素在垂直方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
- justifyContent(FlexAlign.SpaceBetween)：垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
- justifyContent(FlexAlign.SpaceAround)：垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
- justifyContent(FlexAlign.SpaceEvenly)：垂直方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
1.5.2、Row容器内子元素在水平方向上的排列
图8 Row容器内子元素在水平方向上的排列图
- justifyContent(FlexAlign.Start)：元素在水平方向方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
- justifyContent(FlexAlign.Center)：元素在水平方向方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
- justifyContent(FlexAlign.End)：元素在水平方向方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
- justifyContent(FlexAlign.SpaceBetween)：水平方向方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
- justifyContent(FlexAlign.SpaceAround)：水平方向方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
- justifyContent(FlexAlign.SpaceEvenly)：水平方向方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
1.6、自适应缩放
自适应缩放是指子组件随容器尺寸的变化而按照预设的比例自动调整尺寸，适应各种不同大小的设备。在线性布局中，可以使用以下两种方法实现自适应缩放。
- 父容器尺寸确定时，使用layoutWeight属性设置子组件和兄弟元素在主轴上的权重，忽略元素本身尺寸设置，使它们在任意尺寸的设备下自适应占满剩余空间。
- 父容器尺寸确定时，使用百分比设置子组件和兄弟元素的宽度，使他们在任意尺寸的设备下保持固定的自适应占比。
1.7、自适应延伸
自适应延伸是指在不同尺寸设备下，当页面的内容超出屏幕大小而无法完全显示时，可以通过滚动条进行拖动展示。这种方法适用于线性布局中内容无法一屏展示的场景。通常有以下两种实现方式。
- 在List中添加滚动条：当List子项过多一屏放不下时，可以将每一项子元素放置在不同的组件中，通过滚动条进行拖动展示。可以通过scrollBar属性设置滚动条的常驻状态，edgeEffect属性设置拖动到内容最末端的回弹效果。
- 使用Scroll组件：在线性布局中，开发者可以进行垂直方向或者水平方向的布局。当一屏无法完全显示时，可以在Column或Row组件的外层包裹一个可滚动的容器组件Scroll来实现可滑动的线性布局。
更多关于HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第68天，线性布局（Row/Column）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，ArkTS语言提供了两种常用的线性布局组件：Row和Column。Row组件用于水平排列子组件，而Column组件用于垂直排列子组件。
Row布局的特点是将子组件按照水平方向依次排列。可以通过设置justifyContent属性来调整子组件在主轴（水平轴）上的对齐方式，如FlexAlign.Start、FlexAlign.Center、FlexAlign.End等。还可以通过alignItems属性来调整子组件在交叉轴（垂直轴）上的对齐方式，如ItemAlign.Start、ItemAlign.Center、ItemAlign.End等。
Column布局的特点是将子组件按照垂直方向依次排列。同样可以通过justifyContent属性来调整子组件在主轴（垂直轴）上的对齐方式，通过alignItems属性来调整子组件在交叉轴（水平轴）上的对齐方式。
在使用Row和Column布局时，可以通过flexGrow、flexShrink和flexBasis等属性来控制子组件在布局中的伸缩行为。flexGrow用于指定子组件在剩余空间中的分配比例，flexShrink用于指定子组件在空间不足时的收缩比例，flexBasis用于指定子组件在分配空间之前的基准大小。
例如，以下代码展示了一个简单的Row布局示例：
Row({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Text('Item 1')
.flexGrow(1)
Text('Item 2')
.flexGrow(2)
}在该示例中，两个Text子组件在Row布局中水平居中排列，且Item 2的宽度是Item 1的两倍。
以下代码展示了一个简单的Column布局示例：
Column({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.End }) {
Text('Item 1')
Text('Item 2')
}在该示例中，两个Text子组件在Column布局中垂直排列，且子组件之间均匀分布，对齐方式为交叉轴的末尾。
通过合理使用Row和Column布局，可以轻松实现各种复杂的界面布局需求。
更多关于HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第68天，线性布局（Row/Column）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
