1.Column

Column 让子组件从上到下依次排列。

主轴：垂直方向（控制上下位置）交叉轴：水平方向（控制左右位置）

完整示例：

效果：三个文本垂直排列，间距20，整个背景浅灰色，内容整体垂直居中，文字靠左对齐。

2.Row Row 让子组件从左到右依次排列。

主轴：水平方向（控制左右位置）   交叉轴：垂直方向（控制上下位置）

完整示例：

效果：四个文本横向排列，间距30，浅蓝色背景，整体区域水平垂直都居中。

3. Stack 层叠布局（叠罗汉）

控件一层层叠在一起，后写的盖在先写的上面 = 叠积木，类似图层，下面打底，上面盖着。

特点 ： 所有子组件默认全部在左上角重叠  ；alignContent：统一控制所有子组件整体位置（居中 / 左下 / 右上） ； 书写顺序：代码越靠下，层级越靠上，盖住前面组件

示例：

效果：屏幕垂直居中展示一块青绿色圆角卡片，卡片内部纵向排布内容，从上至下依次是加粗黑色标题、红色课程说明文字、紫灰色圆角按钮

4. Flex 弹性布局（万能自适应横竖）

升级版 Row/Column，可以自由切换横 / 竖，自动均分剩余空间、自动换行，万能自适应布局。

两个核心 .flexDirection(FlexDirection.Row)：横着排（默认 =Row）

.flexDirection(FlexDirection.Column)：竖着排（=Column）

.wrap(FlexWrap.Wrap)：空间不够自动换行（超出屏幕自动换下一行）

 flex:1：组件自动平分剩余屏幕宽度 / 高度

一个示例：

效果：平分整行宽度，高度统一 100，文字居中显示；左侧粉色背景展示文字 “左”，右侧灰色背景展示文字 “右”，实现左右对半均分布局。

5. RelativeContainer 相对布局（参照物摆放）

不靠横竖，以某个组件当参照物摆放别的控件：A 在 B 的下边 / 右边 / 左上方，就是相对布局

核心规则：

1. 被当作参照物的组件必须写 .id('自定义名字')

2. 新组件用 .alignRules({锚点规则})，指定依托哪个 id、贴哪边

• anchor:'xxx'   ：参照物 id
• align:VerticalAlign.Bottom   ：贴参照物底部
• align:HorizontalAlign.End    ：贴参照物右边

6. Swiper 轮播图（左右滑动翻页）

多张页面左右滑动切换、自动轮播，首页横幅广告，就是轮播。

常用属性：

• .autoPlay(true)：开启自动轮播
• .interval(3000)：3000 毫秒 = 3 秒切一张
• .indicator(true)：底部显示小圆点指示器
• .loop(true)：循环轮播（滑到最后一页切回第一页）

7.Tabs 标签页（底部导航切换页面）

底部导航栏（首页 / 推荐 / 发现 / 我的），点标签切换上面内容页面，就是你写的底部四个按钮布局。

固定格式：

1.Tabs外层容器

2.每一项：TabContent{页面内容}.tabBar('底部按钮文字')

3..barPosition(BarPosition.End)：标签栏放底部（End = 底部，Start = 顶部）

快速选用口诀（做题 / 开发直接用）

1. 单纯竖着排→Column

2. 单纯横着排→Row

3. 控件叠在一起→Stack

4. 需要自适应、自动换行、平分空间→Flex

5. A 放在 B 旁边 / 上下（按参照物摆）→RelativeContainer

6. 左右滑动广告图→Swiper

7. 底部导航切换多页面→Tabs