一、FlexAlign 布局体系概览

在鸿蒙 ArkTS 的声明式 UI 体系中，Row 和 Column 是最基础也是最重要的两个布局容器。它们都继承自 Flexbox 弹性布局模型，通过 justifyContent 和 alignItems 两个核心属性控制子组件的排列与对齐。

justifyContent 属性接受 FlexAlign 枚举，共定义 6 种排列策略。这 6 种策略可以分为两个大类：

位置型排列

子组件保持自身尺寸，整体在容器中移动，不产生额外间距：

FlexAlign 取值	行为	描述
Start	从主轴起始端排列	左对齐（Row）或上对齐（Column）
Center	在主轴居中排列	居中对齐
End	从主轴尾端排列	右对齐（Row）或下对齐（Column）

空间分配型排列

子组件之间的空隙被弹性分配，产生视觉间距：

FlexAlign 取值	间距数量	两端间距	描述
SpaceBetween	N-1	零	首尾贴边，中间等距
SpaceAround	N	内部间距的一半	环绕均分，两端半距
SpaceEvenly	N+1	等于内部间距	完全等距，极致对称

其中 N 为子组件的个数。SpaceEvenly 是唯一「两端间距与内部间距完全相等」的排列方式。 这使它成为追求对称美学时的首选方案。

选择决策树

需要弹性排列吗？
├── 否 ─→ 对齐位置？
│         ├── 靠左/上 → FlexAlign.Start
│         ├── 居中    → FlexAlign.Center
│         └── 靠右/下 → FlexAlign.End
└── 是 ─→ 两端如何处理？
          ├── 紧贴边缘 → FlexAlign.SpaceBetween
          ├── 半距留白 → FlexAlign.SpaceAround
          └── 完全对称 → FlexAlign.SpaceEvenly

---

二、SpaceEvenly 核心原理

2.1 间距分配公式

SpaceEvenly 的核心数学公式极为简洁。设容器有效宽度为 W，各子组件宽度之和为 ΣWi，则：

剩余空间 Wr = W - ΣWi
间距总数   = N + 1
每个间距宽 = Wr ÷ (N + 1)

第 i 个子组件的起始位置（从 0 开始编号）：

Position(i) = (i + 1) × Gap + Σ(Wj)   (j = 0..i - 1)

2.2 可视化对比（N = 3）

为直观理解，我们以 3 个固定宽度的色块 A、B、C 为例，对比三种排列方式的间距差异：

SpaceBetween（N-1 = 2 个间距）：
│A←───── 间距 ─────→B←───── 间距 ─────→C│
↑ A 贴左                            C 贴右 ↑

SpaceAround（N = 3 个间距）：
│← 半距 →A←── 间距 ──→B←── 间距 ──→C← 半距 →│
↑ 两端间距 = 内部间距 ÷ 2                 ↑

SpaceEvenly（N+1 = 4 个间距）：
│← 等距 →A←── 等距 ──→B←── 等距 ──→C← 等距 →│
↑ 所有 4 个间距宽度完全相同              ↑

从图中可以清晰看到：SpaceEvenly 的 4 个间距（左端 → A、A → B、B → C、C → 右端）完全相等。

2.3 间距宽度变化规律

在相同的容器宽度和子组件宽度下，三种排列的间距宽度大小关系为：

SpaceEvenly 间距  <  SpaceAround 间距  <  SpaceBetween 间距

这是因为 SpaceEvenly 将剩余空间分成了 N+1 份（最多），而 SpaceBetween 只分成了 N-1 份（最少）。份数越多，每份的宽度自然越小。

以 4 个宽度 64vp 的卡片在 360vp 宽的容器中为例：

排列	间隙数	间隙宽度	左端间距	右端间距
SpaceBetween	3	(360-256)÷3 = 34.6vp	0	0
SpaceAround	4	(360-256)÷4 = 26vp	13vp	13vp
SpaceEvenly	5	(360-256)÷5 = 20.8vp	20.8vp	20.8vp

---

三、示例应用整体架构

3.1 项目文件结构

MyApplication/entry/src/main/ets/
├── entryability/
│   └── EntryAbility.ets            ← 应用入口，加载 RowSpaceEvenlyDemo
└── pages/
    ├── Index.ets                   ← 原始首页
    ├── LightChaseGame.ets           ← 其他页面
    ├── RunnerPage.ets               ← 其他页面
    ├── RowSpaceAroundDemo.ets       ← SpaceAround 演示
    └── RowSpaceEvenlyDemo.ets       ← 本文核心文件（905 行）

3.2 入口配置

EntryAbility.ets 在 onWindowStageCreate 生命周期中加载我们的主页面：

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.loadContent('pages/RowSpaceEvenlyDemo', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'App',
          'Failed to load: %{public}s', JSON.stringify(err));
        return;
      }
      hilog.info(0x0000, 'App', 'Succeeded in loading content.');
    });
  }
  // ...其他生命周期方法...
}

3.3 页面布局总体结构

页面的 build() 方法采用三段式结构：

Column（全屏 #eef2f7）
├── 标题区（绿色 #2c7a5a，固定显示）
│   ├── 主标题："📐 Row + justifyContent(SpaceEvenly)"
│   └── 副标题："主轴（水平）完全等间距分布"
├── Scroll 滚动容器（layoutWeight=1 占满剩余空间）
│   └── Column
│       ├── 【演示一】仪表盘指标（4 项 SpaceEvenly）
│       ├── 【演示二】快速设置栏（5 项，可交互开关）
│       ├── 【演示三】底部导航栏（4 Tab SpaceEvenly）
│       ├── 【演示四】三大空间分配型精细对比
│       ├── 【演示五】六种 FlexAlign 一览
│       ├── 【演示六】子组件数量影响（2/3/4）
│       └── 【演示七】音乐播放器控制栏（5 按钮）
└── 说明面板（固定在底部）
    ├── 6 个布局要点
    ├── 分隔线
    └── 核心代码块展示

3.4 数据模型定义

/** 仪表盘指标项 */
interface MetricItem {
  icon: string;     // 图标
  value: string;    // 数值
  label: string;    // 标签
  color: string;    // 主题色
}

/** 设置选项 */
interface SettingItem {
  icon: string;     // 图标
  label: string;    // 标签
  isOn: boolean;    // 开关初始状态
}

/** 图标按钮 */
interface IconBtn {
  icon: string;
  label: string;
}

3.5 主数据成员

@Entry
@Component
struct RowSpaceEvenlyPage {
  // 仪表盘：4 项
  private readonly metricItems: MetricItem[] = [
    { icon: '👀', value: '12.8K', label: '浏览量', color: '#4a90d9' },
    { icon: '👤', value: '6.2K', label: '访客数', color: '#7ed321' },
    { icon: '⏱️', value: '3m12s', label: '平均时长', color: '#f5a623' },
    { icon: '📊', value: '86.5%', label: '转化率', color: '#d0021b' },
  ];

  // 设置项：5 项（含交互状态）
  private readonly settingItems: SettingItem[] = [
    { icon: '🔔', label: '通知', isOn: true },
    { icon: '🎵', label: '音效', isOn: true },
    { icon: '🔒', label: '隐私', isOn: false },
    { icon: '🌙', label: '深色', isOn: false },
    { icon: '📶', label: 'WiFi', isOn: true },
  ];

  // 导航栏：4 项
  private readonly navIconItems: IconBtn[] = [
    { icon: '🏠', label: '首页' },
    { icon: '🔍', label: '搜索' },
    { icon: '❤️', label: '收藏' },
    { icon: '👤', label: '我的' },
  ];
}

---

四、子组件详解

4.1 MetricCard —— 仪表盘指标卡片

@Component
struct MetricCard {
  private item: MetricItem = { icon: '', value: '', label: '', color: '' };

  build() {
    Column() {
      Text(this.item.icon).fontSize(28).lineHeight(34)

      Text(this.item.value)
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .fontColor(this.item.color)
        .lineHeight(30)
        .margin({ top: 6 })

      Text(this.item.label)
        .fontSize(11)
        .fontColor('#999')
        .margin({ top: 2 })
    }
    .alignItems(HorizontalAlign.Center)
    .padding({ top: 12, bottom: 10, left: 4, right: 4 })
    .width(64)          // ★ 固定宽度，SpaceEvenly 精确计算间距的前提
  }
}

设计要点：

• 固定宽度 64vp：这是配合 SpaceEvenly 的关键。固定宽度后，每个子组件的尺寸不再由内容撑开，SpaceEvenly 的间距分配变得完全可预测。
• 三层信息结构：图标（28fp）→ 数值（22fp 粗体+彩色）→ 标签（11fp 灰色），形成清晰的信息层级。
• color 参数驱动主题色：每个卡片的数值颜色由数据驱动，fontColor(this.item.color) 让不同指标有各自的品牌色。

4.2 ToggleSetting —— 可交互开关设置项

@Component
struct ToggleSetting {
  private item: SettingItem = { icon: '', label: '', isOn: false };
  @State private isOn: boolean = false;

  aboutToAppear(): void {
    this.isOn = this.item.isOn;  // 初始化状态
  }

  build() {
    Column() {
      Text(this.item.icon).fontSize(26).lineHeight(32)

      Text(this.item.label)
        .fontSize(11)
        .fontColor('#555')
        .fontWeight(FontWeight.Medium)
        .margin({ top: 6 })

      // 自定义开关控件
      Row() {
        Row()   // 滑块圆点
          .width(16).height(16)
          .backgroundColor(this.isOn ? '#ffffff' : '#ccc')
          .borderRadius(8)
      }
      .width(36).height(20)
      // 开关的滑块位置通过 justifyContent 控制
      .justifyContent(this.isOn ? FlexAlign.End : FlexAlign.Start)
      .alignItems(VerticalAlign.Center)
      .padding(2)
      .backgroundColor(this.isOn ? '#7b4f9a' : '#ddd')
      .borderRadius(10)
      .margin({ top: 6 })
      .onClick(() => {
        this.isOn = !this.isOn;   // 点击切换
      })
    }
    .alignItems(HorizontalAlign.Center)
    .width(52)
    .padding(8)
    .backgroundColor('#f8f9fc')
    .borderRadius(10)
  }
}

交互实现要点：

• @State 装饰器：@State private isOn 使变量成为响应式状态。当 isOn 变化时，框架自动重新渲染该组件。
• aboutToAppear 生命周期：在组件创建时，从 item.isOn 初始值同步到 @State 变量。
• 开关控件原理：开关本质上是一个小型的 Row 容器，其内部圆点的对齐方式通过 justifyContent(End/Start) 控制。开关开启时圆点居右，关闭时圆点居左，背景色也随之变化。
• 固定宽度 52vp：与 MetricCard 同理，确保 SpaceEvenly 间距计算准确。

---

五、七个演示区逐段解析

5.1 演示一：仪表盘指标（4 项完全等距）

Row() {
  ForEach(this.metricItems, (item: MetricItem) => {
    MetricCard({ item: item })
  })
}
.justifyContent(FlexAlign.SpaceEvenly)  // ★ 完全等距 ★
.alignItems(VerticalAlign.Center)
.width('100%')
.padding({ top: 16, bottom: 16 })
.backgroundColor('#f5f8fa')
.borderRadius(14)
.border({ width: 1, color: '#e0e8f0' })

4 个宽度 64vp 的指标卡片在容器中等间距排列。观众可以清晰看到：左边距、卡片之间、右边距的宽度完全一致。

仪表盘场景非常适合 SpaceEvenly，因为每个指标（浏览量、访客数、平均时长、转化率）在视觉上同等重要。SpaceEvenly 赋予每个卡片完全相同的「呼吸空间」，没有任何一个卡片更加突出或边缘化。

5.2 演示二：快速设置栏（5 项可交互开关）

Row() {
  ForEach(this.settingItems, (item: SettingItem, idx: number) => {
    ToggleSetting({ item: item, isOn: item.isOn })
  })
}
.justifyContent(FlexAlign.SpaceEvenly)
.alignItems(VerticalAlign.Center)
.width('100%')
.padding({ top: 12, bottom: 12 })
.backgroundColor('#fafbfc')
.borderRadius(14)
.border({ width: 1, color: '#e0e4e8' })

5 个设置开关（通知、音效、隐私、深色、WiFi）在 Row 中完全等间距排列，每个开关可以点击切换状态。这是本示例中唯一包含交互逻辑的演示区。

交互验证方法：运行应用后，点击任意一个开关，它的圆点会从左侧滑动到右侧（或反之），背景色从灰色变为紫色（或反之），说明 @State 响应式机制正常工作。

5.3 演示三：底部导航栏（4 Tab 等距）

Row() {
  ForEach(this.navIconItems, (item: IconBtn) => {
    Column() {
      Text(item.icon).fontSize(22).lineHeight(28)
      Text(item.label).fontSize(10).fontColor('#888').margin({ top: 2 })
    }
    .alignItems(HorizontalAlign.Center)
  })
}
.justifyContent(FlexAlign.SpaceEvenly)
.alignItems(VerticalAlign.Center)
.width('100%')
.height(56)
.backgroundColor('#ffffff')
.borderRadius(12)
.border({ width: 1, color: '#e0e4e8' })

底部导航栏是 SpaceEvenly 和 SpaceBetween 的「必争之地」。两者的选择取决于设计需求：

• SpaceBetween 使首尾 Tab 贴边，适合「满铺」设计，信息密度更高。
• SpaceEvenly 使所有 Tab 间距严格对称（含两端），适合「精致」设计，视觉更均衡。

本演示采用 SpaceEvenly，强调其极致对称的视觉效果。56vp 的高度符合 Material Design 的底部导航栏规范。

5.4 演示四：三大空间分配型精细对比

这是整个示例中技术深度最高的演示区。使用完全相同的 3 个色块（A、B、C），分别用 SpaceBetween、SpaceAround、SpaceEvenly 排列，并在底部附带了间距公式对比表和 ASCII 示意图。

三种排列的核心代码结构完全一致，仅 justifyContent 参数不同：

// SpaceBetween
Row() { Text('A')... Text('B')... Text('C')... }
.justifyContent(FlexAlign.SpaceBetween)
...

// SpaceAround
Row() { Text('A')... Text('B')... Text('C')... }
.justifyContent(FlexAlign.SpaceAround)
...

// SpaceEvenly（★ 核心 ★）
Row() { Text('A')... Text('B')... Text('C')... }
.justifyContent(FlexAlign.SpaceEvenly)
.border({ width: 2, color: '#2c7a5a' })  // 绿色边框高亮

底部附带的间距公式对比区块：

Text('Between').fontSize(10).fontColor('#4a90d9').width(80)
Text('间距数 = N-1 = 2').fontSize(10).fontColor('#888')

Text('Around').fontSize(10).fontColor('#7b4f9a').width(80)
Text('间距数 = N   = 3，两端 = 内部 ÷ 2').fontSize(10).fontColor('#888')

Text('Evenly ').fontSize(10).fontColor('#2c7a5a').width(80)
Text('间距数 = N+1 = 4，全部相等').fontSize(10).fontColor('#888')

以及 ASCII 示意图：

┌ Evenly ──────────────────────────┐
│  │ A │  │ B │  │ C │  │
│  ↑    ↑    ↑    ↑    ↑  │
│  间距 间距 间距 间距  │
│  ①   ②   ③   ④    │
│  全部相等！         │
└─────────────────────────────┘

这个 ASCII 示意图使用 fontFamily('Courier New') 等宽字体绘制，在模拟器和真机上都能正确显示。

5.5 演示五：六种 FlexAlign 一览

演示五以「表格形式」展示全部六种 FlexAlign 排列方式。每种排列都用完全相同的 3 个色块（■），左侧标注编号和名称，右侧标注简短描述。

核心实现模式（以 Start 为例）：

Row() {
  Text('① Start').fontSize(11).fontColor('#888').width(60)
  Row() {
    Text('■').fontSize(14).fontColor('#4a90d9')
    Text('■').fontSize(14).fontColor('#f5a623')
    Text('■').fontSize(14).fontColor('#7ed321')
  }
  .justifyContent(FlexAlign.Start)
  .layoutWeight(1)       // ★ 色块组占满剩余空间
  Text('靠左').fontSize(10).fontColor('#aaa').width(30)
}
.alignItems(VerticalAlign.Center)
.width('100%').height(28).margin({ bottom: 4 })

关键设计：layoutWeight(1) 的使用。色块组所在的 Row 设置了 layoutWeight(1)，这会使其「吃掉」左侧标签和右侧描述之间的所有剩余空间。只有这样，内部的 SpaceEvenly 等排列方式才有足够的空间展示其间距效果。

第六种 SpaceEvenly 使用绿色背景高亮，形成对比焦点。

观众可以观察到从 ①→⑥ 的视觉演化趋势：从「密集」到「分散」，从「拥挤」到「宽松」。

5.6 演示六：子组件数量对 SpaceEvenly 的影响

通过展示 2 个、3 个、4 个子组件在 SpaceEvenly 下的表现，直观验证 N+1 公式：

2 个组件 → 3 个间距（左端 + 中间 + 右端）
3 个组件 → 4 个间距
4 个组件 → 5 个间距
N 个组件 → N+1 个间距，每个间距 = 剩余空间 ÷ (N+1)

5.7 演示七：音乐播放器控制栏（真实场景）

这是最贴近真实产品的演示区。模拟了一个音乐播放器的底部控制栏，包含歌曲信息区（歌曲名、歌手、进度条）和 5 个播放控制按钮（⏮ ⏪ ⏸ ⏩ ⏭）。

Row() {
  Column() { Text('⏮').fontSize(20)... }.width(36)   // 回退
  Column() { Text('⏪').fontSize(22)... }.width(36)   // 快退
  Column() { Text('⏸').fontSize(28)                  // 播放（居中突出）
    .backgroundColor('#2c7a5a').borderRadius(20)
    .width(40).height(40).fontColor('#ffffff')... }.width(40)
  Column() { Text('⏩').fontSize(22)... }.width(36)   // 快进
  Column() { Text('⏭').fontSize(20)... }.width(36)   // 跳转
}
.justifyContent(FlexAlign.SpaceEvenly)  // ★ 5 按钮等距 ★
.alignItems(VerticalAlign.Center)
.width('100%').height(64)

设计亮点：

• 中间播放按钮突出：居中按钮（⏸）字号更大（28fp）、带圆形绿色背景，视觉上突出其「主操作」地位。尽管宽度为 40vp 略大于其他按钮的 36vp，SpaceEvenly 仍能正确分配间距。
• 空 Text 占位：每个按钮列中都有 Text('').fontSize(8)，确保所有按钮列的 build() 返回值结构一致，高度对齐。
• 进度条使用 layoutWeight：Row().layoutWeight(0.6) 和 Row().layoutWeight(0.4) 实现 60%/40% 的已播放/未播放比例。

---

六、关键技术要点总结

6.1 核心规则

SpaceEvenly 的间距数量 = N + 1
两端和中间的间距宽度完全一致
间距宽度 = 剩余空间 ÷ (N + 1)

6.2 六个关键事实

事实一：SpaceEvenly 的间距数最多。
N 个子组件产生 N+1 个间距。比 SpaceAround 多一个（两端多出的间距），比 SpaceBetween 多两个。

事实二：SpaceEvenly 的间距宽度最小。
在相同条件下，剩余空间被分成最多份，因此每份的宽度最小：

SpaceEvenly 间距 < SpaceAround 间距 < SpaceBetween 间距

事实三：单个组件也能用 SpaceEvenly。
当 N=1 时，SpaceBetween 的 N-1=0 个间距无效果，SpaceAround 产生 1 个间距（两端半距），而 SpaceEvenly 产生 2 个间距（两端全距），让单个组件完美居中。

事实四：SpaceEvenly 不改变子组件尺寸。
它只分配间距，不拉伸组件。需要弹性伸缩时应使用 layoutWeight。

事实五：固定宽度子组件效果最佳。
固定宽度让 SpaceEvenly 的间距计算结果完全可预测，避免「字数多的组件占用更多间距」的不均匀感。

事实六：SpaceEvenly 可用于 Column 容器。
在 Column 中使用 justifyContent(FlexAlign.SpaceEvenly) 可实现垂直方向的完全等间距，适合「顶部-中部-底部」三段式布局。

6.3 三种空间分配型排列选择指南

需求场景	推荐排列	原因
导航栏，子组件需要紧贴边缘	SpaceBetween	首尾贴边，空间利用率高
工具栏，需要最大操作间距	SpaceBetween	间距数最少，单个间距最大
评分栏，两端需要适度留白	SpaceAround	两端半距，视觉均衡
图标面板，每个图标等权重	SpaceAround	每个图标两侧间距相等
仪表盘，极致对称要求	SpaceEvenly	所有间距完全相等
单个组件居中	SpaceEvenly	N≥1 时始终有效

---

七、常见错误与调试

7.1 典型错误

错误一：期望 SpaceEvenly 让子组件等宽

Row() {
  Text('短').fontSize(14)
  Text('很长很长的文字').fontSize(14)
}
.justifyContent(FlexAlign.SpaceEvenly)
// ❌ 子组件不会被拉伸到等宽

纠正：SpaceEvenly 分配的是「间距」，不是「宽度」。等宽应使用 layoutWeight(1)。

错误二：忘记设置 width('100%')

Row() {
  Text('A'); Text('B'); Text('C')
}
.justifyContent(FlexAlign.SpaceEvenly)
// ❌ 如果 Row 宽度等于子组件总宽度，剩余空间为零

纠正：设置 width('100%') 或固定宽度值。

错误三：在子组件上额外设置 margin

Row() {
  Text('A').margin({ right: 10 })  // ❌ 手动间距干扰自动分配
  Text('B').margin({ left: 5 })    // ❌
}
.justifyContent(FlexAlign.SpaceEvenly)

纠正：移除子组件上的水平 margin，完全依赖 SpaceEvenly 分配间距。

7.2 调试技巧

1. 使用有色背景：给 Row 设置半透明背景色，直观观察容器边界。
2. 临时添加宽度标注：在每个子组件后加 Text('W=' + width) 查看实际宽度。
3. 先用 SpaceBetween 做对照：如果 SpaceEvenly 不正常，改 SpaceBetween——如果还不正常，问题不在排列方式本身。
4. 逐层排查：容器宽度 → padding → 子组件宽度 → 子组件数量，由外到内逐层检查。

---

八、最佳实践

8.1 SpaceEvenly 的四大黄金搭档

1. 固定宽度子组件：子组件 width(64) 等方式固定宽度，确保间距计算可预测。
2. width('100%') 容器：Row 容器必须设置宽值，确保有足够的剩余空间。
3. 对称视觉设计：适合图标、卡片等需要均衡视觉权重的场景。
4. ForEach 动态列表：和数据驱动的列表天然契合，新增或删除子组件时间距自动重新计算。

8.2 与其他属性的组合

SpaceEvenly + layoutWeight
  → 部分子组件弹性伸缩，部分等间距排列
  → 示例：固定图标 + 弹性搜索框 + 固定按钮

SpaceEvenly + Column 容器
  → 垂直方向完全等间距
  → 示例：三段式布局「顶部-中部-底部」

SpaceEvenly + @State 交互
  → 可交互的等距排列
  → 示例：设置开关、评分选择器

8.3 延伸学习

掌握 SpaceEvenly 后，建议继续探索：

• Column + SpaceEvenly：垂直方向的完全等间距
• Flex 容器：自定义主轴方向，更灵活的弹性布局
• Grid 网格：二维规则排列，适合相册、商品展示
• Stack 层叠：Z 轴叠放，悬浮按钮、遮罩层
• 响应式布局：不同屏幕尺寸下的适配策略

---

九、完整代码清单

以下为 RowSpaceEvenlyPage 主页面 build() 方法的完整骨架，标注了每个演示区的起止行号：

build()                        // 行 173
  Column()                     // 行 175 (最外层)
    标题区 Column()             // 行 177-192
    Scroll()                   // 行 195
      Column()                 // 行 196 (滚动内容)
        ├── 演示一 Column      // 行 200-237
        ├── 演示二 Column      // 行 242-278
        ├── 演示三 Column      // 行 283-329
        ├── 演示四 Column      // 行 334-469
        ├── 演示五 Column      // 行 474-602
        ├── 演示六 Column      // 行 607-720
        └── 演示七 Column      // 行 725-824
      }                        // 行 825
    }                          // 行 828-830
    说明面板 Column()           // 行 833-892
  }                            // 行 900-903
}                              // 行 904-905

完整源文件位于 entry/src/main/ets/pages/RowSpaceEvenlyDemo.ets，共计 905 行、33KB。

---

十、总结

SpaceEvenly 是鸿蒙 ArkTS 布局工具箱中「最对称」的排列方式。它与 SpaceBetween、SpaceAround 共同构成了「空间分配型排列」的完整家族：

排列	间距数	两端	视觉	典型场景
SpaceBetween	N-1	贴边	紧凑	导航栏、工具栏
SpaceAround	N	半距	均衡	评分栏、标签组
SpaceEvenly	N+1	全距	对称	仪表盘、播放器

三者的选择本质上是一个简单的权衡：你希望剩余空间如何分配到 N+1 个候选位置中？ 两端要不要？要多少？回答这个问题，就能在三种排列中做出正确选择。

本文通过 7 个层层递进的演示区，从基础的仪表盘指标到真实的音乐播放器控制栏，覆盖了 SpaceEvenly 的全部关键应用场景。配合完整的 ArkTS 源码和详细的注释，读者可以一边阅读文章一边在 DevEco Studio 中运行验证，理论与实践结合，快速掌握这一布局模式。