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实现更灵活的适配