一、五种基础布局：掌控页面元素排列规则

布局是承载所有组件的容器，所有页面有一条通用规则：任何页面仅能存在一个根布局，其余布局都嵌套在根布局内部，通过多层嵌套实现复杂页面排版。

1. 垂直布局

最常用基础布局，内部所有元素自上而下纵向依次排列，适配列表、表单、长文本流页面。 适用场景：商品详情页、表单填写页、文章详情、个人中心等纵向滚动页面。

2. 水平布局

容器内元素从左到右横向排布，可控制元素等分、居左 / 居中 / 居右对齐。 适用场景：顶部导航栏、按钮操作栏、图文横向组合、选项行。

3. 相对布局

自由定位型布局，子元素可参照容器边界、其他组件位置设置坐标，不受横竖排列限制。 适用场景：弹窗、悬浮按钮、自定义不规则排版、海报设计页。

4. 层叠布局

支持组件分层堆叠，类似图层概念，上层组件会覆盖下层内容，可设置层级透明度。 适用场景：轮播遮罩、图片水印、弹窗浮层、标题叠加背景图。

5. 弹性布局

自适应流式布局，结合横竖布局优势，自动适配不同屏幕宽度，支持自动换行、等分占比。 适用场景：多列商品卡片、多图标导航、移动端自适应页面。

三、开发实操小总结

简单页面只用单一布局即可，复杂页面依靠「多层布局嵌套」实现分区。

布局负责 “摆位置”。