一、垂直布局 Column

1. 核心作用 从上到下垂直排列内部所有子组件，是开发最常用的根布局，登录页、表单、首页主体都用它。

2. 关键属性

• Column({space: 数值})：设置内部组件垂直间距

• .justifyContent(FlexAlign.xxx)：垂直方向对齐（Center 居中 / Start 顶部 / End 底部）

• .alignItems(ItemAlign.xxx)：水平方向对齐（Center 居中）

 3. 对应文件 ColAndRow.ets、ColAndRow2.ets、ColumnDemm.ets、ColuPerson.ets

4.适用场景：登录表单、个人信息页、上下分块页面、页面整体根容器

二、水平布局 Row

1. 核心作用 从左到右水平排列子组件，一行展示多个控件，超出父容器不会自动换行，会挤压压缩子组件。

2. 关键属性 • Row({space: 数值})：组件水平间距 • .justifyContent()：水平对齐 • .alignItems()：垂直对齐  

3. 对应文件 Row1.ets、Row2.ets、Row3.ets、RowBaseDemo.ets、RowCol.ets、RowDemo.ets、RowFunc.ets

4. 适用场景： 顶部导航栏、按钮组、头像 + 文字一行展示、底部操作栏

三、相对布局 RelativeContainer

1. 核心作用 子组件通过互相锚点定位（A 在 B 左边、C 在 D 下方），不依赖固定坐标，适合不规则复杂页面。

2. 对应文件 RelativeDemo1.ets

 3. 核心规则 子组件设置 id("名字")，再通过 .alignRules() 指定相对谁摆放

4. 适用场景 复杂表单、不规则卡片、多控件错位排版页面

四、层叠布局 Stack

1. 核心作用 Z 轴叠加布局，后写的组件覆盖在先写组件上方，实现图层叠加效果。

2. 关键属性 • .alignContent(Alignment.Center)：所有子组件统一居中堆叠  

3. 对应文件 ImageSteck.ets、Stack1.ets、StackBase.ets、StackUp.ets

4. 适用场景 图片上加文字、视频播放按钮遮罩、头像角标、弹窗浮层

五、弹性布局 Flex

1. 核心作用 Row/Column 的升级版，支持自动换行、均分宽高、自由切换横竖方向，子元素过多时自动换行，不会挤压。

2. 关键属性

• Flex({wrap:FlexWrap.Wrap})：开启自动换行

• direction:FlexDirection.Row/Column：切换水平 / 垂直  

3. 对应文件 FlexDemo.ets、FlexDemo2.ets、FlexDemo3.ets、FlexDemo4.ets

4. 适用场景 标签按钮、多选项平铺、商品标签、自适应多按钮