一、引言

在鸿蒙原生应用开发中，布局是一切用户界面的基础。无论是简单的工具类应用还是复杂的商业级 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 提供了以下常用值：

枚举值	说明
FlexAlign.Start	所有子组件从主轴起点开始依次排列
FlexAlign.Center	所有子组件沿主轴居中对齐
FlexAlign.End	所有子组件靠主轴终点对齐
FlexAlign.SpaceBetween	首尾贴边，剩余空间在元素之间均匀分配
FlexAlign.SpaceAround	每个元素两侧间距相等，首尾间距为中间间距的一半
FlexAlign.SpaceEvenly	所有间距（含首尾）完全相等

前三种（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 元素）

属性	SpaceBetween	SpaceEvenly	SpaceAround
首元素贴边？	✅ 是	❌ 否	❌ 否
尾元素贴边？	✅ 是	❌ 否	❌ 否
中间间隙	$\frac{G}{3}$	$\frac{G}{5}$	$\frac{G}{4}$
左右边距	0	$\frac{G}{5}$	$\frac{G}{8}$
左右边距与中间间隙的关系	无	完全相等	首尾 = 中间 / 2
视觉对称性	好	最好	较好
空间利用率	最高	较低	中等

---

四、完整示例应用解析

下面我们通过一个完整的 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 })
  }
}

设计要点：

1. Row 容器宽度 '100%'：这是关键——只有当容器宽度被明确设定时，剩余空间 $G=W-S$ 才大于零，justifyContent 的均匀分布效果才能体现。如果 Row 的宽度未被设置或为自适应宽度（width 为 auto），容器宽度等于子组件总宽度，剩余空间为零，三种对齐方式看起来没有任何区别。

2. .padding({ left: 4, right: 4 })：添加非常小的内边距（4vp），防止方块因 SpaceBetween 首尾贴边而恰好贴紧容器边界导致视觉上被裁切的错觉。

3. .backgroundColor('#E8E8E8')：浅灰色背景可以清晰地标识 Row 容器的边界范围，让用户直观看到首元素和尾元素是否贴边。

4. alignItems(VerticalAlign.Center)：四个方块在垂直方向上居中对齐，确保视觉效果整齐。

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)
  }
}

页面设计要点：

1. 三组演示并行排列：在同一个页面中垂直排列三种方式，用户无需跳转即可直观对比差异性。

2. 不同的背景色：SpaceBetween 使用白色背景、SpaceEvenly 使用浅黄色、SpaceAround 使用浅蓝色，视觉上便于区分。

3. 底部要点总结：在页面底部列出三种方式的文字总结，作为运行时的速查参考，帮助用户在观看演示的同时理解背后的原理。

4. router 导航：使用 router.back() 实现返回上一页的功能，使示例应用可以嵌入到更大的学习项目中。

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 快速辨别口诀

口诀	对应方式
「两头顶满中间均」	SpaceBetween
「统统相等全一样」	SpaceEvenly
「两边一半中间全」	SpaceAround

---

六、主控变量：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 最佳实践

1. 优先使用 SpaceBetween 实现左右分布：当需要将两组元素分别固定在容器两端（如导航栏的「返回按钮 + 标题」和「更多操作按钮」），SpaceBetween 是最简洁高效的方案。

2. 需要完全对称时使用 SpaceEvenly：如果希望整体布局在视觉上完美居中对称，且不介意左右留白，SpaceEvenly 是最佳选择。

3. 作为折中方案使用 SpaceAround：当希望中间元素间距宽松，但又不希望左右留白太多时，SpaceAround 提供了良好的平衡。

4. 结合 padding 微调间距：如果 SpaceBetween 缺左右边距，SpaceEvenly 又边距过大，可以用 SpaceBetween + padding 的组合实现自定义边距控制。

5. 避免在动态列表中使用过多套娃：如果 Row 内部是动态生成的多个子组件（通过 ForEach），且数量变化频繁，考虑使用 LazyForEach 配合固定尺寸的组件，保证 justifyContent 的间隙分布可预测。

6. 在组件库中封装成 PropTypes：如果项目中多处使用均匀分布，可以封装成可配置的组件变量，方便统一切换和主题化管理。

---

十一、常见问题与排查

11.1 justifyContent 没有效果

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

排查步骤：

1. 检查 Row 的宽度：确认 Row 设置了 width('100%') 或具体的宽度值，且该宽度大于子组件总宽度。
2. 检查子组件的宽度：如果子组件没有宽度或使用了 layoutWeight 等弹性属性，实际总宽度可能等于容器宽度，导致剩余空间为零。
3. 检查是否有 padding 抵消了间隙：过大的 padding 可能占用了大部分可用空间。
4. 检查子组件是否溢出：在 DevEco Studio 的 Inspector 面板中查看 Row 的实际渲染尺寸。

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)	Android (LinearLayout)	iOS (UIStackView)
FlexAlign.SpaceBetween	justify-content: space-between	自定义（需手写权重）	.distribution = .fillEqually + 首尾约束
FlexAlign.SpaceEvenly	justify-content: space-evenly	weightSum + 子项权重	.distribution = .equalSpacing
FlexAlign.SpaceAround	justify-content: space-around	自定义（通过 margin 模拟）	自定义（通过 spacing 模拟）
.alignItems(VerticalAlign.Center)	align-items: center	gravity="center_vertical"	.alignment = .center

可以看出，鸿蒙 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 — 每个工具项两侧间距相等';
    }
  }
}

实战要点：

1. @Builder 封装工具项和按钮：减少布局代码重复，提高可维护性。
2. getJustifyContent() 方法返回当前枚举值：将字符串模式映射到 FlexAlign 枚举，集中管理映射关系。
3. 三个模式按钮高亮当前选中项：使用 === 判断当前模式，动态切换按钮背景色和文字颜色。
4. 文字说明同步更新：每次切换模式时，下方的说明文字同步更新，帮助用户理解。

---

十五、总结

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

核心要点回顾

1. 三者本质：都是将 Row 容器主轴方向的剩余空间分配到子组件之间，不同之处在于「哪些间隙参与分配」和「分配比例」。

2. SpaceBetween：首尾贴边，中间间隙均匀。间隙数量 = n - 1，空间利用率最高。

3. SpaceEvenly：所有间隙（含首尾）完全相等。间隙数量 = n + 1，视觉效果最对称，左右留白最多。

4. SpaceAround：每个元素两侧间距相等，首尾间隙 = 中间间隙 ÷ 2。间隙数量 = n（以「半间隙」计为 2n），折中方案。

5. 生效条件：Row 容器的明确宽度（width('100%') 或固定值）必须大于子组件总宽度，否则 justifyContent 无效。

6. 组合使用：与 alignItems、padding、layoutWeight、嵌套结构等合理搭配，可以实现各种复杂的布局需求。

学习建议

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

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

---

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