鸿蒙原生 ArkTS 布局精讲：Row 主轴对齐之 SpaceBetween / SpaceAround / SpaceEvenly

一、引言

在鸿蒙原生应用开发中，布局是一切用户界面的基础。无论是简单的工具类应用还是复杂的商业级 App，页面的骨架都由布局容器搭建而成。在 ArkTS 的声明式 UI 体系中，Row 是最核心的水平布局组件之一，与 Column（垂直布局）构成了整个弹性布局体系的双支柱。

Row 组件将其子组件沿水平主轴（Main Axis）依次排列，并通过 justifyContent 属性控制子组件在主轴方向上的分布策略。在 FlexAlign 枚举中，有三种与「均匀分布」密切相关的对齐方式：

• FlexAlign.SpaceBetween — 首尾贴边，中间均匀
• FlexAlign.SpaceEvenly — 所有间隙完全相等
• FlexAlign.SpaceAround — 元素两侧间距相等

这三种方式在视觉上非常相似，但间距计算的逻辑截然不同。理解它们的区别，对于构建精确的 UI 布局至关重要。本文将以一个完整的可运行示例应用为主线，逐层深入地剖析这三种分布方式的数学原理、适用场景以及组合使用技巧。

文中所有代码均基于 HarmonyOS NEXT 6.1.1（API 24） SDK 编写，使用 TypeScript 风格的 ArkTS 语言，可在 DevEco Studio 中直接创建项目并运行验证。

二、Row 组件基础回顾

2.1 主轴与交叉轴

Row 组件采用弹性布局模型。其主轴（Main Axis）方向为水平方向（从左到右），交叉轴（Cross Axis）方向为垂直方向（从上到下）。

主轴 → (justifyContent)
┌──────┬────────┬────────┬────────┐
│ A │ B │ C │ D │
└──────┴────────┴────────┴────────┘
↑ ↑
主轴起点 主轴终点

2.2 justifyContent 属性

Row 组件的 justifyContent 属性接受一个 FlexAlign 枚举值，用于控制子组件在主轴上的排列方式。FlexAlign 提供了以下常用值：

前三种（Start / Center / End）控制的是子组件整体的对齐位置，而后三种（SpaceBetween / SpaceAround / SpaceEvenly）控制的是剩余空间在子组件之间的分配策略，是本文的核心内容。

三、三种均匀分布方式的数学原理

为了更好地理解三种方式的区别，我们首先建立数学模型。

假设 Row 容器的总宽度为 $W$，其中有 $n$ 个子组件，每个子组件的宽度为 $w_i$（$i=1,2,\dots ,n$）。所有子组件的总宽度为 $S={\sum }_{i=1}^n{w}_i$。剩余空间（即可分配的间隙宽度）为 $G=W-S$。

三种方式的区别在于如何将 $G$ 分配到各间隙中。

3.1 SpaceBetween 的间隙模型

规则：第一个子组件紧贴主轴起点（左边界），最后一个子组件紧贴主轴终点（右边界），剩余的 $G$ 空间均匀分配到 元素之间 的 $n-1$ 个间隙中。

间隙数量：$n-1$（元素之间的间隙）

每个间隙宽度：$g=\frac{G}{n-1}$

图示：

│A│← g →│B│← g →│C│← g →│D│
↑ ↑
贴左边界 贴右边界

特点：

• 首尾元素无外边距，直接贴紧容器边界
• 中间所有间隙宽度一致
• 当只有 2 个元素时，它们分别贴住左右边界，中间一个大间隙
• 当只有 1 个元素时，效果等同于 FlexAlign.Start（可退化为无效果）

3.2 SpaceEvenly 的间隙模型

规则：将 $G$ 空间均匀分配到 所有间隙 中，其中包括：

• 起点到第一个元素之间的间隙
• 元素之间的 $n-1$ 个间隙
• 最后一个元素到终点之间的间隙

间隙数量：$n+1$

每个间隙宽度：$g=\frac{G}{n+1}$

图示：
│← g →│A│← g →│B│← g →│C│← g →│D│← g →│

特点：

• 所有间隙（包括左右两端和中间）宽度完全一致
• 这是最严格意义上的「均匀分布」
• 左右两边存在固定的空白边距
• 视觉效果对称且均衡

3.3 SpaceAround 的间隙模型

规则：每个子组件两侧的间距相等。第一元素左侧有间距，最后一个元素右侧也有间距。

关键推导：

• 设每个元素两侧的间距为 $g$
• 那么 $n$ 个元素共有 $2n$ 个「半间隙」
• 左右两端的「半间隙」各贡献 $g$，中间相邻元素的「半间隙」两两合并为 $2g$
• 总间隙空间分配公式：$2g\times n=G+g\times 2$（需要认真推导）

更直观的理解方式是：

• 元素之间的间隙宽度为 $2g$
• 首尾元素与容器边界的间隙宽度为 $g$
• 因此：$2g\times (n-1)+g\times 2=G$
• 化简：$2g\times n=G$
• 所以：$g=\frac{G}{2n}$

间隙分布：

• 首尾间隙：$g=\frac{G}{2n}$
• 中间间隙：$2g=\frac{G}{n}$

图示（以 n=4 为例）：
│← g →│A│← 2g →│B│← 2g →│C│← 2g →│D│← g →│

特点：

• 首尾间隙是中间间隙的一半
• 每个元素两侧间距相等
• 视觉效果比 SpaceEvenly 更「紧凑」一些
• 在元素数量多时，首尾间隙可能小到不易察觉

3.4 三种方式的对比表格（n=4 元素）

四、完整示例应用解析

下面我们通过一个完整的 ArkTS 可运行示例，直观演示这三种布局方式的差异。

4.1 项目整体结构

示例应用包含以下层次：

Row均匀分布示例/
├── entry/
│ └── src/
│ └── main/
│ └── ets/
│ └── pages/
│ ├── Index.ets ← 入口页面，导航
│ └── RowSpaceDemo022.ets ← 主示例页面
├── entry/src/main/resources/ ← 资源文件
└── oh-package.json5 ← 包配置

4.2 辅助组件：DemoBox

DemoBox 是一个简单的带颜色方块，用于代表 Row 中的每个子元素。

/**
* 辅助组件：一个带颜色标识的方块
* 固定宽高，方便观察间距分布
*/
@Component
struct DemoBox {
private label: string = ''; // 方块的文字标签（A/B/C/D）
private color: Color = Color.Gray; // 方块背景色

build() {
Column() {
Text(this.label)
.fontSize(14)
.fontColor(Color.White)
.textAlign(TextAlign.Center)
}
.width(60) // 固定宽度 60vp
.height(40) // 固定高度 40vp
.backgroundColor(this.color)
.borderRadius(6) // 圆角 6vp
.justifyContent(FlexAlign.Center) // 文字居中
}
}

设计要点：

• width(60) 和 height(40) 使用固定尺寸，这样所有方块的面积一致，便于观察间隙大小的变化。
• 每个方块使用不同的 Color（Red / Orange / Green / Blue），在视觉上一目了然。
• 文字通过 textAlign(TextAlign.Center) + justifyContent(FlexAlign.Center) 在水平和垂直方向上都居中。
• 6vp 的 borderRadius 让方块有轻微的圆角，视觉效果更柔和。

4.3 辅助组件：DemoRow

DemoRow 是每一行演示内容的外壳，它接收 flexAlign 参数并将四个 DemoBox 排列在 Row 中。

@Component
struct DemoRow {
/** 标题（分布方式名称） */
private title: ResourceStr = '';
/** 使用的 FlexAlign 值 — 这是本示例的核心参数 */
private flexAlign: FlexAlign = FlexAlign.Start;
/** 容器背景，便于区分不同 demo */
private bgColor: string = '#FFFFFF';

build() {
Column({ space: 6 }) {
// 标题标签
Text(this.title)
.fontSize(16)
.fontWeight(FontWeight.Bold)
.fontColor('#333333')
.width('100%')
.textAlign(TextAlign.Start)

// 示例 Row：使用传入的 justifyContent
Row({ space: 0 }) {
DemoBox({ label: 'A', color: Color.Red })
DemoBox({ label: 'B', color: Color.Orange })
DemoBox({ label: 'C', color: Color.Green })
DemoBox({ label: 'D', color: Color.Blue })
}
.width('100%') // Row 容器占满父容器宽度
.height(60) // 固定高度 60vp
.backgroundColor('#E8E8E8') // 浅灰背景标识容器边界
.borderRadius(8)
.padding({ left: 4, right: 4 }) // 轻微内边距防止方块被截断
.justifyContent(this.flexAlign) // ★ 核心：不同的 FlexAlign 控制子元素分布
.alignItems(VerticalAlign.Center) // 交叉轴居中
}
.width('100%')
.padding(12)
.backgroundColor(this.bgColor)
.borderRadius(10)
.shadow({ radius: 4, color: '#22000000', offsetX: 0, offsetY: 2 })
}
}

设计要点：

4.4 主页面：RowSpaceDemo022

主页面组合三个 DemoRow 实例，分别演示 SpaceBetween、SpaceEvenly 和 SpaceAround。

@Entry
@Component
struct RowSpaceDemo022 {
/** 返回上一页 */
private goBack(): void {
router.back();
}

build() {
Column({ space: 20 }) {
// ── 顶部标题区 ──
Row() {
Text('←')
.fontSize(20)
.onClick(() => this.goBack())

Text('Row 均匀分布对比')
.fontSize(22)
.fontWeight(FontWeight.Bold)
.margin({ left: 12 })
}
.width('100%')
.padding({ top: 12, bottom: 12, left: 16, right: 16 })
.backgroundColor('#F5F5F5')

// ── 说明文字 ──
Text('观察灰色容器内四个方块的水平间距分布方式')
.fontSize(14)
.fontColor('#666666')
.width('100%')
.padding({ left: 16, right: 16 })

// ══════════════════════════════════════════
// 1) SpaceBetween
// A 贴左边界，D 贴右边界，
// 剩余空间均匀分配给 B-C、C-D 之间
// ══════════════════════════════════════════
DemoRow({
title: '① SpaceBetween（首尾贴边，中间均匀）',
flexAlign: FlexAlign.SpaceBetween,
bgColor: '#FFFFFF',
})

// ══════════════════════════════════════════
// 2) SpaceEvenly
// 所有「间隙 + 首尾」宽度完全相等
// A-左边界 = A-B = B-C = C-D = D-右边界
// ══════════════════════════════════════════
DemoRow({
title: '② SpaceEvenly（所有间隙完全相等）',
flexAlign: FlexAlign.SpaceEvenly,
bgColor: '#FFF8E1', // 浅黄色背景区分
})

// ══════════════════════════════════════════
// 3) SpaceAround
// 每个元素两侧间距相等，
// 因此首尾间距 = 中间间距 / 2
// ══════════════════════════════════════════
DemoRow({
title: '③ SpaceAround（元素两侧间距相等）',
flexAlign: FlexAlign.SpaceAround,
bgColor: '#E3F2FD', // 浅蓝色背景区分
})

// ── 布局要点总结（运行时可见） ──
Column({ space: 6 }) {
Text('📌 布局要点')
.fontSize(16)
.fontWeight(FontWeight.Bold)
Text('SpaceBetween — 首元素紧贴左边界，尾元素紧贴右边界，剩余间距在元素之间均匀分配')
.fontSize(13)
.fontColor('#444444')
Text('SpaceEvenly — 所有间隙（含首尾）宽度完全相等，间距最均匀')
.fontSize(13)
.fontColor('#444444')
Text('SpaceAround — 每个元素两侧间距相等，首尾间隙为中间间隙的一半')
.fontSize(13)
.fontColor('#444444')
}
.width('100%')
.padding(16)
.backgroundColor('#FAFAFA')
.borderRadius(10)
.margin({ top: 8 })
}
.width('100%')
.height('100%')
.backgroundColor('#F0F0F0')
.padding(16)
}
}

页面设计要点：

4.5 入口页面：Index.ets

为了让示例页面能够被访问，需要在 Index.ets 中添加导航入口：

import { router } from '@kit.ArkUI';

@Entry
@Component
struct Index {
build() {
Column({ space: 16 }) {
Text('原生布局示例集')
.fontSize(24)
.fontWeight(FontWeight.Bold)
.margin({ top: 32, bottom: 16 })

// Row 均匀分布示例入口
Button('Row 均匀分布对比 (022)')
.width('80%')
.height(48)
.backgroundColor('#007AFF')
.onClick(() => {
router.pushUrl({ url: 'pages/RowSpaceDemo022' });
})
}
.width('100%')
.height('100%')
.backgroundColor('#F0F0F0')
}
}

同时需要在 main_pages.json 中注册页面：

{
"src": [
"pages/Index",
"pages/RowSpaceDemo022"
]
}

五、运行效果与观察指南

将示例代码运行在 HarmonyOS NEXT 真机或模拟器上，你会看到三个垂直排列的演示行：

5.1 观察 SpaceBetween

在第一个演示行中，四个方块（A 红色、B 橙色、C 绿色、D 蓝色）分布在灰色背景的 Row 容器内：

• A 方块紧贴灰色容器的左边界
• D 方块紧贴灰色容器的右边界
• B 和 C 方块均匀分布在中间
• AB 之间的间隙、BC 之间的间隙、CD 之间的间隙完全相等

视觉特征：左右两端「顶满」，中间「悬空」。

适用场景：导航栏菜单项、工具条图标、底部分页指示器等，希望菜单项均匀分布且充分利用水平空间的场景。

5.2 观察 SpaceEvenly

在第二个演示行（浅黄色背景）中：

• A 方块左侧有明显的空白边距
• D 方块右侧有明显的空白边距
• A 左边的边距 = AB 间隙 = BC 间隙 = CD 间隙 = D 右边的边距

视觉特征：所有间隙宽度完全一致，整体居中偏两侧均匀扩散。

适用场景：表单中的选项按钮组、数据图表中的图例项、评分星标等，要求视觉完全居中对称的场景。

5.3 观察 SpaceAround

在第三个演示行（浅蓝色背景）中：

• A 方块左侧有较小边距
• D 方块右侧有较小边距
• AB 之间、BC 之间、CD 之间的间隙明显比左右边距大
• 左右边距恰好等于中间间隙的一半

视觉特征：中间松散，两端紧凑，整体自然过渡。

适用场景：卡片式布局中的操作按钮、标签列表、社交媒体的反应按钮等，希望中间元素间距宽松、整体视觉不空旷的场景。

5.4 快速辨别口诀

六、主控变量：width 对 justifyContent 的影响

一个常见的误区是认为设置了 justifyContent 就一定有效。实际上，justifyContent 的效果依赖于一个前提条件：Row 容器的宽度大于子组件的总宽度。

6.1 不同 width 设置的效果对比

// 示例：不同的 Row 宽度设置
Column({ space: 12 }) {
// 情况 A：width('100%') — justifyContent 生效
Row() {
Text('A').width(40).height(30).backgroundColor(Color.Red)
Text('B').width(40).height(30).backgroundColor(Color.Orange)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.backgroundColor('#E8E8E8')

// 情况 B：不设 width（默认自适应） — justifyContent 无效
Row() {
Text('A').width(40).height(30).backgroundColor(Color.Red)
Text('B').width(40).height(30).backgroundColor(Color.Orange)
}
// .width('100%') ← 注释掉了
.justifyContent(FlexAlign.SpaceBetween)
.backgroundColor('#E8E8E8')

// 情况 C：width 小于子组件总宽度 — 子组件溢出，justifyContent 无效
Row() {
Text('A').width(100).height(30).backgroundColor(Color.Red)
Text('B').width(100).height(30).backgroundColor(Color.Orange)
}
.width(150)
.justifyContent(FlexAlign.SpaceBetween)
.backgroundColor('#E8E8E8')
}

运行结果分析：

• 情况 A：两个 A/B 方块分别贴紧左右边界，中间留出大量空白，SpaceBetween 正常工作。
• 情况 B：Row 容器宽度自适应为 80vp（两个 40vp 方块之和），剩余空间为零，两个方块相邻排列，SpaceBetween 未产生任何效果。
• 情况 C：Row 容器宽度 150vp 小于子组件总宽度 200vp，子组件溢出容器边界，SpaceBetween 同样不生效。

6.2 结论

justifyContent 的均匀分布仅在 Row 容器的明确宽度大于子组件总宽度时才有效。 具体的：

• width('100%') 或 width(具体数值) — ✅ 有效
• width('auto') 或未设 width — ❌ 无效（宽度自适应为子组件总宽度）
• width 小于子组件总宽度 — ❌ 无效（空间不足，子组件溢出）

七、动态调整：实时切换 justifyContent

前面的示例固定展示了三种方式。在真实的开发场景中，你可能需要动态切换对齐方式。下面展示如何通过按钮循环切换 justifyContent：

@Entry
@Component
struct DynamicJustifyDemo {
@State currentAlign: FlexAlign = FlexAlign.SpaceBetween;
private alignOptions: FlexAlign[] = [
FlexAlign.SpaceBetween,
FlexAlign.SpaceEvenly,
FlexAlign.SpaceAround,
];
private alignLabels: string[] = [
'SpaceBetween',
'SpaceEvenly',
'SpaceAround',
];
@State currentIndex: number = 0;

build() {
Column({ space: 20 }) {
// 当前对齐方式标签
Text(`当前：${this.alignLabels[this.currentIndex]}`)
.fontSize(18)
.fontWeight(FontWeight.Bold)

// 示例 Row
Row({ space: 0 }) {
Text('A').width(60).height(40)
.backgroundColor(Color.Red).textAlign(TextAlign.Center)
Text('B').width(60).height(40)
.backgroundColor(Color.Orange).textAlign(TextAlign.Center)
Text('C').width(60).height(40)
.backgroundColor(Color.Green).textAlign(TextAlign.Center)
}
.width('100%')
.height(60)
.backgroundColor('#E8E8E8')
.justifyContent(this.currentAlign) // ★ 使用 @State 状态变量
.alignItems(VerticalAlign.Center)

// 切换按钮
Button('切换分布方式')
.onClick(() => {
this.currentIndex = (this.currentIndex + 1) % 3;
this.currentAlign = this.alignOptions[this.currentIndex];
})

// 当前间隙示意
Text(this.getDescription(this.currentIndex))
.fontSize(14)
.fontColor('#666666')
}
.width('100%')
.height('100%')
.padding(20)
}

private getDescription(index: number): string {
const descs = [
'SpaceBetween：首尾贴边，中间均匀',
'SpaceEvenly：所有间隙完全相等',
'SpaceAround：首尾间隙为中间间隙的一半',
];
return descs[index];
}
}

关键点：

• 使用 @State currentAlign: FlexAlign 状态变量绑定到 justifyContent。
• 每次点击按钮更新 currentIndex 并轮换 currentAlign 的值。
• Row 的布局会随着状态变化自动重新渲染，实现实时切换效果。
• 同时更新文字说明，让用户在观察视觉变化的同时理解名称和含义。

八、与其他布局属性的组合使用

justifyContent 并不是单独使用的。在实际开发中，它常常与其他布局属性配合使用以达到更复杂的布局效果。

8.1 与 alignItems 组合

justifyContent 控制主轴分布，alignItems 控制交叉轴对齐。两者组合可以实现各种二维布局效果。

Row() {
// 子组件高度不同时可以观察交叉轴对齐效果
Text('A').width(50).height(30).backgroundColor(Color.Red)
Text('B').width(50).height(50).backgroundColor(Color.Orange)
Text('C').width(50).height(40).backgroundColor(Color.Green)
}
.width('100%')
.height(80)
.justifyContent(FlexAlign.SpaceEvenly) // 水平均匀分布
.alignItems(VerticalAlign.Center) // 垂直居中对齐
.backgroundColor('#E8E8E8')

当子组件高度不一致时，alignItems(VerticalAlign.Center) 可以确保它们在垂直方向上居中，视觉上更加整齐。

8.2 与 padding 组合

Row 的 padding 属性会影响 justifyContent 的计算基准：

Row() {
Text('A').width(50).height(40).backgroundColor(Color.Red)
Text('B').width(50).height(40).backgroundColor(Color.Orange)
}
.width('100%')
.padding({ left: 20, right: 20 }) // 左右内边距 20vp
.justifyContent(FlexAlign.SpaceBetween) // 间距在 padding 之后计算
.backgroundColor('#E8E8E8')

注意：padding 会减小 Row 的内部可用宽度，因此 justifyContent 的间隙计算是在扣除 padding 之后的基础上进行的。这意味着 SpaceBetween 的「贴边」是贴的 padding 边缘，而非容器边缘。

8.3 与嵌套 Row/Column 组合

在实际页面中，很少只有一个 Row 层。多层嵌套时，每一层的 justifyContent 独立工作：

Column({ space: 16 }) {
// 外层 Row：SpaceBetween 分布两个子 Row
Row() {
// 左侧子 Row：Start 对齐
Row({ space: 8 }) {
Text('首页').fontSize(16)
Text('发现').fontSize(16)
}
.justifyContent(FlexAlign.Start)

// 右侧子 Row：End 对齐
Row({ space: 8 }) {
Text('消息').fontSize(16)
Text('我的').fontSize(16)
}
.justifyContent(FlexAlign.End)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.padding(16)
.backgroundColor('#F5F5F5')
}

这其实就是典型的导航栏结构：外层 Row 使用 SpaceBetween 将左侧菜单组和右侧功能组分别贴在两端，内部各自的 Row 使用 Start/End 控制组内排列。

九、不同元素数量下的表现

为了加深理解，我们看一下当元素数量变化时，三种对齐方式的表现。

9.1 n = 2 个元素

SpaceBetween: │A│←─── 全部剩余空间 ───→│B│
SpaceEvenly: │← g →│A│← g →│B│← g →│
SpaceAround: │← g →│A│← 2g →│B│← g →│

• SpaceBetween：两个元素直接贴住左右边界，中间一个较大的间隙。这是最常见的「左右布局」。
• SpaceEvenly：三个间隙完全相等，元素居中偏左和偏右。
• SpaceAround：中间间隙是左右间隙的 2 倍，视觉效果介于两者之间。

9.2 n = 3 个元素

SpaceBetween: │A│← g →│B│← g →│C│
SpaceEvenly: │← g →│A│← g →│B│← g →│C│← g →│
SpaceAround: │← g →│A│← 2g →│B│← 2g →│C│← g →│

三个元素是最常用的演示场景，间隙关系一目了然。

9.3 n = 5 个元素

元素越多，三种方式的差异越明显：

• SpaceBetween 左右贴边，中间均匀，整体占用最宽。
• SpaceEvenly 所有间隙相等，左右留白最多，整体视觉最紧凑。
• SpaceAround 左右留白是中间一半，是一种折中方案。

9.4 n = 1 个元素

当只有一个子组件时：

• SpaceBetween：退化为 FlexAlign.Start，元素靠左排列。
• SpaceEvenly：左右间隙相等，效果等同于 FlexAlign.Center。
• SpaceAround：左右间隙相等（因为只有一个元素时，n=1，中间间隙数量为 0，首尾间隙各为 $G/2$），效果也等同于 FlexAlign.Center。

十、性能与最佳实践

10.1 性能影响

justifyContent 的三种均匀分布方式对布局性能的影响可以忽略不计——它们只是不同的空间分配算法，计算量在微秒级别。相比组件数量、渲染层级深度和动画复杂度，justifyContent 的选择对帧率和首屏加载时间没有任何实质影响。

10.2 最佳实践

十一、常见问题与排查

11.1 justifyContent 没有效果

症状：设置了 SpaceBetween / SpaceEvenly / SpaceAround，但子组件仍然紧挨在一起。

排查步骤：

11.2 SpaceBetween 首尾没有贴边

症状：设置了 SpaceBetween，但 A 和 D 没有贴紧容器边界。

原因：

• Row 上有 padding 属性设置了左右内边距。justifyContent 的计算基准是 padding box（内边距框），而非 content box（内容框）。
• 子组件本身带有外边距（margin）。

解决方法：检查 Row 的 padding 和子组件的 margin 值。

11.3 三种方式看起来一样

症状：无论选择哪种均匀分布方式，子组件的排列位置完全相同。

原因：

• 容器宽度恰好等于（或非常接近）子组件总宽度，剩余空间趋近于零。
• 子组件的宽度使用了百分比或 layoutWeight(1) 填充了全部可用空间，导致剩余空间为零。

解决方法：确保 Row 宽度明显大于子组件固定宽度之和。

11.4 SpaceEvenly 左右边距不对称

症状：视觉上左右的空白边距不一致。

原因：Row 容器本身可能有非对称的 padding，或者子组件之间存在 margin 叠加效应。

解决方法：检查 Row 的 padding 是否左右对称，以及子组件的 margin 设置是否一致。

十二、更深层：与 Flex 弹性属性的交互

当 Row 中的子组件使用了 layoutWeight（弹性权重）属性时，justifyContent 的三种均匀分布方式的行为会发生变化，因为子组件的宽度不再是固定值，而是动态分配的结果。

12.1 layoutWeight 简介

layoutWeight 是 ArkUI 提供的一种弹性布局属性，用于在 Row 或 Column 中按比例分配剩余空间。假设 Row 中有两个子组件，layoutWeight(1) 和 layoutWeight(2)，那么剩余空间会被分成 3 份，前者占 1 份，后者占 2 份。

12.2 与 justifyContent 的组合效果

Row() {
Text('A').layoutWeight(1).height(40).backgroundColor(Color.Red)
Text('B').layoutWeight(1).height(40).backgroundColor(Color.Orange)
Text('C').layoutWeight(1).height(40).backgroundColor(Color.Green)
}
.width('100%')
.height(60)
.justifyContent(FlexAlign.SpaceBetween)
.backgroundColor('#E8E8E8')

当所有子组件都使用 layoutWeight(1) 时，三个子组件均分 Row 容器的全部宽度，三者之间没有任何间隙。此时 justifyContent 的任何取值都不会产生效果，因为没有剩余空间可供分配。

但是如果混合使用固定宽度和弹性宽度的子组件：

Row() {
Text('A').width(60).height(40).backgroundColor(Color.Red) // 固定宽度
Text('B').layoutWeight(1).height(40).backgroundColor(Color.Orange) // 弹性宽度
Text('C').width(60).height(40).backgroundColor(Color.Green) // 固定宽度
}
.width('100%')
.height(60)
.justifyContent(FlexAlign.SpaceBetween)
.backgroundColor('#E8E8E8')

此时：

• A 和 C 固定宽度各 60vp
• B 占据扣除 120vp 后的全部剩余空间
• 由于 B 占满了中间区域，A 和 C 之间没有间隙，SpaceBetween 不会产生额外间距

因此，layoutWeight 和 justifyContent 通常不会同时使用，因为 layoutWeight 会「消耗」掉所有剩余空间，使得 justifyContent 失去分配空间的基础。

十三、与其他框架的对比

如果你是来自其他移动端或 Web 开发框架的开发者，下表可以帮助你快速对应：

可以看出，鸿蒙 ArkTS 的布局体系与 CSS Flexbox 的对应关系最为直接，几乎是一一映射。如果你有 Web 开发经验，可以非常平滑地迁移。

十四、综合实战：构建一个工具条组件

下面我们综合运用所学知识，构建一个真实的工具条组件，它在不同的状态下使用不同的均匀分布方式。

/**
* 综合示例：自适应工具条
* 演示在真实场景中切换 SpaceBetween / SpaceEvenly / SpaceAround
*/
@Entry
@Component
struct ToolbarDemo {
@State mode: 'between' | 'evenly' | 'around' = 'between';

build() {
Column({ space: 24 }) {
// 标题
Text('工具条对齐模式')
.fontSize(20)
.fontWeight(FontWeight.Bold)

// ── 工具条 ──
Row() {
// 每组图标使用 Column + 文字
this.createToolItem('✏️', '编辑')
this.createToolItem('📎', '附件')
this.createToolItem('🔍', '搜索')
this.createToolItem('⚙️', '设置')
this.createToolItem('📤', '分享')
}
.width('100%')
.height(64)
.backgroundColor('#FFFFFF')
.borderRadius(12)
.padding({ left: 8, right: 8 })
.justifyContent(this.getJustifyContent()) // ★ 核心
.alignItems(VerticalAlign.Center)
.shadow({ radius: 6, color: '#22000000', offsetY: 3 })

// ── 模式切换 ──
Row({ space: 12 }) {
this.createModeButton('Space\\nBetween', 'between')
this.createModeButton('Space\\nEvenly', 'evenly')
this.createModeButton('Space\\nAround', 'around')
}
.width('100%')
.justifyContent(FlexAlign.Center)

// ── 当前模式说明 ──
Text(this.getDescription())
.fontSize(14)
.fontColor('#666666')
.textAlign(TextAlign.Center)
.width('100%')
}
.width('100%')
.height('100%')
.padding(20)
.backgroundColor('#F0F0F0')
}

// ── 创建工具项 ──
@Builder
private createToolItem(icon: string, label: string) {
Column({ space: 2 }) {
Text(icon).fontSize(22)
Text(label).fontSize(11).fontColor('#666666')
}
.width(56)
.height(56)
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.borderRadius(8)
}

// ── 创建模式切换按钮 ──
@Builder
private createModeButton(label: string, mode: 'between' | 'evenly' | 'around') {
Button(label)
.width(80)
.height(56)
.fontSize(13)
.fontWeight(this.mode === mode ? FontWeight.Bold : FontWeight.Regular)
.backgroundColor(this.mode === mode ? '#007AFF' : '#E0E0E0')
.fontColor(this.mode === mode ? Color.White : '#333333')
.onClick(() => {
this.mode = mode;
})
}

private getJustifyContent(): FlexAlign {
switch (this.mode) {
case 'between': return FlexAlign.SpaceBetween;
case 'evenly': return FlexAlign.SpaceEvenly;
case 'around': return FlexAlign.SpaceAround;
}
}

private getDescription(): string {
switch (this.mode) {
case 'between':
return '当前模式：SpaceBetween — 工具项均匀分布，首尾贴边';
case 'evenly':
return '当前模式：SpaceEvenly — 所有间隙（含首尾）完全相等';
case 'around':
return '当前模式：SpaceAround — 每个工具项两侧间距相等';
}
}
}

实战要点：

十五、总结

本文全面深入地介绍了鸿蒙 ArkTS 中 Row 组件的三种均匀分布对齐方式：SpaceBetween、SpaceEvenly 和 SpaceAround。

核心要点回顾

学习建议

• 动手运行示例：将文中的完整代码复制到 DevEco Studio 中运行，在真机或模拟器上观察三种方式的视觉差异。
• 修改参数观察变化：尝试修改子组件宽度、Row 宽度、元素数量等参数，观察分布效果的变化。
• 结合 Inspector 调试：使用 DevEco Studio 的 Inspector 工具查看组件的实际布局框，精确理解间隙计算。
• 在真实项目中实践：在自己的应用中遇到需要均匀分布的场景时，有意识地选择合适的对齐方式。

鸿蒙 ArkTS 的布局体系虽然借鉴了 Flexbox 模型，但也有其独特的语法和使用习惯。掌握 justifyContent 的这三种均匀分布方式，是成为一名合格的 HarmonyOS 原生开发者的重要一步。

本文基于 HarmonyOS NEXT 6.1.1（API 24）SDK，代码完整可在 DevEco Studio 中直接运行。