一、引言1.1 为什么需要 Flex在前面的文章中我们学习了 Column垂直排列和 Row水平排列。这两个容器可以覆盖大部分布局场景——只要你知道方向是固定的。但现实中的 UI 布局往往更复杂一个典型的 App 页面├── 用户信息头像 文字 → Row 横向├── 标签列表可换行 → 需要 Wrap├── 统计数据横向等分布 → Row SpaceEvenly├── 评论区纵向排列 → Column└── 操作按钮横向排列 → Row关键问题Column 只能垂直Row 只能水平。如果我想横向排列但是会自动换行如果我想在 Column 内部同时放一个横向行和一个换行区域答案是 Flex——一个比 Column/Row 更强大的弹性布局容器。1.2 本文核心内容知识点 说明Flex 容器 比 Column/Row 更灵活的弹性布局容器FlexDirection 4 种主轴方向Row / Column / RowReverse / ColumnReverseFlexWrap 2 种换行模式NoWrap / WrapItemAlign Flex 的交叉轴对齐Start / Center / End / StretchColumn Flex 嵌套 Column 做骨架Flex 做灵活排列混合布局实战 横向 纵向 换行 对齐组合1.3 Column vs Row vs Flex 的关系Column → 固定垂直方向主轴 垂直Row → 固定水平方向主轴 水平Flex → 方向可配置通过 FlexDirection 参数控制Flex({ direction: FlexDirection.Row }) ≈ RowFlex({ direction: FlexDirection.Column }) ≈ ColumnFlex({ direction: …, wrap: Wrap }) → 换行版 Row/Column所以 Column 和 Row 本质上就是 Flex 的 语法糖——它们固定了 direction 参数API 更简洁但灵活性不如 Flex。二、Flex 核心 API 详解2.1 构造器Flex(options?: FlexOptions): FlexAttribute参数 FlexOptions 是一个对象包含所有配置declare interface FlexOptions {direction?: FlexDirection; // 主轴方向默认 Rowwrap?: FlexWrap; // 换行模式默认 NoWrapjustifyContent?: FlexAlign; // 主轴对齐默认 StartalignItems?: ItemAlign; // 交叉轴对齐默认 Start注意是 ItemAlign 不是 HorizontalAlignalignContent?: FlexAlign; // 多行对齐仅 wrap 时有效}2.2 FlexDirection — 主轴方向4 种枚举值 主轴方向 表现FlexDirection.Row 水平 → 子元素从左到右排列同 RowFlexDirection.Column 垂直 ↓ 子元素从上到下排列同 ColumnFlexDirection.RowReverse 水平 ← 子元素从右到左排列FlexDirection.ColumnReverse 垂直 ↑ 子元素从下到上排列2.3 FlexWrap — 换行模式2 种枚举值 表现FlexWrap.NoWrap 不换行子元素在一行/一列内排列超出部分被截断或溢出FlexWrap.Wrap 自动换行子元素超出容器宽度时自动换到下一行Wrap 是 Flex 相比于 Row/Column 最重要的增强功能。 当你不确定有多少个子元素、每个多宽时Wrap 可以自动处理换行。2.4 ItemAlign — 交叉轴对齐注意与 Column/Row 的区别在 Flex 中交叉轴对齐使用 ItemAlign 枚举而非 HorizontalAlign 或 VerticalAlignItemAlign 值 效果ItemAlign.Start 起点对齐ItemAlign.Center 居中对齐ItemAlign.End 终点对齐ItemAlign.Stretch 拉伸填满默认值Column/Row 中无此选项与 Column/Row 的对照容器 交叉轴对齐属性 枚举类型Column .alignItems(HorizontalAlign) HorizontalAlignRow .alignItems(VerticalAlign) VerticalAlignFlex alignItems: ItemAlign ItemAlign2.5 Flex 的双坐标系主轴方向 FlexDirection若 direction Row:主轴 → 水平方向左→右交叉轴 → 垂直方向justifyContent → 水平分布alignItems → 垂直对齐若 direction Column:主轴 → 垂直方向上→下交叉轴 → 水平方向justifyContent → 垂直分布alignItems → 水平对齐参数 Row 时 Column 时主轴 水平 垂直交叉轴 垂直 水平justifyContent 控制 水平分布 垂直分布alignItems 控制 垂直对齐 水平对齐三、Demo 代码逐层剖析3.1 项目结构与路由{“src”: [“pages/ColumnFlexDemo”]}ColumnFlexDemo.ets 共 567 行结构如下ColumnFlexDemo.ets (567行)├── Component ColumnFlexDemo│ ├── State 变量6个 ← direction / wrap / justify / align / itemCount / section│ ├── 常量数组5组 ← directionLabels / wrapLabels / justifyLabels / alignLabels / colors│ ├── build()│ │ ├── 标题区│ │ ├── 选项卡栏4个tab ← 切换演示区块│ │ ├── 主演示区 (Column外骨架)│ │ │ ├── 状态文字│ │ │ ├── if(section 0) → sectionMixedLayout()│ │ │ ├── if(section 1) → sectionWrapLayout()│ │ │ ├── if(section 2) → sectionAlignmentLayout()│ │ │ └── if(section 3) → sectionCustomCardLayout()│ │ └── 控制面板 (ScrollColumn)│ │ ├── FlexDirection 按钮组│ │ ├── FlexWrap 按钮组│ │ ├── justifyContent 按钮组6个│ │ ├── alignItems 按钮组4个│ │ └── 子元素数量 /- 控制│ ├── Builder 方法6个│ │ ├── sectionMixedLayout() ← 横纵混合│ │ ├── sectionWrapLayout() ← 流式换行│ │ ├── sectionAlignmentLayout() ← 对齐组合│ │ ├── sectionCustomCardLayout() ← 真实场景│ │ ├── flexItem / flexItemWithSize / tagItem / statItem│ │ └── controlGroup()│ └── 私有方法│ ├── getItems() / getItemWidth() / getItemHeight()│ ├── getStatusText()│ └── isSelected()3.2 六个 State 变量的设计State private currentDirection: FlexDirection FlexDirection.Row;State private currentWrap: FlexWrap FlexWrap.NoWrap;State private currentJustify: FlexAlign FlexAlign.Start;State private currentAlign: ItemAlign ItemAlign.Center;State private itemCount: number 4;State private demoSection: number 0;这六个变量分为两组分组 变量 控制对象Flex 配置 direction, wrap, justify, align 传递给 FlexOptions 对象UI 控制 itemCount, demoSection 子元素数量、演示区切换每次用户点击控制面板中的按钮对应的 State 变量更新 → Flex 组件的 FlexOptions 变化 → 子元素重新排列。3.3 选项卡式演示切换Row() {ForEach(this.sectionTitles, (title: string, idx: number) {Text(title).fontColor(this.demoSection idx ? ‘#00B4D8’ : Color.Gray).backgroundColor(this.demoSection idx ? ‘#ffffff15’ : ‘transparent’).gesture(TapGesture().onAction(() {this.demoSection idx;if (idx 1) { this.currentWrap FlexWrap.Wrap; this.itemCount 8; }else if (idx 0) { this.currentDirection FlexDirection.Row; this.currentWrap FlexWrap.NoWrap; this.itemCount 4; }}))})}四个选项卡分别对应索引 标题 焦点0 横向排列 纵向排列混合 FlexDirection 切换1 流式换行 (FlexWrap) FlexWrap.Wrap 效果2 主轴对齐 交叉轴对齐 justifyContent alignItems 组合3 自定义混合布局卡片 真实 UI 场景3.4 状态文字栏Text(this.getStatusText()).fontSize(12).fontColor(‘#00B4D8’)实时显示四个 Flex 参数的当前值direction: FlexDirection.Row | wrap: NoWrap | justifyContent: Center | alignItems: Center3.5 区块 1横向 纵向混合排列这是 Column Flex 的核心演示——Column 做骨架内部嵌套不同方向的 Flex// Column 外骨架 Column() {// — 第 1 行Flex(Row) 横向排列 —Text(‘Flex(Row) 横向排列’)Flex({ direction: FlexDirection.Row, /* … */ }) {// 子元素横向排列#1 #2 #3 #4ForEach(this.getItems(), (item) this.flexItem(item, 40))}Divider() // 分割线// — 第 2 行Flex(Column) 纵向排列 —Text(‘Flex(Column) 纵向排列’)Flex({ direction: FlexDirection.Column, /* … */ }) {// 子元素纵向排列#1 #2 #3 #4 从上到下ForEach(this.getItems(), (item) this.flexItem(item, 30))}}关键洞察Column 外骨架将页面从上到下划分为横向区域→分割线→纵向区域。而每个区域内部的 Flex 又可以独立设置 direction/justifyContent/alignItems。控制面板中的参数变化会同时影响这两个 Flex 区域——因为它们共享同一个 currentJustify 和 currentAlign。3.6 区块 2流式换行 (FlexWrap)Flex({direction: FlexDirection.Row,wrap: FlexWrap.Wrap, // ← 关键开启换行justifyContent: this.currentJustify,alignItems: this.currentAlign}) {ForEach(this.getItems(), (item) {this.flexItemWithSize(item, this.getItemWidth(item), 28)// 每个子元素宽度不同[60, 80, 50, 70, 90, 55, 75, 65, 85, 50]})}换行布局的视觉特点8 个子元素宽度各不相同┌──────┬────────┬──────┬────────┐│ #1 │ #2 │ #3 │ #4 │ ← 第一行│ 60px │ 80px │ 50px │ 70px │├──────┼────────┼──────┼────────┤│ #5 │ #6 │ #7 │ #8 │ ← 自动换行到第二行│ 90px │ 55px │ 75px │ 65px │└──────┴────────┴──────┴────────┘切换 justifyContent 时每行内部的分布会变化Start → 左对齐Center → 居中SpaceBetween → 每行两端对齐3.7 区块 3主轴与交叉轴对齐组合Flex({direction: this.currentDirection, // 动态切换方向wrap: this.currentWrap,justifyContent: this.currentJustify, // 主轴对齐alignItems: this.currentAlign // 交叉轴对齐使用 ItemAlign}) {ForEach(this.getItems(), (item) {this.flexItemWithSize(item, 50, this.getItemHeight(item))// 高度各不相同[30, 46, 22, 38, 50, 28, 42, 34, 44, 26]})}为什么子元素要设置不同高度——为了让 alignItems 的对齐效果可见。direction: Row 不同高度 → alignItems 控制垂直对齐direction: Column 不同宽度 → alignItems 控制水平对齐四种 ItemAlign 的可视化效果direction: Row 时ItemAlign.Start → ItemAlign.Center → ItemAlign.End →┌──────────┐ ┌──────────┐ ┌──────────┐│ ┌──┐ │ │ │ │ ││ │#1│ │ │ ┌──┐ │ │ ││ ├──┤ │ │ │#1│ │ │ ┌──┐ ││ │#2│ │ │ ├──┤ │ │ │#1│ ││ └──┘ │ │ │#2│ │ │ ├──┤ │└──────────┘ │ └──┘ │ │ │#2│ │└──────────┘ └──────────┘3.8 区块 4真实场景混合布局这个区块模拟了一个典型的 App 个人资料页面┌────────────────────────┐│ 用户信息卡片 ││ ┌──────── ──────────┐ │ ← Flex(Row)│ │ ‍ 张三 │ │ 头像 文字横向│ │ 高级工程师 │ ││ └──────── ──────────┘ │├────────────────────────┤│ ️ 技能标签 ││ [ArkTS] [HarmonyOS] │ │ ← Flex(Row, Wrap)│ [ArkUI] [TypeScript] │ │ 标签流式换行│ [DevEco] [OpenHarmony]│├────────────────────────┤│ 统计数据 ││ 12 256 1.2k Top│ │ ← Flex(Row, SpaceEvenly)│ 项目 Star 贡献 排名│└────────────────────────┘三层混合布局的实现// 外骨架 ColumnColumn() {// 第一层Flex Row头像 文字Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {Text(‘‍’) // 头像Column() { // 文字区域内部又是 ColumnText(‘张三’)Text(‘高级工程师 · 鸿蒙团队’)}}Divider()// 第二层Flex Row Wrap标签流式Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {this.tagItem(‘ArkTS’, ‘#4A90D9’)this.tagItem(‘HarmonyOS’, ‘#FF6B35’)// …}// 第三层Flex Row SpaceEvenly统计数据Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceEvenly }) {this.statItem(‘项目’, ‘12’)this.statItem(‘Star’, ‘256’)// …}}这个区块展示了 flex 的五种不同用法层 Flex 配置 用途用户信息 Row, Center 横向排列 垂直居中文字区域 Column内嵌 纵向排列姓名和职位技能标签 Row, Wrap, Center 流式换行统计 Row, SpaceEvenly 水平等分整体 Column外骨架 纵向分块3.9 控制面板设计控制面板位于屏幕下半部分放在 Scroll 中内容较多时可滚动查看┌─────────────────────────────────┐│ FlexDirection主轴方向 ││ [Row] [Column] [RowRev] [ColRev] │├─────────────────────────────────┤│ FlexWrap换行模式 ││ [NoWrap] [Wrap] │├─────────────────────────────────┤│ justifyContent主轴对齐 ││ [Start] [Center] [End] [Btwn] …│├─────────────────────────────────┤│ alignItems交叉轴对齐 ││ [Start] [Center] [End] [Stretch]│├─────────────────────────────────┤│ 子元素数 [-] 4 [] 多子元素观察…│└─────────────────────────────────┘所有的控制按钮都使用 Builder 模式生成减少重复代码BuildercontrolGroup(title: string, labels: string[], currentValue, onChange) {Column() {Text(title)Row() {ForEach(labels, (label, idx) {Button(label).backgroundColor(isSelected ? activeColor : ‘#333’).gesture(TapGesture().onAction(() onChange(idx)))})}}}四、FlexDirection 四种方向的可视化对比4.1 Row默认Flex({ direction: FlexDirection.Row })主轴→ 水平┌──────────────────────────────┐│ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ││ │#1│ │#2│ │#3│ │#4│ ││ └──┘ └──┘ └──┘ └──┘ ││ justifyContent → 水平分布 ││ alignItems → 垂直对齐 │└──────────────────────────────┘相当于 Row()Row 就是 Flex(Row) 的语法糖。4.2 ColumnFlex({ direction: FlexDirection.Column })主轴↓ 垂直┌──────────┐│ ┌──┐ ││ │#1│ ││ ├──┤ ││ │#2│ ││ ├──┤ ││ │#3│ ││ ├──┤ ││ │#4│ ││ └──┘ │└──────────┘相当于 Column()。4.3 RowReverseFlex({ direction: FlexDirection.RowReverse })主轴← 水平反向┌──────────────────────────────┐│ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ││ │#4│ │#3│ │#2│ │#1│ ││ └──┘ └──┘ └──┘ └──┘ │└──────────────────────────────┘4.4 ColumnReverseFlex({ direction: FlexDirection.ColumnReverse })主轴↑ 垂直反向┌──────────┐│ ┌──┐ ││ │#4│ ││ ├──┤ ││ │#3│ ││ ├──┤ ││ │#2│ ││ ├──┤ ││ │#1│ ││ └──┘ │└──────────┘五、FlexWrap 的可视化对比5.1 NoWrap不换行Flex({ direction: Row, wrap: NoWrap, 8 items })所有子元素挤在一行┌──────────────────────────────────────┐│ #1 #2 #3 #4 #5 #6 #7 #8 ││ ← 超出部分被截断或压缩 → │└──────────────────────────────────────┘5.2 Wrap自动换行Flex({ direction: Row, wrap: Wrap, 8 items })子元素自动换到下一行┌──────────────────────────────────┐│ #1 #2 #3 #4 │ ← 第一行├──────────────────────────────────┤│ #5 #6 #7 #8 │ ← 自动换行到第二行└──────────────────────────────────┘Wrap 不同宽度的效果更明显每个标签长度不同换行位置随机。六、常见问题与坑点6.1 Flex 与 Column/Row 的选择场景 推荐只需要纵向排列 Column()更简洁只需要横向排列 Row()更简洁需要换行 Flex({ wrap: Wrap })需要动态切换方向 Flex({ direction: … })需要 Stretch 对齐 Flex({ alignItems: Stretch })需要交叉轴对齐参数动态变化 Flex()最佳实践能用 Column/Row 的时候就用它们需要额外功能时升级到 Flex。6.2 Flex 的 alignItems 默认值是 Stretch// ❌ 子元素没有设置高度 → 被拉伸填满Flex({ direction: FlexDirection.Row }) {Text(‘A’) // 如果没设高度会被拉伸到 Flex 容器高度}// ↑ alignItems 默认 ItemAlign.Stretch// ✅ 明确设置子元素高度Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {Text(‘A’).height(30)}经验大多数时候你会希望设置 alignItems: ItemAlign.Center让子元素在交叉轴居中对齐而不是被拉伸。6.3 嵌套 Flex 时的 justifyContent 继承// ❌ 外部 Flex 的 justifyContent 不影响内部的 ColumnFlex({ direction: Row, justifyContent: Center }) {Column() { // Column 有自己的排列规则Text(‘A’)Text(‘B’)}}// SpaceBetween 会把 Column 推向两边但 Column 内部的 A 和 B// 仍然按 Column 的默认规则排列// ✅ 各层各自控制Flex({ direction: Row, justifyContent: SpaceBetween }) {Column() { Text(‘A’); Text(‘B’) }.alignItems(HorizontalAlign.Center) // Column 内部居中对齐}6.4 FlexWrap 不生效// ❌ wrap 不生效因为没有设置 Flex 容器宽度Flex({ direction: Row, wrap: Wrap }) {// 10 items}// Flex 默认宽度由内容撑满不需要换行// ✅ 设置宽度后超出部分才会换行Flex({ direction: Row, wrap: Wrap }) {// 10 items}.width(‘100%’) // ← 关键固定宽度Wrap 生效条件Flex 容器必须有明确的宽度或父容器有限宽子元素总宽度 容器宽度时才会换行。6.5 Column 和 Flex(Column) 的 alignItems 类型不同这是一个容易混淆的点容器 alignItems 类型 示例Column() HorizontalAlign .alignItems(HorizontalAlign.Center)Flex({ direction: Column }) ItemAlign { alignItems: ItemAlign.Center }两种写法效果类似但类型不同不能混用。七、最佳实践清单7.1 布局选择策略UI 布局需求├── 只有垂直排列 → Column├── 只有水平排列 → Row├── 需要换行 → Flex Wrap├── 需要动态切换方向 → Flex├── 需要 Stretch → Flex ItemAlign.Stretch├── 需要混合方向 → Column 内部 Flex(Row/Wrap)└── 需要嵌套结构 → Column 外骨架 Flex 内部排列7.2 Column Flex 的标准混合模板Column() {// 区块 1横向排列Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {// 横向内容}.width(‘100%’)// 区块 2换行排列Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {// 流式内容}.width(‘100%’)// 区块 3纵向排列Flex({ direction: FlexDirection.Column }) {// 纵向内容}}.width(‘100%’).height(‘100%’)7.3 参数常量化// layoutConfig.etsexport const FLEX_ROW_CENTER {direction: FlexDirection.Row,justifyContent: FlexAlign.Center,alignItems: ItemAlign.Center} as const;export const FLEX_WRAP_TAGS {direction: FlexDirection.Row,wrap: FlexWrap.Wrap,alignItems: ItemAlign.Center} as const;export const FLEX_COLUMN {direction: FlexDirection.Column} as const;7.4 动态 FlexDirection 实现方向切换State private isHorizontal: boolean true;build() {Flex({direction: this.isHorizontal ? FlexDirection.Row : FlexDirection.Column,alignItems: ItemAlign.Center}) {// 子元素可以横向也可以纵向}}7.5 配合 layoutWeight 实现弹性比例Flex({ direction: FlexDirection.Row }) {Text(‘左’).layoutWeight(1)Text(‘中’).layoutWeight(2) // 宽度是左侧的 2 倍Text(‘右’).layoutWeight(1)}.width(‘100%’)八、与其他框架的 Flex 对比概念 ArkUI (Flex) CSS Flexbox SwiftUI (HStack/VStack)弹性容器 Flex({}) display: flex HStack / VStack主轴方向 direction: Row/Column flex-direction: row/column 容器自动决定换行 wrap: Wrap/NoWrap flex-wrap: wrap LazyVGrid 实现主轴对齐 justifyContent justify-content spacing 参数交叉轴对齐 alignItems: ItemAlign align-items alignment 参数Stretch ✅ ItemAlign.Stretch ✅ stretch ❌ 需 frame 配合反向排列 ✅ RowReverse/ColumnReverse ✅ row-reverse/column-reverse ❌ 需自定义核心差异ArkUI 通过 FlexOptions 对象统一配置所有参数CSS Flexbox 使用独立的属性声明SwiftUI 使用不同的容器构造函数。九、结语9.1 核心回顾Column 是骨架Flex 是关节。一个横纵混合的布局 Column 外骨架 内部多个不同方向的 FlexColumn纵向分块├── Flex(Row) ← 横向排列├── Flex(Row, Wrap) ← 流式换行└── Flex(Column) ← 纵向排列9.2 从 Column 到 Flex 的认知升级Column固定垂直→ Row固定水平↓Flex可配置方向 可换行 可伸缩↓FlexOptions方向/换行/主轴对齐/交叉轴对齐 统一配置↓Column Flex 嵌套混合方向布局9.3 下一步探索Grid 网格布局二维布局适合相册/商品展示RelativeContainer 相对布局通过锚点定位子元素Stack 层叠布局层叠覆盖适合悬浮元素Flex 的 space 属性FlexSpaceOptions 控制主轴/交叉轴的间距自适应布局结合 State 和 FlexDirection 实现横竖屏自适应切换附录 A完整 Demo 代码/*ColumnFlexDemo.ets —— Column Flex 弹性布局混合方向排列 核心技术 Column() —— 外层垂直容器整体页面骨架Flex() —— 弹性容器支持 direction/wrap/justifyContent/alignItemsFlexDirection —— 主轴方向Row / Column / RowReverse / ColumnReverse 混合布局要点 Column 负责整体纵向布局类似页面骨架Flex 内部可以横向 (Row)、纵向 (Column)、换行 (Wrap)通过 Column 嵌套不同方向的 Flex实现横纵混合排列使用 FlexOptions 统一配置 direction/wrap/justifyContent/alignItems相比 Row/Column 固定方向Flex 可通过参数动态切换方向*/EntryComponentstruct ColumnFlexDemo {State private currentDirection: FlexDirection FlexDirection.Row;State private currentWrap: FlexWrap FlexWrap.NoWrap;State private currentJustify: FlexAlign FlexAlign.Start;State private currentAlign: ItemAlign ItemAlign.Center;State private itemCount: number 4;State private demoSection: number 0;private readonly sectionTitles: string[] [‘横向纵向混合’, ‘流式换行’, ‘对齐组合’, ‘真实卡片’];build() {Column() {Text(‘Column Flex 弹性混合布局’).fontSize(20).fontWeight(FontWeight.Bold).fontColor(Color.White).textAlign(TextAlign.Center).width(‘100%’).padding({ top: 12, bottom: 2 })Text(‘Column 纵向骨架 Flex 灵活排列’).fontSize(12).fontColor(Color.Gray).textAlign(TextAlign.Center).width(‘100%’).padding({ bottom: 4 })// 选项卡 Row() { ForEach(this.sectionTitles, (title, idx) { Text(title).fontSize(10) .fontColor(this.demoSection idx ? #00B4D8 : Color.Gray) .fontWeight(this.demoSection idx ? FontWeight.Bold : FontWeight.Normal) .layoutWeight(1).textAlign(TextAlign.Center) .padding({ top: 4, bottom: 4 }) .backgroundColor(this.demoSection idx ? #ffffff15 : transparent) .borderRadius(4) .gesture(TapGesture().onAction(() { this.demoSection idx; })) }) }.width(100%).padding({ left: 8, right: 8, bottom: 4 }) // 主演示区 Column() { Text(this.getStatusText()).fontSize(12).fontColor(#00B4D8) .width(100%).textAlign(TextAlign.Center) .padding({ top: 4, bottom: 4 }).backgroundColor(#ffffff08).borderRadius(6) // 四个演示区块 if (this.demoSection 0) { this.sectionMixedLayout() } else if (this.demoSection 1) { this.sectionWrapLayout() } else if (this.demoSection 2) { this.sectionAlignmentLayout() } else { this.sectionCustomCardLayout() } }.width(100%).layoutWeight(1).padding(8) .backgroundColor(#0d1b3e).borderRadius(10).margin({ left: 10, right: 10 }) // 控制面板可滚动 Scroll() { Column() { this.controlGroup(FlexDirection, [Row,Column,RowRev,ColRev], this.currentDirection, (idx) { this.currentDirection [Row,Column,RowReverse,ColumnReverse][idx]; }) Divider().height(1).color(#ffffff11).margin({ top: 4, bottom: 4 }) this.controlGroup(FlexWrap, [NoWrap,Wrap], this.currentWrap, (idx) { this.currentWrap [NoWrap,Wrap][idx]; }) Divider().height(1).color(#ffffff11).margin({ top: 4, bottom: 4 }) // justifyContent alignItems 按钮组... }.width(100%).padding({ left: 10, right: 10, top: 6, bottom: 6 }) }.height(180).width(100%).backgroundColor(#1a1a3e) .borderRadius({ topLeft: 10, topRight: 10 }).margin({ left: 10, right: 10, top: 4 }) }.width(100%).height(100%).backgroundColor(#0f3460)}// — 四个 Builder 区块详见附录完整源码—Builder sectionMixedLayout() { /* Column Flex(Row) Flex(Column)/ }Builder sectionWrapLayout() { /Flex(Row, Wrap)/ }Builder sectionAlignmentLayout() { /justifyContent alignItems 组合/ }Builder sectionCustomCardLayout() { /用户信息 标签 统计 */ }Builder controlGroup(title, labels, currentValue, onChange) { /* 按钮组模板/ }Builder flexItem(index, size) { /方形子元素/ }Builder flexItemWithSize(index, w, h) { /可变尺寸子元素/ }Builder tagItem(label, color) { /标签/ }Builder statItem(label, value) { /统计数据项 */ }private getItems(): number[] { /* 生成数组/ }private getItemWidth(index): number { /不同宽度/ }private getItemHeight(index): number { /不同高度/ }private getStatusText(): string { /状态文字 */ }}附录 B参考资料HarmonyOS NEXT 开发者文档 — Flex 容器HarmonyOS NEXT 开发者文档 — FlexDirectionHarmonyOS NEXT 开发者文档 — ItemAlignHarmonyOS NEXT 开发者文档 — FlexWrap版权声明本文为 HarmonyOS NEXT 技术分享系列的第六篇遵循 CC BY-NC 4.0 协议。欢迎转载但请注明出处。系列文章第一篇TapGesture 点击手势布局第二篇PanGesture 拖拽手势布局第三篇GestureGroup 组合手势布局第四篇Column 垂直排列入门第五篇Column Scroll 可滚动列表第六篇Column Flex 弹性混合布局本文