HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第70天，弹性布局（Flex）。
HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第70天，弹性布局（Flex）。
弹性布局（Flex）
1.1、概述
弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，
子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。弹性布局在开发场景中用例特别多，比如页面头部导航栏的均匀分布、
页面框架的搭建、多行数据的排列等等。
图1 主轴为水平方向的Flex容器示意图
1.3、基本概念
- 主轴：Flex组件布局方向的轴线，子元素默认沿着主轴排列。主轴开始的位置称为主轴起始点，结束位置称为主轴结束点。
- 交叉轴：垂直于主轴方向的轴线。交叉轴开始的位置称为交叉轴起始点，结束位置称为交叉轴结束点。
1.4、布局方向
在弹性布局中，容器的子元素可以按照任意方向排列。通过设置参数direction，可以决定主轴的方向，从而控制子组件的排列方向。
图2 弹性布局方向图
- FlexDirection.Row（默认值）：主轴为水平方向，子组件从起始端沿着水平方向开始排布。
- FlexDirection.RowReverse：主轴为水平方向，子组件从终点端沿着FlexDirection. Row相反的方向开始排布。
- FlexDirection.Column：主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。
- FlexDirection.ColumnReverse：主轴为垂直方向，子组件从终点端沿着FlexDirection. Column相反的方向开始排布。
1.5、布局换行
弹性布局分为单行布局和多行布局。默认情况下，Flex容器中的子元素都排在一条线（又称“轴线”）上。wrap参数控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行堆叠方向。
- FlexWrap. NoWrap（默认值）：不换行。如果子组件的宽度总和大于父元素的宽度，则子组件会被压缩宽度。
- FlexWrap. Wrap：换行，每一行子组件按照主轴方向排列。
- FlexWrap. WrapReverse：换行，每一行子组件按照主轴反方向排列。
1.6、主轴对齐方式
通过justifyContent参数设置在主轴方向的对齐方式。
图3 主轴对齐方式示意图
- FlexAlign.Start（默认值）：子组件在主轴方向起始端对齐， 第一个子组件与父元素边沿对齐，其他元素与前一个元素对齐。
- FlexAlign.Center：子组件在主轴方向居中对齐。
- FlexAlign.End：子组件在主轴方向终点端对齐, 最后一个子组件与父元素边沿对齐，其他元素与后一个元素对齐。
- FlexAlign.SpaceBetween：Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同。第一个子组件和最后一个子组件与父元素边沿对齐。
- FlexAlign.SpaceAround：Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同。第一个子组件到主轴起始端的距离和最后一个子组件到主轴终点端的距离是相邻元素之间距离的一半。
- FlexAlign.SpaceEvenly：Flex主轴方向元素等间距布局，相邻子组件之间的间距、第一个子组件与主轴起始端的间距、最后一个子组件到主轴终点端的间距均相等。
1.7、交叉轴对齐方式
容器和子元素都可以设置交叉轴对齐方式，且子元素设置的对齐方式优先级较高。
容器组件设置交叉轴对齐
可以通过Flex组件的alignItems参数设置子组件在交叉轴的对齐方式。
- ItemAlign.Auto：使用Flex容器中默认配置。
- ItemAlign.Start：交叉轴方向首部对齐。
- ItemAlign.Center：交叉轴方向居中对齐。
- ItemAlign.End：交叉轴方向底部对齐。
- ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。
- ItemAlign.Baseline：交叉轴方向文本基线对齐。
子组件设置交叉轴对齐
子组件的alignSelf属性也可以设置子组件在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems配置。如下例所示：
内容对齐
可以通过alignContent参数设置子组件各行在交叉轴剩余空间内的对齐方式，只在多行的flex布局中生效，可选值有：
- FlexAlign.Start：子组件各行与交叉轴起点对齐。
- FlexAlign.Center：子组件各行在交叉轴方向居中对齐。
- FlexAlign.End：子组件各行与交叉轴终点对齐。
- FlexAlign.SpaceBetween：子组件各行与交叉轴两端对齐，各行间垂直间距平均分布。
- FlexAlign.SpaceAround：子组件各行间距相等，是元素首尾行与交叉轴两端距离的两倍。
- FlexAlign.SpaceEvenly: 子组件各行间距，子组件首尾行与交叉轴两端距离都相等。
1.8、自适应拉伸
在弹性布局父组件尺寸不够大的时候，通过子组件的下面几个属性设置其在父容器的占比，达到自适应布局能力。
- flexBasis：设置子组件在父容器主轴方向上的基准尺寸。如果设置了该值，则子项占用的空间为设置的值；如果没设置该属性，那子项的空间为width/height的值。
- flexGrow：设置父容器的剩余空间分配给此属性所在组件的比例。用于“瓜分”父组件的剩余空间。
- flexShrink: 当父容器空间不足时，子组件的压缩比例。
更多关于HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第70天，弹性布局（Flex）。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS中，ArkTS语言支持使用弹性布局（Flex）来构建用户界面。弹性布局是一种灵活的布局方式，允许开发者通过简单的属性设置来调整子组件在容器中的排列方式。
1. Flex容器
Flex容器是使用Flex组件定义的。容器内的子组件将按照弹性布局的规则进行排列。常用的属性包括：
direction: 定义主轴方向，可选值为Row（水平）和Column（垂直）。justifyContent: 定义子组件在主轴上的对齐方式，如FlexStart、Center、FlexEnd、SpaceBetween、SpaceAround等。alignItems: 定义子组件在交叉轴上的对齐方式，如Stretch、Center、FlexStart、FlexEnd等。wrap: 定义子组件是否换行，可选值为NoWrap（不换行）和Wrap（换行）。
2. Flex子项
Flex容器内的子组件可以通过以下属性进行控制：
flexGrow: 定义子组件在主轴上的扩展比例。flexShrink: 定义子组件在主轴上的收缩比例。flexBasis: 定义子组件在主轴上的初始大小。alignSelf: 定义单个子组件在交叉轴上的对齐方式，可覆盖alignItems的设置。
3. 示例代码
import { Flex, Text } from '@ohos.arkui';
@Entry
@Component
struct FlexExample {
build() {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Text('Item 1').flexGrow(1)
Text('Item 2').flexGrow(2)
Text('Item 3').flexGrow(1)
}
.width('100%')
.height('100%')
}
}在该示例中，Flex容器内的三个Text组件将按照flexGrow属性的比例在水平方向上排列，并且居中对齐。
4. 总结
ArkTS中的弹性布局（Flex）提供了一种简单而强大的方式来构建响应式布局。通过设置容器的属性和子组件的属性，可以轻松实现复杂的布局需求。
更多关于HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第70天，弹性布局（Flex）。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
