一、Column 垂直布局：竖着排队，纵向排列

核心一句话

所有子组件从上到下垂直排列，像竖列清单一样依次摆放，是最常用的基础布局之一。

典型实战场景

微信聊天列表、外卖订单列表、个人资料页、表单输入页、商品详情竖排内容。

核心常用属性

• justifyContent（主轴对齐）：控制垂直方向的排列对齐方式，支持顶部对齐、居中对齐、底部对齐、均分间距排列。

• alignItems（交叉轴对齐）：控制水平方向的对齐方式，支持左对齐、居中对齐、右对齐。

适配总结

只要是纵向罗列内容的页面，优先用 Column，结构简单、排版规整。

---

二、Row 水平布局：横着排队，横向排列

核心一句话

所有子组件从左到右水平排列，横向依次排布，无默认堆叠和换行。

典型实战场景

页面顶部导航栏、底部按钮栏、一行功能图标、标签按钮组、搜索框+按钮组合。

核心常用属性

• justifyContent（主轴对齐）：控制水平方向的排列方式，可实现左对齐、居中、两端均分、间隔均匀分布等效果。

• alignItems（交叉轴对齐）：控制垂直方向的对齐方式，适配组件高低不一的居中、置顶、置底对齐。

适配总结

横向并列的按钮、图标、文字组合，全部用 Row 实现，是横向排版的首选布局。

---

三、Stack 层叠布局：叠罗汉，层级覆盖

核心一句话

组件同位置层叠堆叠，后写入的子组件会覆盖在前面组件的上方，实现层级效果。

典型实战场景

图片叠加文字水印、商品图标右上角角标、视频封面叠加播放按钮、弹窗浮层、卡片悬浮文字。

核心特点

子组件不排队、不分行，统一居中堆叠，可单独设置每个子组件的对齐位置，灵活实现悬浮覆盖效果。

适配总结

只要需要一层盖一层的层级UI，直接用 Stack，轻松实现悬浮、角标、水印效果。

---

四、Flex 弹性布局：自适应、自动挤、自动换行

核心一句话

Row 和 Column 的升级版，支持自动换行、自动拉伸、自动均分剩余空间，适配所有弹性排版场景。

典型实战场景

商品网格布局、热门标签流、自适应按钮组、多元素均分排版、屏幕适配自适应页面。

核心优势

• 支持水平/垂直双向排列切换

• 内容超出容器可自动换行，不会挤压溢出

• 可设置子组件自动占满剩余空间、均分宽度高度

• 适配不同屏幕尺寸，兼容性极强

适配总结

简单横纵排列用 Row/Column，复杂自适应、换行、均分布局，一律用 Flex。

---

五、RelativeContainer 相对布局：自由锚点定位

核心一句话

不靠横竖排队、不靠层叠覆盖，通过锚点规则实现组件相对定位，谁靠谁、谁对齐谁自由控制。

典型实战场景

聊天气泡布局、个人中心复杂排版、异形页面、组件不规则定位、多组件相互依附的复杂UI。

核心特点

通过设置锚点关系，可实现「A组件在B组件下方/右侧/居中」「组件贴边、居中、依附定位」，自由度远超线性布局。

适配总结

常规排版布局实现不了的复杂、不规则、相互依附UI，用 RelativeContainer 精准搞定。

---

六、Swiper 轮播布局：左右滑动翻页

核心一句话

支持左右滑动切换页面/图片，自带轮播指示器（小圆点），可自动轮播、手动滑动。

典型实战场景

APP首页Banner广告、启动引导页、图片轮播展示、资讯滑动切换页面。

核心能力

支持自动播放、循环轮播、指示器显示/隐藏、滑动手势控制、切换动画自定义。

适配总结

所有滑动轮播场景，Swiper 是专属最优解，开箱即用无需自定义滑动逻辑。

---

七、Tabs 标签切换布局：选项卡页面切换

核心一句话

点击顶部/底部选项卡，快速切换对应内容页面，实现多页面快速切换效果。

典型实战场景

APP底部导航（首页/分类/购物车/我的）、顶部标签页（推荐/热门/最新）、分类选项卡切换。

核心能力

自带标签栏+内容区联动，点击标签自动切换页面，支持自定义标签样式、选中状态、布局位置。

适配总结

多页面分类切换、标签导航场景，优先使用 Tabs，结构清晰、交互流畅。

---

布局快速选型对照表（新手必存）

• 纵向列表、表单 → Column

• 横向按钮、导航、图标行 → Row

• 层级覆盖、悬浮角标、水印 → Stack

• 自适应、换行、网格、标签流 → Flex

• 复杂依附、不规则定位UI → RelativeContainer

• 图片/页面轮播滑动 → Swiper

• 标签页、导航多页面切换 → Tabs

---

最后总结

鸿蒙ArkUI布局的核心精髓：根据场景选布局，不滥用复杂组件。

基础横竖排版用 Row、Column；自适应弹性布局用 Flex；层级堆叠用 Stack；复杂定位用 RelativeContainer；轮播切换用 Swiper；标签导航用 Tabs。掌握这七大布局，足以应对99%的APP页面开发场景。