鸿蒙ArkUI零基础入门：布局
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实现更灵活的适配