鸿蒙 ArkTS 布局实战：Row + space + Blank 构建固定间距工具条按钮组
鸿蒙 ArkTS 布局实战：Row + space + Blank 构建固定间距工具条按钮组
一、引言
1.1 背景
在鸿蒙（HarmonyOS）应用开发中，界面布局是用户体验的基石。无论是办公套件中的文档编辑工具栏、图片处理应用的操作面板，还是系统设置页面的功能按钮行，工具条（Toolbar） 都是最常见的 UI 组件之一。工具条的核心诉求是：将一组操作按钮沿水平方向排列，按钮之间保持固定的视觉间距，同时根据布局需要将部分按钮靠左、靠右或两端分散排列。
从 Flutter 迁移到鸿蒙 ArkTS 的开发者经常会问一个问题：“Flutter 中用 Row + SizedBox(width:16) + Spacer 实现固定间距按钮组，ArkTS 中怎么实现？” 本文将以 API 24（HarmonyOS SDK 6.1.1）为目标平台，深入剖析 ArkTS 中 Row 容器的高级用法，重点讲解 Row({ space: 16 }) 与 Blank() 组件的配合使用，并给出三个可直接投入生产的完整示例。
1.2 适用读者
- 正在学习鸿蒙 ArkTS 开发的初学者和中级开发者
- 从 Flutter 或其他跨平台框架转入鸿蒙生态的开发者
- 希望深入了解 ArkTS 布局系统底层机制的进阶开发者
- 需要快速实现标准化工具条组件的鸿蒙应用开发者
1.3 目标平台说明
本文所有代码基于以下环境验证通过：
| 项目 | 版本 |
|---|---|
| HarmonyOS SDK | API 24 (6.1.1) |
| ArkTS 编译器 | es2abc v3.2+ |
| 目标设备 | Phone |
| 开发工具 | DevEco Studio 26.0+ |
| 构建工具 | Hvigor 6.26+ |
1.4 文章结构
本文将按以下层次展开：首先介绍 ArkTS 布局系统的基本概念和 Row 容器的完整 API；然后深入讲解 space 参数和 Blank() 组件的原理与用法；接着通过三个逐步递增难度的实战示例演示完整的工具条构建过程；最后总结最佳实践、常见陷阱以及性能优化建议。
二、ArkTS 布局系统概述
2.1 声明式 UI 范式
ArkTS（Ark TypeScript）是鸿蒙系统原生应用开发的首选语言，它基于 TypeScript 语法扩展了声明式 UI 能力。与传统的命令式 UI 编程（如 Java XML 或 Java Swing）不同，ArkTS 采用 “UI 即状态函数” 的理念：开发者只需描述界面在任意状态下的外观，框架自动处理状态变化时的界面更新。
ArkTS 的声明式 UI 核心由以下三部分组成：
- 装饰器（Decorators）：
@Component、@Entry、@State、@Prop等，用于标记组件和响应式数据 - 内置组件（Built-in Components）：
Column、Row、Text、Button、Image等，构成界面的基础元素 - 链式属性（Chainable Attributes）：通过链式调用
.width()、.height()、.backgroundColor()等方法设置组件样式
这种范式的优势在于代码可读性强、组件复用度高、状态管理清晰。
2.2 布局容器体系
ArkTS 提供了三类核心布局容器，它们构成了所有界面布局的基础：
2.2.1 Column（列布局）
Column 容器将其子组件沿垂直方向依次排列。默认情况下，子组件在交叉轴（水平方向）上居中对齐。Column 是最常用的容器，适用于从上到下的页面结构。
Column() {
Text('第一行')
Text('第二行')
Text('第三行')
}
2.2.2 Row（行布局）
Row 容器将其子组件沿水平方向依次排列。Row 是本文的核心研究对象，它适用于工具条、导航栏、操作面板等需要水平排列的场景。
Row() {
Button('操作一')
Button('操作二')
Button('操作三')
}
2.2.3 Flex（弹性布局）
Flex 容器提供了更灵活的弹性布局能力，支持主轴方向的自定义和子组件的 flex 权重分配。Row 和 Column 本质上是 Flex 的两个特例（FlexDirection.Row 和 FlexDirection.Column）。
2.3 Row 容器的完整 API
在 API 24 中，Row 容器的构造函数和属性如下：
Row(value?: { space?: string | number })
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| space | string | number | 否 | 子组件之间的间距，单位 vp（虚拟像素）。默认值 0 |
主要链式属性：
| 属性 | 类型 | 说明 |
|---|---|---|
.width() |
Length | 容器宽度，支持 '100%'、'50vp' 和 vp 数字 |
.height() |
Length | 容器高度 |
.alignItems() |
VerticalAlign | 子组件在交叉轴（垂直方向）的对齐方式 |
.justifyContent() |
FlexAlign | 子组件在主轴（水平方向）的对齐方式 |
.padding() |
Padding | Length | 内边距 |
.margin() |
Margin | Length | 外边距 |
.constraintSize() |
ConstraintSizeOptions | 约束容器的最小/最大尺寸 |
注意：
justifyContent和space参数会互相影响。当space设置了非零值时，justifyContent的间距行为会被space覆盖。建议在固定间距场景中使用space，在自由分布场景中使用justifyContent。
三、固定间距的实现原理
3.1 问题的提出
考虑一个最简单的场景：三个按钮并排显示，按钮之间保持 16vp 的固定间距，整体靠左排列。
在 Flutter 中，标准写法如下：
Row(
children: [
ElevatedButton(...),
SizedBox(width: 16),
ElevatedButton(...),
SizedBox(width: 16),
ElevatedButton(...),
],
)
在传统 Web 开发中，可以给每个按钮设置 margin-right: 16px（最后一个除外）。那么，ArkTS 中对应的写法是什么？
3.2 方案一：Row({ space: 16 }）
这是 ArkTS 中最直接、最优雅的方案。Row 构造函数中的 space 参数专门用于设置子组件之间的间距。
Row({ space: 16 }) {
Button('按钮一')
Button('按钮二')
Button('按钮三')
}
space: 16 表示在每两个相邻的子组件之间插入 16vp 的空白区域。这等价于 Flutter 中在每个子组件之间插入 SizedBox(width: 16)。
优点：
- 代码简洁，一行解决间距问题
- 性能好，不需要额外的组件对象
- 语义清晰，一看就知道是统一间距
缺点：
- 间距是统一的，无法为不同子组件设置不同间距
3.3 方案二：链式 margin
当需要为不同位置设置不同间距时，可以在子组件上单独设置 .margin()。
Row() {
Button('按钮一')
.margin({ right: 16 })
Button('按钮二')
.margin({ right: 8 })
Button('按钮三')
}
优点：
- 最灵活，每个按钮可以独立控制间距
缺点：
- 代码重复，每个组件都要写 margin
- 维护成本高，增删按钮时需要手动调整 margin
3.4 方案三：嵌套 Row 组合
实际开发中，工具条通常包含多个逻辑分组，每个分组内部固定间距，分组之间用弹性空间分隔。嵌套 Row 是最符合这种需求的方案。
Row() {
Row({ space: 16 }) {
// 左侧分组
Button('A1')
Button('A2')
}
Blank() // 弹性分隔
Row({ space: 16 }) {
// 右侧分组
Button('B1')
Button('B2')
}
}
优点：
- 逻辑清晰，分组明确
- 扩展性强，增删按钮不影响其他分组
- 与
Blank()配合完美
缺点：
- 多了一层容器嵌套（但在合理范围内，不影响性能）
3.5 方案对比总结
| 方案 | 适用场景 | 代码量 | 灵活性 | 推荐度 |
|---|---|---|---|---|
Row({ space: 16 }) |
单一分组，统一间距 | 最少 | 较低 | ⭐⭐⭐⭐⭐ |
| 链式 margin | 需要差异化间距 | 中等 | 最高 | ⭐⭐⭐ |
| 嵌套 Row | 多分组工具条 | 中等 | 高 | ⭐⭐⭐⭐⭐ |
四、Blank() 组件深度解析
4.1 什么是 Blank
Blank() 是 ArkTS 中用于填充剩余空间的弹性空白组件。它可以在 Row 或 Column 中占据尽可能多的空间，从而将其他子组件推到容器的两端。
从 Flutter 迁移的开发者可以将 Blank() 理解为 Spacer() 的等价物：
| Flutter | ArkTS |
|---|---|
Spacer() |
Blank() |
Expanded() |
Blank() |
4.2 Blank 的工作原理
Blank() 本质上是一个空的弹性盒子，它在 Flex 布局中的行为如下：
- 测量所有非
Blank()子组件的尺寸 - 计算容器剩余空间 = 容器总空间 - 所有非 Blank 子组件尺寸 - 总间距
- 按 flex 权重将剩余空间分配给所有
Blank()实例 - 每个
Blank()占据其分配到的空间
默认情况下，Blank() 的 flex 权重为 1。如果有多个 Blank() 实例，它们会等分剩余空间。
4.3 Blank 的位置策略
根据 Blank() 在 Row 中的位置不同，可以实现不同的对齐效果：
4.3.1 Blank 在最右侧（左侧对齐）
Row() {
Button('操作一')
Button('操作二')
Blank() // 将所有按钮推到左侧
}
效果：按钮靠左排列，右侧留空。适用于图片编辑工具条、文本格式工具条等。
4.3.2 Blank 在最左侧（右侧对齐）
Row() {
Blank() // 将所有按钮推到右侧
Button('取消')
Button('确定')
}
效果：按钮靠右排列，左侧留空。适用于弹窗的操作栏、「取消/确定」按钮组。
4.3.3 Blank 在中间（两端分散）
Row() {
Button('左侧操作')
Blank() // 将左右两组分开
Button('右侧操作')
}
效果：左侧按钮靠左、右侧按钮靠右，中间由 Blank() 填满。适用于标题 + 操作按钮的导航栏。
4.3.4 多个 Blank（三等分布局）
Row() {
Button('左')
Blank() // 等分 1/3
Button('中')
Blank() // 等分 1/3
Button('右')
}
效果：三个按钮各占 1/3 位置。适用于底部导航栏。
4.4 Blank 与 Row.space 的配合
Blank() 和 Row({ space: 16 }) 可以完美配合使用：
Row() {
Row({ space: 16 }) {
Button('A')
Button('B')
Button('C')
}
Blank()
Row({ space: 16 }) {
Button('保存')
Button('导出')
}
}
这种情况下：
- 左侧三个按钮之间保持 16vp 固定间距
- 右侧两个按钮之间保持 16vp 固定间距
- 左右两组之间由
Blank()弹性填充
五、实战示例详解
5.1 示例一：图片编辑工具条
5.1.1 需求分析
设计一个图片编辑器的底部工具条，包含三个圆形功能按钮（颜色区分），等间距排列在左侧，剩余空间留白。
5.1.2 代码实现
@Entry
@Component
struct Index {
build() {
Column() {
// ... 标题等其他内容 ...
Column() {
Text('图片编辑工具条')
.fontSize(14)
.fontColor('#666666')
.margin({ bottom: 12 })
Row() {
// 三个图标按钮，固定间距 16vp
Row({ space: 16 }) {
Button() {
Image($r('app.media.startIcon'))
.width(20)
.height(20)
}
.width(40)
.height(40)
.type(ButtonType.Circle)
.backgroundColor('#4A90D9')
Button() {
Image($r('app.media.startIcon'))
.width(20)
.height(20)
}
.width(40)
.height(40)
.type(ButtonType.Circle)
.backgroundColor('#50C878')
Button() {
Image($r('app.media.startIcon'))
.width(20)
.height(20)
}
.width(40)
.height(40)
.type(ButtonType.Circle)
.backgroundColor('#FF6B6B')
}
// 填充右侧剩余空间
Blank()
}
.width('100%')
.alignItems(VerticalAlign.Center)
}
.width('100%')
.backgroundColor(Color.White)
.borderRadius(12)
.padding(16)
}
}
}
5.1.3 布局分析
- 外层
Column：提供白色圆角卡片背景 (.borderRadius(12)) - 内层
Row() .width('100%')：水平铺满整个卡片 - 子
Row({ space: 16 })：三个按钮之间保持 16vp 固定间距 Blank()：吸收所有剩余空间，将按钮组推到左侧
5.1.4 效果说明
三个圆形按钮从左到右依次排列，颜色分别为蓝色（#4A90D9）、绿色（#50C878）、红色（#FF6B6B），按钮之间距离始终为 16vp。无论屏幕多宽，按钮始终紧贴左侧，右侧空白区域自适应伸展。
5.2 示例二：文档操作工具条
5.2.1 需求分析
设计一个文档编辑器的工具条，左侧是「撤销」「重做」两个操作按钮，右侧是「保存」「导出」两个功能按钮，两组之间用弹性空间分隔。
5.2.2 代码实现
Column() {
Text('文档操作工具条')
.fontSize(14)
.fontColor('#666666')
.margin({ bottom: 12 })
Row() {
// 左侧按钮组
Row({ space: 16 }) {
Button('撤销')
.width(64)
.height(36)
.fontSize(13)
.backgroundColor('#F5F5F5')
.fontColor('#333333')
Button('重做')
.width(64)
.height(36)
.fontSize(13)
.backgroundColor('#F5F5F5')
.fontColor('#333333')
}
// 弹性空间：将左右两组推到两端
Blank()
// 右侧按钮组
Row({ space: 16 }) {
Button('保存')
.width(72)
.height(36)
.fontSize(13)
.backgroundColor('#4A90D9')
.fontColor(Color.White)
Button('导出')
.width(72)
.height(36)
.fontSize(13)
.backgroundColor('#4A90D9')
.fontColor(Color.White)
}
}
.width('100%')
.alignItems(VerticalAlign.Center)
}
5.2.3 布局分析
- 外层
Row：水平铺满 - 左侧
Row({ space: 16 })：包含「撤销」和「重做」两个文本按钮，间距 16vp Blank()：占据剩余空间，将左右两组推到两端- 右侧
Row({ space: 16 })：包含「保存」和「导出」两个主题色按钮，间距 16vp
5.2.4 对比 Flutter 实现
Flutter 版本：
Row(
children: [
Row(children: [
TextButton(onPressed: () {}, child: Text('撤销')),
SizedBox(width: 16),
TextButton(onPressed: () {}, child: Text('重做')),
]),
const Spacer(),
Row(children: [
ElevatedButton(onPressed: () {}, child: Text('保存')),
SizedBox(width: 16),
ElevatedButton(onPressed: () {}, child: Text('导出')),
]),
],
)
ArkTS 版本（本文）：
Row() {
Row({ space: 16 }) {
Button('撤销')
Button('重做')
}
Blank()
Row({ space: 16 }) {
Button('保存')
Button('导出')
}
}
两者在语义和结构上高度一致，ArkTS 甚至更简洁——space 参数将间距逻辑内聚到容器层面，无需在每个子组件之间插入占位组件。
5.3 示例三：操作栏（右侧对齐）
5.3.1 需求分析
设计一个对话框的底部操作栏，「取消」和「确定」两个按钮靠右侧排列，左侧留白。这是模态弹窗、表单提交等场景中最常见的布局模式。
5.3.2 代码实现
Column() {
Text('操作栏 — 右侧对齐')
.fontSize(14)
.fontColor('#666666')
.margin({ bottom: 12 })
Row() {
// Blank 在最前方，将按钮推到右侧
Blank()
Row({ space: 16 }) {
Button('取消')
.width(72)
.height(36)
.fontSize(13)
.backgroundColor('#F5F5F5')
.fontColor('#666666')
Button('确定')
.width(72)
.height(36)
.fontSize(13)
.backgroundColor('#007AFF')
.fontColor(Color.White)
}
}
.width('100%')
.alignItems(VerticalAlign.Center)
}
5.3.3 布局分析
这个示例展示了 Blank() 在 Row 最前方时的特殊效果：
| Blank() | [取消] | 16vp | [确定] |
← 弹性区域 →← 固定区域 →
Blank()在第一个，吸收了除两个按钮及其间距之外的所有空间- 按钮组被整体推到右侧
- 按钮组内部通过
Row({ space: 16 })保持 16vp 间距
5.3.4 设计思路
这种布局方式遵循了 Material Design 和 HarmonyOS Design 中关于弹窗操作栏的规范：强调主要操作（确定）在右侧，次要操作（取消）在其左侧，两者之间有足够间距防止误触。Blank() 的弹性填充保证了在任何屏幕宽度下按钮都靠右排列，而左侧的空白区域可用于展示辅助说明文字或留给其他内容。
六、高级技巧与最佳实践
6.1 动态间距控制的实现
在某些场景下，间距需要根据屏幕宽度动态调整。ArkTS 支持使用 @State 响应式变量来控制 space 参数：
@Component
struct AdaptiveToolbar {
@State buttonSpacing: number = 16
build() {
Column() {
Row({ space: this.buttonSpacing }) {
Button('操作一')
Button('操作二')
Button('操作三')
}
}
}
}
配合 @StorageProp 或 LocalStorage 可以实现全局间距主题。
6.2 按钮组件的统一封装
实际项目中，同一款应用中往往有大量相似的按钮。通过封装复用组件可以大幅减少代码重复：
@Component
struct ToolbarIconButton {
private icon: ResourceStr = $r('app.media.app_icon')
private bgColor: Color = Color.Gray
private onClick: () => void = () => {}
build() {
Button() {
Image(this.icon)
.width(20)
.height(20)
}
.width(40)
.height(40)
.type(ButtonType.Circle)
.backgroundColor(this.bgColor)
.onClick(() => this.onClick())
}
}
使用时：
Row({ space: 16 }) {
ToolbarIconButton({
icon: $r('app.media.icon_edit'),
bgColor: '#4A90D9',
onClick: () => console.log('编辑')
})
ToolbarIconButton({
icon: $r('app.media.icon_save'),
bgColor: '#50C878',
onClick: () => console.log('保存')
})
Blank()
}
6.3 间距与无障碍访问
根据 HarmonyOS Design 无障碍设计规范，可点击元素之间的间距不应小于 8vp。使用 Row({ space: 16 }) 天然满足这一要求。如果你需要减小间距以适应紧凑布局，请确保不低于 8vp 的最小阈值。
6.4 性能优化建议
避免过度嵌套：虽然有子 Row 套用 space 的模式很清晰，但不要无限制地嵌套。建议嵌套深度不超过 3 层。对于简单的两三个按钮，直接在 Row({ space: 16 }) 中排列即可，无需再包一层。
减少 Blank 数量：每个 Blank() 都是一个独立的布局节点。如果你只需要一个弹性分隔，就用一个 Blank()；不要为了对称而使用多个 flex 权重相同的 Blank()。
6.5 API 24 与更高 API 版本的差异
API 24（HarmonyOS 6.1.1）是当前的主流目标版本。在 API 26+ 中，ArkTS 引入了更多布局能力：
| 特性 | API 24 | API 26+ |
|---|---|---|
Row({ space }) |
✅ 支持 | ✅ 支持 |
Blank() |
✅ 支持 | ✅ 支持 |
| 嵌套 Row space | ✅ 支持 | ✅ 支持 |
GridRow / GridCol |
❌ | ✅ |
VStack / HStack |
❌ | ✅ |
LayoutWeight |
❌ | ✅ 替代 Blank |
如果你的应用目标平台是 API 26+，可以考虑使用 HStack 替代 Row，以及 LayoutWeight 替代 Blank()：
// API 26+ 写法
HStack({ spacing: 16 }) {
Text('标题').layoutWeight(1) // 类似 Blank()
Button('操作')
}
6.6 常见陷阱与排查方法
陷阱一：space 不生效
// 错误：justifyContent 覆盖了 space 的效果
Row({ space: 16 }) {
Button('A')
Button('B')
}
.justifyContent(FlexAlign.SpaceBetween)
修复：
space和justifyContent是互斥的，不要同时使用。需要等间距分布时，用space；需要两端对齐时，用justifyContent+Blank()。
陷阱二：Blank 导致按钮异常换行
// 错误：没有限制 Blank 的最小尺寸
Row() {
Blank()
Button('确定')
}
修复：确保
Row设置了明确的宽度（如width('100%')），Blank()才能正确计算剩余空间。
陷阱三：子 Row 的 height 与父 Row 不匹配
Row() {
Row({ space: 16 }) {
Button('A')
}
.height(40) // 子 Row 固定高度
Blank()
}
修复：子
Row通常不需要设置固定高度，让子组件的高度自然撑开即可。通过父Row的alignItems(VerticalAlign.Center)统一控制垂直对齐。
七、完整的可运行示例
7.1 项目准备
在 DevEco Studio 中新建一个 Stage 模型项目，选择 API 24（SDK 6.1.1），包名自定义。将 entry/src/main/ets/pages/Index.ets 替换为以下完整代码：
@Entry
@Component
struct Index {
build() {
Column() {
// 工具条标题
Text('工具栏 — 固定间距按钮组')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 24 })
// ============================================
// 示例1：图片编辑工具条
// Row({ space: 16 }) + Blank()
// ============================================
Column() {
Text('图片编辑工具条')
.fontSize(14)
.fontColor('#666666')
.margin({ bottom: 12 })
Row() {
Row({ space: 16 }) {
Button() {
Image($r('app.media.startIcon'))
.width(20).height(20)
}
.width(40).height(40)
.type(ButtonType.Circle)
.backgroundColor('#4A90D9')
Button() {
Image($r('app.media.startIcon'))
.width(20).height(20)
}
.width(40).height(40)
.type(ButtonType.Circle)
.backgroundColor('#50C878')
Button() {
Image($r('app.media.startIcon'))
.width(20).height(20)
}
.width(40).height(40)
.type(ButtonType.Circle)
.backgroundColor('#FF6B6B')
}
Blank()
}
.width('100%')
.alignItems(VerticalAlign.Center)
}
.width('100%')
.backgroundColor(Color.White)
.borderRadius(12)
.padding(16)
.margin({ bottom: 20 })
// ============================================
// 示例2：文档操作工具条
// ============================================
Column() {
Text('文档操作工具条')
.fontSize(14)
.fontColor('#666666')
.margin({ bottom: 12 })
Row() {
Row({ space: 16 }) {
Button('撤销')
.width(64).height(36)
.fontSize(13)
.backgroundColor('#F5F5F5')
.fontColor('#333333')
Button('重做')
.width(64).height(36)
.fontSize(13)
.backgroundColor('#F5F5F5')
.fontColor('#333333')
}
Blank()
Row({ space: 16 }) {
Button('保存')
.width(72).height(36)
.fontSize(13)
.backgroundColor('#4A90D9')
.fontColor(Color.White)
Button('导出')
.width(72).height(36)
.fontSize(13)
.backgroundColor('#4A90D9')
.fontColor(Color.White)
}
}
.width('100%')
.alignItems(VerticalAlign.Center)
}
.width('100%')
.backgroundColor(Color.White)
.borderRadius(12)
.padding(16)
.margin({ bottom: 20 })
// ============================================
// 示例3：操作栏 — 右侧对齐
// ============================================
Column() {
Text('操作栏 — 右侧对齐')
.fontSize(14)
.fontColor('#666666')
.margin({ bottom: 12 })
Row() {
Blank()
Row({ space: 16 }) {
Button('取消')
.width(72).height(36)
.fontSize(13)
.backgroundColor('#F5F5F5')
.fontColor('#666666')
Button('确定')
.width(72).height(36)
.fontSize(13)
.backgroundColor('#007AFF')
.fontColor(Color.White)
}
}
.width('100%')
.alignItems(VerticalAlign.Center)
}
.width('100%')
.backgroundColor(Color.White)
.borderRadius(12)
.padding(16)
}
.width('100%')
.height('100%')
.padding(16)
.backgroundColor('#F0F2F5')
}
}
7.2 运行效果
在模拟器或真机上运行上述代码，你将看到三个白色圆角卡片垂直排列，分别展示三种不同的工具条布局模式。每一张卡片都包含一个标题和一行操作按钮，按钮之间的间距始终为 16vp，不随屏幕宽度变化。
八、总结
8.1 核心要点回顾
Row({ space: 16 })是 ArkTS 中实现固定水平间距的核心语法，等价于 Flutter 的Row+SizedBox(width:16)组合Blank()是弹性空间填充组件，等价于 Flutter 的Spacer()，用于将按钮组推到容器的左侧、右侧或两端- 嵌套 Row 组合是最推荐的多分组工具条构建模式：每个分组用
Row({ space: 16 })固定内部间距，分组之间用Blank()弹性分隔 - API 24 是当前鸿蒙应用开发的主流目标版本，本文所有语法均在此版本上验证通过
8.2 布局模式速查表
| 需求 | 推荐方案 |
|---|---|
| 按钮靠左，固定间距 | Row({ space: 16 }) { 按钮们 } |
| 按钮靠左，留空右侧 | Row() { Row({space:16}){按钮们} Blank() } |
| 按钮靠右，留空左侧 | Row() { Blank() Row({space:16}){按钮们} } |
| 左右两组分开 | Row() {左组 Blank() 右组} |
| 三组等距分布 | Row() {左组 Blank() 中组 Blank() 右组} |
8.3 进一步学习
- 鸿蒙开发者官网：ArkTS 组件参考文档
- 《HarmonyOS UI 开发指南》：深入了解布局系统
- DevEco Studio 示例项目：FileBrowser、Gallery 等系统应用源码
- 社区实践：HarmonyOS 开源组件库中的布局模式参考
本文基于 HarmonyOS API 24（SDK 6.1.1）编写，代码在 DevEco Studio 26.0 + Hvigor 6.26 环境下验证通过。
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
1
0- 0
已为社区贡献12条内容
所有评论(0)