在鸿蒙开发（HarmonyOS/OpenHarmony）的 ArkUI 界面开发中，布局是决定页面结构与交互体验的核心部分。掌握常见布局组件的特性与使用场景，可以让开发者在设计页面时游刃有余。本文将系统介绍以下五种布局方式：

• 线性布局（Column / Row）

• 层叠布局（Stack）

• 弹性布局（Flex）

• 相对布局（RelativeContainer）

• 栅格布局（GridContainer）

• 选项卡布局（Tabs）

---

一、线性布局（Column / Row）

线性布局是最基础的布局方式，子组件会按照主轴方向依次排列。

1. 基本概念

• Column：垂直方向排列组件（从上到下）

• Row：水平方向排列组件（从左到右）

2. 常用属性

属性	说明
alignItems	控制子元素在交叉轴（副轴）上的对齐方式
justifyContent	控制子元素在主轴方向上的分布方式
spaceBetween / spaceAround	控制子元素之间的间距分布

3. 示例

Column({ space: 10 }) { Text('标题').fontSize(24).fontWeight(FontWeight.Bold) Text('正文内容，描述产品或功能。') Button('确定') } .width('100%') .padding(20)

---

二、层叠布局（Stack）

层叠布局允许多个组件 重叠显示，类似于前端中的 position: absolute 或 Android 的 FrameLayout。

1. 适用场景

• 需要背景图与前景文字叠加的界面

• 浮动按钮（FAB）

• 自定义水印、角标等装饰

2. 示例

Stack() { Image($r('app.media.banner')).width('100%').height(200) Text('促销活动') .fontSize(22) .fontWeight(FontWeight.Bold) .align(Alignment.BottomCenter) }

上例中，文字叠加在图片底部，实现了图文叠放的效果。

---

三、弹性布局（Flex）

弹性布局（Flex）提供了更强大的控制能力，可以灵活适应不同屏幕和内容变化，类似 Web 的 display: flex。

1. 核心思想

• 使用主轴（direction）控制排列方向

• 使用 justifyContent 控制主轴分布

• 使用 alignItems 控制交叉轴对齐

2. 示例

Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) { Button('返回') Text('标题').fontSize(18) Button('更多') } .height(50) .padding(10) .backgroundColor('#f5f5f5')

这里三个元素在水平方向上自动分布在两端和中间，非常适合导航栏布局。

---

四、相对布局（RelativeContainer）

相对布局可以让子组件 相互参照 进行定位，更灵活地实现复杂界面。

1. 特点

• 通过设置 alignRules 来定义相对位置关系

• 可相对父容器或兄弟组件定位

2. 示例

RelativeContainer() { Text('头像') .id('avatar') .width(60).height(60) .backgroundColor('#ddd') .alignRules({ centerHorizontal: true, top: true }) Text('用户名') .id('username') .alignRules({ below: 'avatar', centerHorizontal: 'avatar' }) }

该示例中，“用户名”文字自动排列在“头像”下方并水平居中。

---

五、栅格布局（GridContainer）

栅格布局适用于 宫格菜单、商品展示、照片墙 等场景。

1. 特点

• 可指定列数与行距、列距

• 自动换行排列

2. 示例

GridContainer({ columns: 3, rowsGap: 10, columnsGap: 10 }) { ForEach(items, (item) => { Column() { Image(item.img).width(80).height(80) Text(item.title) } .padding(8) .backgroundColor('#fff') .borderRadius(8) }) }

通过 ForEach 动态生成内容，实现灵活的响应式宫格效果。

---

六、选项卡布局（Tabs）

选项卡（Tabs）布局常用于在同一页面中展示多个内容区域，可轻松切换视图。

1. 示例

Tabs({ index: this.currentIndex }) { TabContent('首页') { Text('这里是首页内容') } TabContent('分类') { Text('分类页面内容') } TabContent('我的') { Text('个人中心内容') } } .barMode(BarMode.Fixed) .barPosition(BarPosition.Bottom)

Tabs 内部通过 TabContent 定义多个页面内容，可实现类似底部导航的效果。

---

七、总结与布局选型建议

布局类型	特点	适用场景
Column / Row	简单直观，常用于基础排列	页面主体、表单、列表
Stack	元素可叠加	图片遮罩、悬浮控件
Flex	自适应能力强，灵活	响应式布局、导航栏
RelativeContainer	元素相互参照	定位复杂的界面
GridContainer	规则宫格排列	商品展示、菜单网格
Tabs	多页面切换	首页、分类、个人中心等多页结构