ArkUI 五大基础布局

布局是页面的容器，用来控制页面内所有组件的排列方式，所有页面有且只能有一个根布局，根布局内部可以无限嵌套其他布局，这是ArkUI开发硬性规范，多根布局会直接编译报错。

下面分别讲解5种布局的特点、适用场景和极简示例代码：

1. 垂直布局 Column（最常用）

• 核心作用：内部所有组件默认从上至下，垂直单列排列

• 常用对齐属性：justifyContent（主轴对齐：上下居中/置顶/置底）、alignItems（交叉轴对齐：左对齐/居中/右对齐）

• 适用场景：表单页面、个人中心、首页信息流、所有从上往下排布的页面

• 优缺点：代码极简、上手零难度，是日常开发首选基础布局，无法实现同行并排效果

2. 水平布局 Row（高频搭配布局）

• 核心作用：内部所有组件默认从左至右，水平单行排列，组件不会自动换行

• 常用对齐属性：justifyContent（水平对齐）、alignItems（垂直对齐）

• 适用场景：输入框+按钮组合、底部导航栏、标签栏、同行并排按钮、图文同行展示

• 避坑点：Row内部组件过多会溢出屏幕，不会自动换行，需要换行优先用Flex布局

3. 相对布局 RelativeContainer（精准定位布局）

• 核心作用：脱离固定行列规则，组件通过id互相绑定参照，A组件相对于B组件的上下、左右、居中进行定位

• 核心特点：不需要计算固定坐标，依托组件相对位置排版

• 适用场景：不规则异形页面、悬浮按钮、弹窗内部复杂排版、图片角落角标

• 优缺点：定位极其灵活，适配性强；但是代码量大、逻辑复杂，常规列表、表单页面完全不推荐使用

4. 层叠布局 Stack（图层叠加布局）

• 核心作用：所有组件默认居中叠加，后声明的组件层级更高，会覆盖在先声明的组件上方，类似PS图层

• 层级规则：代码越靠后，图层越在上层

• 适用场景：图片加文字水印、轮播图底部指示器、视频播放悬浮播放按钮、商品图右上角优惠角标

• 一句话记忆：组件叠罗汉，后写盖前写

5. 弹性布局 Flex（万能自适应布局）

• 核心作用：兼容Row和Column所有能力，可自由切换水平/垂直排列，支持组件自动换行、自动均分屏幕宽度、自适应不同尺寸手机屏幕

• 核心属性：flexDirection（切换水平/垂直）、wrap（是否自动换行）

• 适用场景：商品宫格布局、自动换行按钮组、多设备屏幕适配、复杂流式布局

• 开发建议：Row/Column满足不了换行、均分需求时，直接用Flex，实际项目中复杂布局首选Flex

补充：布局嵌套实战（必学）

单一布局无法满足大部分页面需求，日常开发布局嵌套是常态，最经典组合：根布局Column（整体垂直排布）+ 内部嵌套Row（局部水平并排）

布局是页面的容器，用来控制页面内所有组件的排列方式，所有页面有且只能有一个根布局，根布局内部可以无限嵌套其他布局，这是ArkUI开发硬性规范，多根布局会直接编译报错。

下面分别讲解5种布局的特点、适用场景：

1. 垂直布局 Column

• 排列规则：内部组件从上到下垂直依次排列

• 适用场景：首页内容列表、表单页面、从上至下排布的常规页面

• 一句话记忆：竖着排，默认从上往下挤

2. 水平布局 Row

• 排列规则：内部组件从左到右水平依次排列

• 适用场景：底部导航栏、输入框+按钮组合、同行并排按钮

• 一句话记忆：横着排，默认从左往右挤

3. 相对布局 RelativeContainer

• 排列规则：组件之间互相参照定位，A组件相对于B组件的上下左右摆放

• 适用场景：复杂不规则页面、需要精准相对定位的弹窗、悬浮按钮

• 优缺点：定位灵活，但是代码冗余，简单页面不推荐使用

4. 层叠布局 Stack

• 排列规则：组件层层叠加，后写的组件覆盖在先写的组件上方

• 适用场景：图片加文字水印、轮播图指示器、视频播放悬浮按钮

• 一句话记忆：叠罗汉，后面盖前面

5. 弹性布局 Flex

• 排列规则：兼容水平+垂直布局，可自由设置换行、等分宽高、自动分配剩余空间

• 适用场景：自适应多宫格、屏幕适配页面、需要自动换行的按钮组

• 开发推荐：复杂自适应页面首选Flex，替代Row/Column实现更灵活的适配