HarmonyOS6 Flex 容器完整使用文档

文章目录一、Flex 容器核心接口1. direction主轴方向2. wrap换行模式3. justifyContent主轴对齐4. alignItems交叉轴对齐二、完整可运行代码三、代码示例功能说明1. 默认 Flex 布局2. direction: Row3. direction: Column4. justifyContent: SpaceBetween5. alignItems: Center6. wrap: Wrap7. 组合布局总结Flex是 HarmonyOS ArkUI 提供的弹性布局容器基于标准 Flex 弹性盒模型设计用于实现子组件的水平/垂直排列、自动换行、对齐、间距分配等布局能力。它是 HarmonyOS 开发中最常用、最灵活、性能最优的布局容器适用于绝大多数线性、流式、自适应页面布局。一、Flex 容器核心接口Flex(options?:{direction?:FlexDirection;// 主轴方向wrap?:FlexWrap;// 换行模式justifyContent?:FlexAlign;// 主轴对齐alignItems?:ItemAlign;// 交叉轴对齐alignContent?:FlexAlign;// 多行内容对齐})1. direction主轴方向FlexDirection.Row默认水平从左到右FlexDirection.Column垂直从上到下2. wrap换行模式FlexWrap.Nowrap默认不换行FlexWrap.Wrap自动换行3. justifyContent主轴对齐FlexAlign.Start起点对齐FlexAlign.Center居中FlexAlign.End终点对齐FlexAlign.SpaceBetween两端对齐FlexAlign.SpaceAround均匀分布4. alignItems交叉轴对齐ItemAlign.Start顶部/左侧对齐ItemAlign.Center居中ItemAlign.End底部/右侧对齐ItemAlign.Stretch拉伸填充二、完整可运行代码EntryComponentstruct FlexFullExample{build(){// 最外层套 Scroll确保页面可滑动Scroll(){Column({space:20}){Text(Flex 容器完整示例可滑动版).fontSize(24).fontWeight(FontWeight.Bold).margin({top:20});// 1. 默认水平排列Text(1. 默认 Flex水平排列).fontSize(16).width(100%);Flex(){Text(1).width(70).height(70).backgroundColor(Color.Red)Text(2).width(70).height(70).backgroundColor(Color.Green)Text(3).width(70).height(70).backgroundColor(Color.Blue)}.width(100%).height(90).backgroundColor(#f5f5f5);// 2. 水平方向 RowText(2. 方向水平 Row).fontSize(16).width(100%);Flex({direction:FlexDirection.Row}){Text(A).width(60).height(60).backgroundColor(Color.Red)Text(B).width(60).height(60).backgroundColor(Color.Green)}.width(100%).height(80).backgroundColor(#f5f5f5);// 3. 垂直方向 ColumnText(3. 方向垂直 Column).fontSize(16).width(100%);Flex({direction:FlexDirection.Column}){Text(A).width(60).height(60).backgroundColor(Color.Red)Text(B).width(60).height(60).backgroundColor(Color.Green)}.width(100%).height(140).backgroundColor(#f5f5f5);// 4. 主轴对齐 SpaceBetweenText(4. 主轴对齐两端对齐).fontSize(16).width(100%);Flex({justifyContent:FlexAlign.SpaceBetween}){Text(1).width(60).height(60).backgroundColor(Color.Red)Text(2).width(60).height(60).backgroundColor(Color.Green)}.width(100%).height(80).backgroundColor(#f5f5f5);// 5. 交叉轴居中Text(5. 交叉轴对齐Center).fontSize(16).width(100%);Flex({alignItems:ItemAlign.Center}){Text(Short).height(40).backgroundColor(Color.Red)Text(Long Text).height(70).backgroundColor(Color.Green)}.width(100%).height(100).backgroundColor(#f5f5f5);// 6. 自动换行Text(6. 自动换行 Wrap).fontSize(16).width(100%);Flex({wrap:FlexWrap.Wrap}){Text(Item1).width(160).height(60).backgroundColor(Color.Red).margin(5)Text(Item2).width(160).height(60).backgroundColor(Color.Green).margin(5)Text(Item3).width(160).height(60).backgroundColor(Color.Blue).margin(5)}.width(100%).backgroundColor(#f5f5f5);// 7. 组合布局Text(7. 组合布局垂直 居中).fontSize(16).width(100%);Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){Text(Box1).width(130).height(50).backgroundColor(Color.Pink).margin(5)Text(Box2).width(130).height(50).backgroundColor(Color.Orange).margin(5)}.width(100%).height(180).backgroundColor(#f5f5f5);// 增加底部间距确保滑动到底Text().margin({bottom:40});}.width(100%).padding(15)}.width(100%).height(100%)}}运行效果如图三、代码示例功能说明1. 默认 Flex 布局默认水平排列子组件依次横向排布。2. direction: Row显式声明水平方向布局。3. direction: Column垂直方向布局子组件从上到下排列。4. justifyContent: SpaceBetween主轴两端对齐子组件间距自动分配。5. alignItems: Center子组件在交叉轴居中对齐。6. wrap: Wrap子组件宽度超出容器宽度时自动换行。7. 组合布局垂直方向 主轴居中 交叉轴居中实现完全居中布局。总结Flex 是弹性布局容器必须包含子组件。支持direction、wrap、justifyContent、alignItems四大核心属性。主轴与交叉轴相互垂直决定布局方向。长页面必须配合 Scroll 实现滑动。无兼容性问题全平台、全版本支持。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力]