【共创季稿事节】鸿蒙原生ArkTS布局方式之Flex+flexGrow弹性增长布局

鸿蒙原生ArkTS布局方式之Flex+flexGrow弹性增长布局

一、引言：为什么需要弹性增长布局？

在鸿蒙原生应用开发中，布局是构建用户界面的基石。随着设备形态的多样化——从折叠屏到平板，从手表到车机——应用界面需要能够自适应不同屏幕尺寸，而弹性增长布局正是解决这一问题的核心技术之一。

传统的绝对定位布局（如Stack配合position）虽然精准，但在多尺寸设备上维护成本极高。相对布局（如RelativeContainer）虽然能描述元素间的相对位置，但当容器尺寸动态变化时，子元素的尺寸调整仍需要额外计算。Flex布局结合flexGrow属性，提供了一种优雅的解决方案：子组件只需声明自己的「增长意愿」（flexGrow权重），框架自动完成剩余空间的分配，无需手动计算像素值。

本文从零剖析鸿蒙ArkTS中Flex+flexGrow的弹性增长机制，结合完整可运行示例，助你透彻理解并灵活运用。

二、Flex布局基础回顾

2.1 什么是Flex布局

Flex（Flexible Box，弹性盒子）是一种一维布局模型。它的核心思想是：在一个主轴方向上排列子组件，并允许子组件按比例「弹性」地填充容器中的剩余空间。鸿蒙ArkTS中的Flex组件继承自CSS Flexbox的设计理念，同时针对移动端特性进行了优化。

2.2 Flex的基本属性

在ArkTS中，Flex组件通过构造参数配置布局方向和对齐方式：

2.3 子组件的弹性属性

Flex容器的直接子组件可以设置以下弹性相关属性：

其中，flexGrow是实现弹性增长布局的核心属性，也是本文的重点。

三、flexGrow弹性增长机制深度解析

3.1 核心概念：剩余空间

要理解flexGrow，首先需要理解「剩余空间」（Remaining Space）的概念。

剩余空间 = Flex容器主轴尺寸 - 所有子组件主轴尺寸之和

这里的「子组件主轴尺寸」是指子组件在主轴方向上的固有尺寸：

• 水平方向（FlexDirection.Row）：固有尺寸 = 子组件的width（或flexBasis）
• 垂直方向（FlexDirection.Column）：固有尺寸 = 子组件的height（或flexBasis）

如果一个子组件没有设置width或height，且没有设置flexBasis，那么它的固有尺寸为0。

3.2 flexGrow的分配公式

当Flex容器在主轴上有多余空间时，所有设置了flexGrow > 0的子组件会按照权重分配这些剩余空间。分配公式如下：

子组件最终尺寸 = 该子组件的固有尺寸 + 剩余空间 × (该子组件的flexGrow值 ÷ 所有flexGrow之和)

举一个具体的例子：假设一个宽度为360vp的Flex容器（方向为Row），内部有三个Column子组件，均未设置width（固有尺寸为0），它们的flexGrow分别设置为1、2、3：

剩余空间 = 360 - 0 - 0 - 0 = 360vp flexGrow之和 = 1 + 2 + 3 = 6 子组件A最终宽度 = 0 + 360 × (1 ÷ 6) = 60vp 子组件B最终宽度 = 0 + 360 × (2 ÷ 6) = 120vp 子组件C最终宽度 = 0 + 360 × (3 ÷ 6) = 180vp

三个子组件的宽度比为1 : 2 : 3，完美体现了弹性增长的比例关系。

3.3 固有尺寸与flexGrow的叠加

更加灵活的是，子组件可以同时设置固有尺寸和flexGrow。此时，每个子组件先占据自己的固有尺寸，剩余的空间再按flexGrow比例分配。这意味着你可以设计「部分固定、部分弹性」的布局——比如一个导航栏，左侧Logo固定80vp，右侧菜单项弹性填充剩余空间。

3.4 flexGrow与flexShrink的对比

两者可以协同工作：flexGrow处理空间富余的情况，flexShrink处理空间不足的情况。

四、Flex + flexGrow的三种典型场景

下面通过三个可运行的示例，完整演示Flex + flexGrow的布局效果。所有代码均使用鸿蒙ArkTS（HarmonyOS NEXT）编写，可直接在DevEco Studio中运行。

4.1 场景一：横向弹性增长（水平等比分配）

需求：三个色块按1:2:3的比例水平填充整个容器宽度。

核心代码：

Flex({direction:FlexDirection.Row,alignItems:FlexAlign.Center}){// 色块A：flexGrow = 1Column(){Text('flexGrow = 1').fontColor(Color.White).fontSize(14);}.height(80).backgroundColor('#FF6B6B').borderRadius(8).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).flexGrow(1)// ★ 关键点.margin(4)// 色块B：flexGrow = 2Column(){Text('flexGrow = 2').fontColor(Color.White).fontSize(14);}.height(80).backgroundColor('#4ECDC4').borderRadius(8).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).flexGrow(2)// ★ 关键点.margin(4)// 色块C：flexGrow = 3Column(){Text('flexGrow = 3').fontColor(Color.White).fontSize(14);}.height(80).backgroundColor('#FFE66D').borderRadius(8).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).flexGrow(3)// ★ 关键点.margin(4)}.width('100%').height(100)

运行效果：三个色块的宽度比为1:2:3，总和填满Flex容器的宽度。无论如何调整容器宽度，比例始终保持不变。

要点：三个色块均未设置width，固有尺寸为0，最终宽度完全由flexGrow决定。总flexGrow = 6，每个色块分别占据剩余空间的1/6、2/6、3/6。

4.2 场景二：纵向弹性增长（垂直等比分配）

需求：三个色块按1:1:2的比例垂直填充整个容器高度。

核心代码：

Flex({direction:FlexDirection.Column}){Column(){Text('flexGrow = 1').fontColor(Color.White).fontSize(16);}.backgroundColor('#845EC2').borderRadius(8).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).flexGrow(1).margin(4)Column(){Text('flexGrow = 1').fontColor(Color.White).fontSize(16);}.backgroundColor('#008B74').borderRadius(8).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).flexGrow(1).margin(4)Column(){Text('flexGrow = 2').fontColor(Color.White).fontSize(16);}.backgroundColor('#FF9671').borderRadius(8).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).flexGrow(2).margin(4)}.width('100%').height(260)

运行效果：三个色块的高度比为1:1:2，总和填满Flex容器的高度。紫色和翠绿各占1/4，暖橙色占2/4（即1/2）。

与场景一的区别：direction从Row变为Column，主轴变为垂直方向。不需要显式设置alignItems（默认即Stretch），子项自动横向填满。

4.3 场景三：混合布局（固定 + 弹性 + 固定）

需求：模拟一个列表项，左侧圆形头像固定40vp，中间文本区域弹性增长，右侧按钮固定80vp。这是移动端最常见的「左固定-中弹性-右固定」模式。

核心代码：

Flex({direction:FlexDirection.Row,alignItems:FlexAlign.Center}){// 左侧固定：头像图标（固定宽度 40vp）Circle().width(40).height(40).fill('#3178F6').margin({right:12})// 中间弹性：文本内容（flexGrow=1 填充剩余空间）Column(){Text('弹性增长的标题区域').fontSize(15).fontWeight(FontWeight.Medium).fontColor('#222222').maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis})Text('副文本描述，宽度自动适配，窗口变化时随之伸缩').fontSize(12).fontColor('#999999').maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis})}.flexGrow(1)// ★ 关键点：中间区域弹性增长.alignItems(HorizontalAlign.Start)// 右侧固定：操作按钮（固定宽度 80vp）Text('查看').fontSize(14).fontColor('#3178F6').width(80).height(36).lineHeight(36).textAlign(TextAlign.Center).borderRadius(6).backgroundColor('#EBF2FF').margin({left:8})}.width('100%').height(68)

运行效果：无论屏幕宽度如何变化，左侧头像和右侧按钮始终保持固定尺寸，中间的文本区域自动填充所有剩余宽度。当窗口变窄时，文本会在末尾显示省略号（TextOverflow.Ellipsis）。

这种模式的泛化能力：

• 可以调整为「固定 + 弹性 + 固定 + 弹性」的多段弹性布局
• 弹性部分可以有多个不同的flexGrow权重
• 固定部分可以是任意组件，不限于头像和按钮

五、flexGrow与layoutWeight的对比

在鸿蒙ArkTS中，除了Flex容器的flexGrow属性外，Row和Column容器也提供了类似功能：.layoutWeight()方法。

5.1 layoutWeight简介

.layoutWeight()是Row和Column容器子组件的一个方法，表示子组件在主轴方向上所占的权重比例。它和flexGrow在功能上非常相似。

Row(){Column().layoutWeight(1).backgroundColor('#FF6B6B')Column().layoutWeight(2).backgroundColor('#4ECDC4')Column().layoutWeight(3).backgroundColor('#FFE66D')}

5.2 两者的核心区别

关键差异：对于flexGrow，分配的是剩余空间（子项宽度 = 固有宽度 + 剩余空间 × (flexGrow/总flexGrow)）。对于layoutWeight，分配的是容器总空间（子项宽度 = 容器总宽度 × (layoutWeight/总layoutWeight)），忽略子项固有尺寸。

5.3 选型建议

• 纯比例分割场景（如三等分一个Row）：layoutWeight更简洁
• 「固定+弹性+固定」模式：flexGrow是唯一选择
• 需要处理空间不足时的收缩行为（flexShrink）：必须使用Flex+flexGrow
• 布局涉及换行（flexWrap）：必须使用Flex容器

六、实战：构建一个完整的应用首页

下面综合运用所学知识，构建一个典型的「应用首页」，展示Flex + flexGrow的综合应用。

6.1 页面结构

Column (全屏) ├── 顶部导航栏 (Flex Row) │ ├── 返回按钮 (固定40vp) │ ├── 标题文本 (flexGrow=1 弹性居中) │ └── 更多按钮 (固定40vp) ├── 内容区域 (flexGrow=1) │ ├── 轮播图 (固定高度) │ ├── 功能图标区 (Flex换行) │ └── 推荐列表 └── 底部Tab栏 (Flex Row, 每个Tab flexGrow=1)

6.2 关键代码片段

导航栏：flexGrow让标题在左右固定按钮之间弹性居中。

Flex({direction:FlexDirection.Row,alignItems:FlexAlign.Center}){Image($r('app.media.ic_back')).width(40).height(40)Text('页面标题').fontSize(18).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center).flexGrow(1)Image($r('app.media.ic_more')).width(40).height(40)}.width('100%').height(56)

底部Tab栏：四个Tab使用flexGrow(1)实现等宽分配。

Flex({direction:FlexDirection.Row}){ForEach(this.tabList,(tab:TabItem)=>{Column(){Image(tab.icon).width(24).height(24)Text(tab.label).fontSize(12)}.flexGrow(1)// 等分宽度.alignItems(HorizontalAlign.Center)})}.width('100%').height(60)

6.3 多屏适配效果

使用Flex + flexGrow构建的页面天然具备自适应能力：

• 手机竖屏：内容区弹性填充，Tab栏固定底部
• 手机横屏：左右留白自动处理，内容区居中
• 折叠屏展开：内容区自动变宽，文本区域随flexGrow扩展
• 平板：整体布局和谐放大，比例保持不变

七、最佳实践与常见陷阱

7.1 性能建议

1. 避免过深嵌套：Flex层级建议控制在3层以内
2. 避免频繁的flexGrow动态变更：@State变量频繁改变flexGrow会触发布局重排
3. ForEach配合flexGrow时注意keyGenerator参数：提供稳定的唯一key，避免组件不必要重建

7.2 Do’s and Don’ts

✅ 推荐做法：

• 使用flexGrow实现「固定+弹性+固定」经典布局
• 使用flexGrow让列表项中的文本区域自适应
• 让Tab栏等分父容器宽度时使用flexGrow
• 结合TextOverflow.Ellipsis处理文本溢出

❌ 避免做法：

• 不要对需要保持固定尺寸的组件设置flexGrow
• 不要在同一个Flex容器中混合使用flexGrow和layoutWeight
• 注意alignItems默认值为Stretch，如需保持子组件自身尺寸需显式设置

7.3 常见陷阱

八、与其他布局方式的对比

8.1 对比一览

8.2 选型决策树

需要子组件在一条轴线上排列？ ├── 是 → 需要子组件自动分配剩余空间？ │ ├── 是 → ✅ Flex + flexGrow │ └── 否 → Row / Column（定宽/定高排列） └── 否 → 需要子组件相对定位？ ├── 是 → RelativeContainer └── 否 → Stack（层叠布局）

十、总结

10.1 核心要点

Flex + flexGrow布局的核心可以概括为三点：

1. 理解剩余空间：剩余空间是布局弹性的基础，所有分配都基于它计算。
2. 掌握分配公式：最终尺寸 = 固有尺寸 + 剩余空间 × (flexGrow ÷ 总flexGrow)。
3. 区分三种模式：纯弹性（固有尺寸为0）、混合弹性（固定+弹性）、等分弹性（flexGrow全为1）。

10.2 高性价比应用场景

• 导航栏：标题居中、两侧按钮固定
• 列表项：头像固定 + 文本弹性 + 操作按钮固定
• Tab栏：等分底部导航
• 表单行：标签固定 + 输入框弹性
• 卡片布局：图标固定 + 描述文本弹性

10.3 延伸学习方向

掌握flexGrow后，可以进一步探索：

• flexShrink：处理空间不足时的压缩行为
• flexBasis：精细控制子组件的初始尺寸
• flexWrap：多行弹性布局的换行处理
• alignSelf：子组件在交叉轴上的独立对齐方式

这些属性组合在一起，构成了鸿蒙ArkTS中完整的Flex弹性布局体系。掌握它们，你将能够应对绝大多数自适应布局需求，构建出真正「一次开发，多端适配」的鸿蒙原生应用。

附录：完整示例代码索引

本文配套的完整可运行示例代码位于：

entry/src/main/ets/pages/FlexGrowSample.ets

包含三个可切换的演示场景（横向弹性/纵向弹性/混合布局），每个场景均有详细的中文注释，并附有flexGrow技术要点总结面板。使用DevEco Studio打开项目根目录，直接运行到模拟器或真机即可体验。

注意：示例中的切换标签栏本身也是flexGrow布局的直观演示——标签项使用flexGrow机制等分容器宽度，点击切换时高亮状态实时响应。

本文配套代码已通过鸿蒙NEXT SDK构建验证（BUILD SUCCESSFUL），可在API 12+版本上稳定运行。