一、布局总规则（核心强制语法）

不管是哪种布局，build 函数内只能存在 1 个根布局组件，所有其他组件、布局必须嵌套在这个根布局内部，不允许并列多个根容器。 错误示例：

正确示例：

1. 垂直布局 Column

作用：内部子组件从上到下垂直依次排列常用对齐属性：

justifyContent：垂直方向对齐（FlexAlign.Start/Center/End/SpaceBetween）

alignItems：水平方向对齐（ItemAlign.Start/Center/End）

2. 水平布局 Row

• 作用：内部子组件从左到右水平依次排列
• 常用对齐属性：
  • justifyContent：水平方向对齐
  • alignItems：垂直方向对齐

3. 相对布局 RelativeContainer

• 作用：通过约束关系自由定位子组件，组件之间互相参照摆放
• 核心 API：alignRules 绑定上下左右参照目标
• 适用场景：复杂自由定位页面（如悬浮按钮、图文错位排版）

4. 层叠布局 Stack

• 作用：子组件层叠堆叠，后写的组件覆盖在先写组件上方
• 对齐属性：alignContent 设置内部所有子组件统一对齐位置
• 适用场景：图片加文字水印、视频封面 + 播放按钮悬浮

5. 弹性布局 Flex

• 作用：强化版 Row/Column，可自由切换水平 / 垂直方向，支持自动均分剩余空间
• 核心属性：
  • FlexDirection.Row：水平排列（等价 Row）
  • FlexDirection.Column：垂直排列（等价 Column）
  • flexShrink/flexGrow：控制组件压缩、自动占满剩余宽度