鸿蒙原生ArkTS布局方式之RowSpaceBetween主轴分布

在这里插入图片描述
在这里插入图片描述

一、引言

在鸿蒙原生应用开发中，布局是构建用户界面的基石。HarmonyOS NEXT 全面启用了 ArkTS 作为主力开发语言，并提供了丰富且强大的声明式布局体系。其中，Row 容器组件配合 justifyContent(FlexAlign.SpaceBetween) 是最常用、最实用的主轴分布方式之一。它能简洁优雅地实现「两端对齐、中间均分」的布局效果，广泛适用于导航栏、工具栏、列表项、表单操作区等高频场景。

本文将从基础概念出发，由浅入深地剖析 Row 容器的主轴对齐机制，聚焦 FlexAlign.SpaceBetween 的行为特性，并结合完整代码示例和对比实验，帮助开发者透彻理解并灵活运用这一布局方式。

二、Row 容器基础

2.1 什么是 Row

Row 是 ArkTS 中最基本的线性布局容器之一，负责在水平方向（主轴） 上依次排列子组件。它的核心特点包括：

  • 主轴（Main Axis）：水平方向，从左到右；
  • 交叉轴（Cross Axis）：垂直方向，默认拉伸子组件高度以填满容器；
  • 线性排列：子组件按照添加顺序从左到右依次排列；
  • 可嵌套：Row 内部可以嵌套 Column、Row、Stack 等任意容器组件。

Row 的声明语法非常简洁：

Row() {
  // 子组件列表
}
.width('100%')
.height(56)

2.2 Row 的核心属性

Row 提供了丰富的属性来控制子组件的排列方式，最重要的几个包括：

属性 类型 说明
justifyContent FlexAlign 主轴对齐方式，决定子组件在水平方向上的分布策略
alignItems VerticalAlign 交叉轴对齐方式，决定子组件在垂直方向上的对齐位置
space Length 子组件之间的固定间距（若设置则覆盖 justifyContent 的间隙计算）
reverse boolean 是否反转主轴方向
width / height Length 容器的尺寸

2.3 子组件的尺寸行为

Row 中的子组件默认按照自身内容尺寸排列。如果子组件未显式设置宽度，它会尽可能缩小到内容所需的最小宽度；如果设置了固定宽度，则按设定值呈现。Row 本身如果不设置 width('100%') 或固定宽度，其宽度会被子组件撑开，此时 justifyContent 无法产生两端对齐的效果——因为没有多余空间可以分配。这是初学者最容易踩的坑，后文会详细说明。

三、FlexAlign 枚举详解

FlexAlign 是定义在 @kit.ArkUI 中的枚举类型，用于控制 Flex 容器（Row / Column）主轴上的子组件分布方式。它包含以下六个成员：

3.1 FlexAlign.Start（默认值）

子组件从主轴起始端（左端）开始依次排列，所有子组件紧贴左侧，右侧留空。这是 Row 的默认行为，等同于传统的左对齐。

3.2 FlexAlign.Center

子组件在主轴方向上居中对齐，整体居于容器正中央，两侧空间相等。

3.3 FlexAlign.End

子组件向主轴结束端（右端）对齐，所有子组件紧贴右侧，左侧留空。等同于右对齐。

3.4 FlexAlign.SpaceBetween（本文重点）

子组件两端对齐，首个子组件紧贴起始端，末个子组件紧贴结束端，相邻子组件之间的间隙相等。 这是实现「分散对齐」的核心值。

3.5 FlexAlign.SpaceAround

每个子组件两侧的空间相等。这意味着首尾子组件与容器边缘之间的间隙是子组件之间间隙的一半（因为每个子组件左右各分一半）。

3.6 FlexAlign.SpaceEvenly

所有间隙（包括子组件与容器边缘的间隙）完全相等。首尾子组件与边缘之间同样留有间隙。

3.7 六种对齐方式对比速览

假设容器宽度为 400px，有三个宽度为 60px 的子组件 A、B、C：

对齐方式 A 位置 B 位置 C 位置 间隙特征
Start 0px 60px 120px 无间隙，全部靠左
Center 110px 170px 230px 整体居中
End 220px 280px 340px 全部靠右
SpaceBetween 0px 170px 340px 首尾贴边，中间间隙 = 110px
SpaceAround 27.5px 197.5px 367.5px 每侧间隙 = 27.5px，中间 = 55px
SpaceEvenly 55px 175px 295px 所有间隙 = 55px

注：以上数据为理想计算，实际渲染可能因 rounding 略有偏差。

四、SpaceBetween 的行为剖析

4.1 工作原理

当 Row 设置了 justifyContent(FlexAlign.SpaceBetween) 后，布局引擎执行以下计算步骤：

  1. 计算子组件总宽度：遍历所有子组件，累加它们的宽度（含 margin、border）；
  2. 计算剩余空间：剩余空间 = 容器总宽度 - 子组件总宽度；
  3. 计算间隙数：间隙数 = 子组件数量 - 1（当子组件数量 >= 2 时）；
  4. 计算单位间隙：单位间隙 = 剩余空间 / 间隙数；
  5. 放置子组件：第一个子组件放在起始位置，后续每个子组件的位置 = 前一个子组件的结束位置 + 单位间隙。

从算法可以看出，只有当子组件数量 >= 2 且 Row 有明确宽度时，SpaceBetween 才会产生视觉效果。如果只有一个子组件，它不会有任何可见变化（因为间隙数为 0）；如果 Row 宽度被子组件撑满（剩余空间为 0），效果等同于 Start。

4.2 与 SpaceEvenly / SpaceAround 的本质区别

这三者很容易混淆，但它们的差异在实际 UI 设计中非常关键：

  • SpaceBetween：首尾子组件「贴边」，适合需要对齐到屏幕两侧边缘的场景（如顶部导航栏的返回按钮和更多按钮）；
  • SpaceEvenly：所有间隙均匀，首尾留白，适合需要视觉上完全对称的按钮组；
  • SpaceAround：介于两者之间，每个子组件周围空间相等，首尾间隙为内部间隙的一半。

选择哪一种取决于设计意图：是要「顶天立地」的两端对齐，还是要「呼吸感」的均匀分布。

4.3 子组件数量对齐效果的影响

SpaceBetween 的行为会随着子组件数量的变化而产生不同的视觉感受：

  • 2 个子组件：效果最清晰——左一个、右一个，中间完全拉开。这是最常见的用法，如标题栏的「返回 + 标题 + 操作」场景中，如果将标题和操作按钮分别封装，就能利用 SpaceBetween 自然撑开。
  • 3 个子组件：左、中、右均匀排布，中间的子组件自然居中（因为两侧间隙相等）。这在三段式导航中非常实用。
  • 4 个及以上子组件：所有子组件之间等距，首尾贴边。如果子组件数量较多，单位间隙会变小，横向空间紧张时可能导致内容拥挤。

4.4 特殊情况处理

当子组件的总宽度超过了 Row 容器的宽度时，SpaceBetween 无法再分配空间，子组件会按照 Start 方式排列并可能溢出容器。此时需要：

  • 使用 .clip(true) 裁剪溢出的内容；
  • 或者缩小子组件尺寸或使用 layoutWeight 进行弹性缩放；
  • 或者在外层包裹 Scroll 容器支持横向滚动。

五、代码实战：完整示例详解

以下是我们为演示 SpaceBetween 布局编写的完整代码。该文件位于 entry/src/main/ets/pages/RowSpaceBetween.ets，通过首页按钮导航进入。

5.1 文件结构与导入

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

这里导入了路由模块，以便页面间跳转。在 ArkTS 中，@kit.ArkUI 是核心 UI 能力包，包含了 router、FlexAlign、Row、Column、Text、Button 等所有常用声明式组件和 API。

5.2 页面装饰器与结构体

@Entry
@Component
struct RowSpaceBetween {
  build() {
    // ...
  }
}
  • @Entry：标记该组件为页面入口，允许通过 router 跳转到此页面；
  • @Component：声明这是一个可复用的自定义组件；
  • struct RowSpaceBetween：使用结构体定义组件，包含 build() 方法描述 UI 结构。

5.3 外层容器搭建

Column() {
  // 所有内容...
}
.width('100%')
.height('100%')
.backgroundColor('#F5F5F5')
.scrollable(ScrollDirection.Vertical)

外层使用 Column 垂直排列所有演示区块，并设置滚动能力，确保内容超出屏幕高度时用户仍可向下浏览。

5.4 示例一：2 个子组件

这是最典型的 SpaceBetween 用法：

Row() {
  Text('左侧')
    .width(80).height(50)
    .backgroundColor('#007AFF')
    .fontColor(Color.White)
    .textAlign(TextAlign.Center)
    .borderRadius(8)

  Text('右侧')
    .width(80).height(50)
    .backgroundColor('#FF3B30')
    .fontColor(Color.White)
    .textAlign(TextAlign.Center)
    .borderRadius(8)
}
.width('100%')
.height(60)
.justifyContent(FlexAlign.SpaceBetween)
.padding({ left: 16, right: 16 })

关键点：

  • .width('100%')：没有这一行，Row 宽度由子组件撑开为 160px（80+80），SpaceBetween 无意义；
  • .justifyContent(FlexAlign.SpaceBetween)：核心属性，触发两端对齐分布；
  • .padding({ left: 16, right: 16 })：左右留 16vp 内边距，让首尾组件不与屏幕边缘紧贴，视觉更舒适。

这就是一个典型的「语言选择页面的取消和确认按钮布局」，或是「设置页面的开关项左右标签布局」。

5.5 示例二：3 个子组件

Row() {
  Text('左').width(60).height(50)
    .backgroundColor('#34C759')
    .fontColor(Color.White).textAlign(TextAlign.Center).borderRadius(8)
  Text('中').width(60).height(50)
    .backgroundColor('#FF9500')
    .fontColor(Color.White).textAlign(TextAlign.Center).borderRadius(8)
  Text('右').width(60).height(50)
    .backgroundColor('#AF52DE')
    .fontColor(Color.White).textAlign(TextAlign.Center).borderRadius(8)
}
.width('100%')
.height(60)
.justifyContent(FlexAlign.SpaceBetween)
.padding({ left: 16, right: 16 })

三个子组件等距分布时，中间的子组件自然居中。这在底部分页导航（三段式 Tab）中非常常见。

注意：三个子组件各自独立，互不依赖。如果希望中间的组件精确居中（而不是仅仅因为左右对称而居中），则需要使用 .alignItems(HorizontalAlign.Center) + 固定宽度的方案，但 SpaceBetween 在 3 个子组件时的优势就是 “免费居中”。

5.6 示例三：嵌套分组

Row() {
  // 左侧组
  Row() {
    Text('登录').width(60).height(40).backgroundColor('#007AFF')
      .fontColor(Color.White).textAlign(TextAlign.Center).borderRadius(6)
    Text('注册').width(60).height(40).backgroundColor('#34C759')
      .fontColor(Color.White).textAlign(TextAlign.Center).borderRadius(6)
      .margin({ left: 8 })
  }
  .height(40)

  // 右侧组
  Row() {
    Text('设置').width(60).height(40).backgroundColor('#FF9500')
      .fontColor(Color.White).textAlign(TextAlign.Center).borderRadius(6)
    Text('关于').width(60).height(40).backgroundColor('#AF52DE')
      .fontColor(Color.White).textAlign(TextAlign.Center).borderRadius(6)
      .margin({ left: 8 })
  }
  .height(40)
}
.width('100%')
.height(56)
.justifyContent(FlexAlign.SpaceBetween)
.padding({ left: 16, right: 16 })

这是一个非常实用的模式：利用嵌套 Row 将子组件「分组」，SpaceBetween 作用于外层 Row 的两个子组件（即两个内层 Row），从而实现「左侧一组按钮、右侧一组按钮」的效果。

这种结构在以下场景广泛使用：

  • 列表项的操作栏（左侧：编辑/删除，右侧：分享/收藏）；
  • 表单页面的按钮区域（左侧：重置，右侧：提交）；
  • 卡片组件的底部操作区（左侧：点赞/评论，右侧：更多/分享）。

5.7 对比示例：SpaceEvenly

Row() {
  Text('A').width(50).height(40).backgroundColor('#FF3B30')
    .fontColor(Color.White).textAlign(TextAlign.Center).borderRadius(6)
  Text('B').width(50).height(40).backgroundColor('#007AFF')
    .fontColor(Color.White).textAlign(TextAlign.Center).borderRadius(6)
  Text('C').width(50).height(40).backgroundColor('#34C759')
    .fontColor(Color.White).textAlign(TextAlign.Center).borderRadius(6)
}
.width('100%')
.height(50)
.justifyContent(FlexAlign.SpaceEvenly)
.padding({ left: 16, right: 16 })

这个示例紧跟在 SpaceBetween 示例之后，可以让开发者直观对比两种对齐方式的差异。SpaceEvenly 会在首尾也留出等宽间隙，整体观感更「松散」、更有「呼吸感」。

文字说明区进一步解释了差异：

SpaceBetween：首尾贴边，中间间隙均分
SpaceEvenly：首尾不贴边，所有间隙（含首尾）均分

六、实际应用场景

6.1 顶部导航栏

最经典的应用场景。左侧放置返回按钮（或菜单按钮），右侧放置标题或操作按钮：

Row() {
  Row() {
    Image($r('app.media.ic_back'))
      .width(24).height(24)
    Text('返回')
      .fontSize(16)
      .fontColor(Color.Blue)
  }

  Text('页面标题')
    .fontSize(18)
    .fontWeight(FontWeight.Bold)

  Button('保存')
    .fontSize(14)
    .height(32)
}
.width('100%')
.height(48)
.justifyContent(FlexAlign.SpaceBetween)
.padding({ left: 16, right: 16 })

这里使用嵌套 Row 将左侧的返回按钮和文字打包成一个整体，中间标题居中，右侧保存按钮靠右。SpaceBetween 天然将这三部分拉开。

6.2 列表项操作栏

在联系人列表、文件列表等场景，每条 item 右侧通常有操作按钮：

Row() {
  Column() {
    Text('张三').fontSize(16)
    Text('138****1234').fontSize(13).fontColor('#999')
  }

  Row() {
    Image($r('app.media.ic_call')).width(24).height(24)
    Image($r('app.media.ic_msg')).width(24).height(24)
  }
  .space(16)
}
.width('100%')
.height(64)
.justifyContent(FlexAlign.SpaceBetween)
.padding({ left: 16, right: 16 })

6.3 底部操作栏

页面底部常有一组操作按钮，需要左右分开：

Row() {
  Button('取消')
    .width(120)
    .backgroundColor('#F5F5F5')
    .fontColor('#666')

  Button('确定')
    .width(120)
    .backgroundColor('#007AFF')
    .fontColor(Color.White)
}
.width('100%')
.height(48)
.justifyContent(FlexAlign.SpaceBetween)
.padding({ left: 32, right: 32 })

6.4 价格展示区

电商详情页的价格区域通常在左侧显示原价和现价，右侧显示销量或促销标签：

Row() {
  Column() {
    Text('¥199.00')
      .fontSize(28)
      .fontColor('#FF3B30')
      .fontWeight(FontWeight.Bold)
    Text('¥399.00')
      .fontSize(14)
      .fontColor('#999')
      .decoration({ type: TextDecorationType.LineThrough })
  }

  Text('已售 5,328 件')
    .fontSize(13)
    .fontColor('#999')
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.padding({ left: 16, right: 16 })

6.5 设置页面开关行

几乎每个设置页面都有「标签 + 开关」的布局：

Row() {
  Text('Wi-Fi')
    .fontSize(16)

  Text('已连接')
    .fontSize(14)
    .fontColor('#34C759')
}
.width('100%')
.height(48)
.justifyContent(FlexAlign.SpaceBetween)
.padding({ left: 16, right: 16 })

这种「左文右文」或「左文右组件（Toggle/Switch）」的结构是 SpaceBetween 最舒服的应用场景之一。

七、常见陷阱与避坑指南

7.1 必须为 Row 设置明确的宽度

这是 最常犯的错误。如果不设置宽度，Row 会被子组件撑开，宽度等于所有子组件宽度之和。此时剩余空间为 0，justifyContent 的 SpaceBetween 不会产生任何效果。

错误写法：

Row() {
  Text('左').width(80)
  Text('右').width(80)
}
// 没有设置 .width('100%')
.justifyContent(FlexAlign.SpaceBetween) // ❌ 无效

正确写法：

Row() {
  Text('左').width(80)
  Text('右').width(80)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween) // ✅ 生效

7.2 padding 与间距的取舍

设置 justifyContent(FlexAlign.SpaceBetween) 后，首尾子组件会贴边。如果希望留出边距，应使用 .padding() 而不是加大首尾子组件的 margin。padding 作用于容器边缘，不会干扰 SpaceBetween 的间隙计算。

推荐做法：

Row() {
  Text('左')
  Text('右')
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.padding({ left: 16, right: 16 }) // ✅ 统一控制边距

而非：

// ❌ 不推荐：用 margin 模拟边距
Text('左').margin({ left: 16 })
Text('右').margin({ right: 16 })

7.3 FlexAlign 的拼写

这是开发者最容易遇到的编译错误。FlexAlign.SpaceBetween 的大小写和拼写必须准确：

  • ✅ FlexAlign.SpaceBetween
  • ✅ FlexAlign.SpaceEvenly
  • ✅ FlexAlign.SpaceAround
  • ❌ FlexAlign.Spacebetween（小写 b）
  • ❌ FlexAlign.Space_Between（下划线）

提示：利用 IDE 的自动补全功能可以避免拼写错误。

7.4 space 属性与 justifyContent 的冲突

Row 同时提供了 .space() 作为便捷属性来设置子组件之间的间距。但请注意：space 属性与 justifyContent 互斥。如果同时设置了 space 和 justifyContent(SpaceBetween)，space 会覆盖 SpaceBetween 的间隙计算。

// ❌ 冲突：space(20) 覆盖了 SpaceBetween
Row() {
  Text('A').width(60)
  Text('B').width(60)
  Text('C').width(60)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.space(20) // ❌ 此时 SpaceBetween 的间隙均分逻辑被覆盖

如果需要固定间距，直接用 .space() 即可；如果需要分布式对齐，不要混用 .space()。

7.5 子组件溢出

当子组件数量较多或宽度较大时，即使 SpaceBetween 均分间隙，也可能出现子组件总宽度超过容器宽度的情况。此时：

  • 检查是否子组件设置了过大的固定宽度；
  • 使用 layoutWeight(1) 让子组件弹性缩放；
  • 使用 .constraintSize({ maxWidth: '50%' }) 限制最大宽度；
  • 或者改用 Scroll + Row 实现横向滚动。

八、性能与最佳实践

8.1 布局性能

justifyContent(FlexAlign.SpaceBetween) 的布局计算是 O(n) 复杂度的，n 为子组件数量。它只需要一次遍历即可计算所有子组件的位置，因此性能开销很小，即使有几十个子组件也不会成为布局瓶颈。

但在嵌套场景中要注意：

  • 尽量不要在 List 或 Grid 的每个 item 内部嵌套过深的 Row/Column 层级；
  • 每个 Row 都调用 justifyContent 是一个轻量操作，不影响渲染性能；
  • 避免在频繁刷新的场景中动态增删子组件（会导致重新布局计算）。

8.2 代码可维护性

建议将常用的 SpaceBetween 布局封装为可复用组件：

@Component
struct SpaceBetweenRow {
  @BuilderParam content: () => void = this.emptyBuilder;

  @Builder
  emptyBuilder() {}

  build() {
    Row() {
      this.content()
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .alignItems(VerticalAlign.Center)
    .padding({ left: 16, right: 16 })
  }
}

使用方式：

SpaceBetweenRow() {
  Text('左侧内容')
  Text('右侧内容')
}

通过这种方式，可以统一管理全局的布局风格，减少重复代码。

8.3 响应式适配

在折叠屏或平板等大屏设备上，width('100%') 可能导致内容拉伸过宽，视觉上不舒适。建议结合 .constraintSize({ maxWidth: 720 }) 限制最大宽度，并配合居中容器使用：

Column() {
  Row() {
    // SpaceBetween 内容
  }
  .width('100%')
  .constraintSize({ maxWidth: 720 })
  .justifyContent(FlexAlign.SpaceBetween)
}
.alignItems(HorizontalAlign.Center)
.width('100%')

这样在大屏上内容会居中且不超过 720vp，两边留白，体验更佳。

九、与其他主流框架的对比

对于有多端开发经验的开发者，以下对比可以帮助快速理解：

概念 HarmonyOS ArkTS Flutter React Native / CSS Flexbox SwiftUI
容器 Row Row display: flex; flex-direction: row HStack
两端对齐 FlexAlign.SpaceBetween MainAxisAlignment.spaceBetween justify-content: space-between .frame(maxWidth: .infinity, alignment: .leading) + Spacer
等距分布 FlexAlign.SpaceEvenly MainAxisAlignment.spaceEvenly justify-content: space-evenly N/A (用 Spacer 模拟)
周围等距 FlexAlign.SpaceAround MainAxisAlignment.spaceAround justify-content: space-around N/A

可以看到，鸿蒙 ArkTS 的 FlexAlign 枚举与 Flutter 的 MainAxisAlignment 高度对应，概念非常接近。如果你熟悉 Flutter 或 CSS Flexbox，上手 ArkTS 的布局体系几乎不需要额外的学习成本。

十、扩展：Column 中的 SpaceBetween

虽然本文聚焦于 Row，但 justifyContent(FlexAlign.SpaceBetween) 同样适用于 Column 容器（垂直主轴）。在 Column 中，SpaceBetween 让子组件在垂直方向上两端对齐，第一个子组件顶部贴边，最后一个子组件底部贴边，中间间隙均分。

典型场景：页面布局中，将标题固定在顶部，底部按钮固定在底部，中间内容区自动填满。

Column() {
  Text('顶部标题').fontSize(20)

  // 中间内容区
  List() { /* ... */ }
  .layoutWeight(1)
  .width('100%')

  Button('底部确定按钮').width('100%')
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.SpaceBetween)

这个模式常被称为「Holy Grail Layout」的简化版——上中下三明治结构。配合 .layoutWeight(1) 让中间区域弹性填充，非常实用。

十一、综合示例：仿通讯录详情页

最后，我们用一个综合示例来展示 SpaceBetween 在实际页面中的运用。该页面模拟了一个通讯录联系人的详情页，从上到下包含标题栏、信息展示区和底部操作栏，每个部分都使用了 SpaceBetween 进行两端对齐布局。

@Entry
@Component
struct ContactDetailPage {
  build() {
    Column() {
      // ── 顶部导航栏 ──
      Row() {
        Row() {
          Image($r('app.media.ic_back')).width(20).height(20)
          Text('返回').fontSize(16).fontColor('#007AFF')
        }
        Text('联系人详情').fontSize(18).fontWeight(FontWeight.Bold)
        Text('编辑').fontSize(16).fontColor('#007AFF')
      }
      .width('100%')
      .height(48)
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({ left: 12, right: 12 })

      // ── 个人头像与姓名 ──
      Column() {
        Circle() { /* 头像占位 */ }
          .width(80).height(80).fill('#E0E0E0')
        Text('李小华').fontSize(24).fontWeight(FontWeight.Bold).margin({ top: 8 })
      }
      .alignItems(HorizontalAlign.Center)
      .width('100%')
      .padding({ top: 24, bottom: 24 })

      // ── 信息行 ──
      Row() {
        Text('手机').fontSize(16).fontColor('#666')
        Row() {
          Text('138-0000-8888').fontSize(16)
          Image($r('app.media.ic_call')).width(20).height(20).margin({ left: 8 })
        }
      }
      .width('100%')
      .height(48)
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({ left: 16, right: 16 })

      Row() {
        Text('邮箱').fontSize(16).fontColor('#666')
        Text('lixiaohua@example.com').fontSize(16)
      }
      .width('100%')
      .height(48)
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({ left: 16, right: 16 })

      Row() {
        Text('地址').fontSize(16).fontColor('#666')
        Text('北京市朝阳区XX路XX号').fontSize(16).maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .width(200).textAlign(TextAlign.End)
      }
      .width('100%')
      .height(48)
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({ left: 16, right: 16 })

      // ── 底部操作栏 ──
      Row() {
        Button('发消息')
          .width(160).height(44)
          .backgroundColor('#007AFF').fontColor(Color.White).borderRadius(22)
        Button('打电话')
          .width(160).height(44)
          .backgroundColor('#34C759').fontColor(Color.White).borderRadius(22)
      }
      .width('100%')
      .height(60)
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({ left: 32, right: 32 })
      .margin({ top: 32 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
}

在这个综合示例中，SpaceBetween 出现了多次：

  1. 顶部导航栏：左侧返回按钮、中间标题、右侧编辑按钮——三段式两端对齐；
  2. 手机信息行：左侧标签、右侧「号码 + 呼叫图标」——左文右混合；
  3. 邮箱信息行：左侧标签、右侧邮箱——左文右文；
  4. 地址信息行：左侧标签、右侧地址（带溢出省略）——左文右文；
  5. 底部操作栏：左侧发消息、右侧打电话——两个按钮两端对齐。

这些场景覆盖了 SpaceBetween 的大部分实际用例，充分证明了其作为「两端对齐」布局方案的高频实用性。

十二、总结

Row + justifyContent(FlexAlign.SpaceBetween) 是鸿蒙 ArkTS 开发中不可或缺的基本布局技能。本文从 Row 容器的基本概念出发，深入解析了 FlexAlign 枚举的六种对齐方式，重点剖析了 SpaceBetween 的工作原理和计算逻辑，并通过完整代码示例展示了从 2 个到 4 个子组件的不同布局效果，以及嵌套分组和 SpaceEvenly 对比等进阶技巧。

核心要点回顾：

  1. 必须设置 .width('100%')：SpaceBetween 依赖剩余空间来分配间隙；
  2. 首尾贴边特性：最常用于「左一个、右一个」的导航栏或操作栏场景；
  3. 推荐配合 .padding()：用 padding 控制首尾边距，避免干扰间隙计算；
  4. 嵌套分组技巧：内层 Row 将相关子组件打包，外层 SpaceBetween 分开各组；
  5. 灵活选用其他 FlexAlign 值：SpaceEvenly 适合需要均匀感的按钮组，SpaceAround 适合中等间距需求；
  6. Column 同样适用：垂直方向的两端对齐在「上中下」三明治布局中同样高效。

掌握了 SpaceBetween，你就掌握了一半的鸿蒙应用布局精髓。它是从简单页面到复杂交互界面之间最常用的布局武器之一，值得每一个鸿蒙开发者深入理解和熟练运用。在实际项目中灵活搭配嵌套 Row、padding 控制边距、layoutWeight 弹性缩放等技巧，可以轻松应对绝大多数两端对齐的布局需求。

本文配套完整示例代码位于 entry/src/main/ets/pages/RowSpaceBetween.ets，可在 DevEco Studio 中打开项目运行查看实际效果。

# 华为 # harmonyos # 鸿蒙 # 鸿蒙系统
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

鸿蒙PC：Linux 搭建 Rust 开发环境并实现计算器项目

avatar HarmonyOS开发者社区
cover

鸿蒙原生ArkTS布局方式之ColumnStart垂直排列

avatar HarmonyOS开发者社区

轻规划鸿蒙开发实战10：分布式数据同步深度博弈，UserId 隔离与并发数据冲突消解机

分布式多端无感同步是鸿蒙的核心亮点。但在离线和多端并发编辑场景下，分布式数据库会面临严重的数据版本冲突。本文将深入讲解如何在分布式单版本 KVStore 数据库之上，设计基于 UserId 物理隔离与版本时钟（Vector Clock）的冲突消解机制。

avatar HarmonyOS开发者社区