前言

在 HarmonyOS ArkTS 开发中，页面排版全部依靠容器布局组件实现，不同业务场景适配专属布局，本文一次性梳理官方全部 9 大类布局：线性、层叠、弹性、相对、栅格、动态、容器断点、选项卡，附带使用场景、核心属性、代码示例，新手可直接收藏。

一、线性布局 Row / Column（最常用，登录 / 注册页首选）

1. 核心概念

线性布局是垂直 / 水平单向排列组件，分为两种：

• Column：垂直纵向从上到下排列子组件（登录、注册、表单页面核心）
• Row：水平横向从左到右排列子组件（导航栏、按钮行、标签栏）

2. 关键属性

1. {space: xx}：统一设置子组件之间的间距
2. justifyContent：主轴对齐
   • Column 主轴 = 垂直；Row 主轴 = 水平
   • 可选：Start左 / 上、Center居中、End右 / 下、SpaceBetween两端分散、SpaceAround均匀留白
3. alignItems：交叉轴对齐
   • Column 交叉轴 = 水平；Row 交叉轴 = 垂直

3. 适用场景

登录页、注册页、表单、个人中心列表、底部按钮行、顶部导航栏。

4. 注册页经典示例

Column({space:30}){
  Image($r('app.media.icon'))
  Text('注册').fontSize(38)
  TextInput({placeholder:"请输入手机号"})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center) // 垂直居中
.alignItems(HorizontalAlign.Center) // 水平居中

二、层叠布局 Stack（图层叠加，弹窗 / 头像角标）

1. 核心概念

所有子组件层叠堆叠，后写的组件层级覆盖在前一个之上，类似 PS 图层。

2. 关键属性

alignContent：控制所有子组件统一对齐（Center居中、TopStart左上、BottomEnd右下）

3. 适用场景

头像右上角小红点角标、图片上加文字水印、弹窗遮罩、按钮叠加图标。

简单示例

Stack(){
  Image($r('app.media.avatar')).width(80).borderRadius(40)
  Text('99+')
    .fontSize(12)
    .backgroundColor(Color.Red)
    .fontColor(Color.White)
    .borderRadius(10)
    .width(20)
    .height(20)
}
.alignContent(Alignment.TopEnd) // 角标放在头像右上角

三、弹性布局 Flex（流式自动换行，标签、商品标签）

1. 核心概念

升级版 Row，支持自动换行，当一行宽度放不下子组件时自动换到下一行，可自定义主轴方向。

2. 关键属性

• direction：排列方向（Row 水平 / Column 垂直）
• wrap：FlexWrap.Wrap开启自动换行
• justifyContent主轴对齐、alignItems单行交叉轴、alignContent多行整体对齐

3. 适用场景

商品标签、搜索历史、多标签选择、多按钮自动换行。

四、相对布局 RelativeContainer（复杂错位排版，详情页）

1. 核心概念

子组件通过id互相约束定位，A 组件在 B 组件的左 / 右 / 上 / 下，不限制单向流，自由错位摆放。

2. 核心规则

1. 给子组件设置id("xxx")
2. 使用alignLeft/alignRight/alignTop/alignBottom绑定其他组件 ID 实现相对定位

3. 适用场景

商品详情行、聊天消息气泡、图文混排复杂卡片、左右图文错位布局。

五、栅格布局 GridRow / GridCol（多列均分，商城商品列表）

1. 核心概念

网格系统，把一行屏幕分成 12 等分栅格，通过GridCol(span: 占几格)控制每个组件宽度，多设备自动适配列数。

2. 核心 API

• GridRow：栅格行容器，columns自定义一行总份数
• GridCol({span: n})：当前组件占用 n 个栅格宽度

3. 适用场景

商城商品瀑布流、功能九宫格、相册图片列表、多列表单。

六、动态布局 DynamicLayout（动态切换布局，横竖屏适配）

1. 核心概念

根据屏幕尺寸、设备类型动态切换整套布局结构，一套代码区分手机 / 平板 / 折叠屏展示不同排版。

2. 适用场景

折叠屏内外屏布局差异、平板横屏双栏、手机竖屏单页自适应。

七、容器断点 ContainerQuery（容器尺寸适配，卡片内自适应）

1. 核心概念

和媒体查询mediaQuery区分：媒体查询是按整个屏幕判断；ContainerQuery 是按当前父容器宽度切换样式。容器宽度变化时，自动修改内部组件大小、排版。

2. 适用场景

卡片组件复用、侧边栏 / 主内容区自适应、弹窗内多尺寸适配。

八、选项卡 Tabs（顶部 / 底部标签切换，首页多页面）

1. 核心概念

自带滑动切换的多页面容器，搭配TabContent实现分页，支持顶部、底部导航栏切换页面。

2. 关键配置

• TabBar：标签栏（文字 / 图标）
• TabContent：每个标签对应的页面内容
• barPosition：标签放顶部Top或底部Bottom

3. 适用场景

APP 首页底部导航、分类顶部滑动标签、资讯多栏目切换。

开发避坑总结

1. 页面居中优先 Column：绝大多数登录、注册、空白页全屏居中，直接用 Column + 宽高 100%+ 双居中属性，最简单高效。
2. 换行标签别用 Row：Row 不会自动换行，多标签必须用 Flex 开启Wrap。
3. 图层叠加只选 Stack：不要嵌套多个 Row/Column 模拟叠加，性能差且对齐复杂。
4. 多列商品优先栅格 Grid：比 Flex 更容易实现等宽均分，折叠屏、平板适配更省心。
5. 组件复用自适应用 ContainerQuery，全局屏幕适配用 mediaQuery，跨设备整套布局切换用 DynamicLayout。
6. 页面多分页导航直接 Tabs，不用自己写点击切换逻辑，原生自带滑动动画。