一. Column 垂直布局

又叫：Column 线性垂直布局

• 作用：子组件从上到下垂直排成一列
• 主轴：垂直方向（上下）
• 交叉轴：水平方向（左右）
• 特点：
  • 不重叠、垂直往下排
  • 可设间距 space
  • 可控制：上对齐、居中、下对齐
• 适合：页面整体、表单、设置页、列表、上下排列内容

结构：

Column({ space: 20 }) {

Text('first')

Text('second')

Text('third')

}

二.Row 水平布局

又叫：堆叠布局 / 帧布局

• 作用：子组件从左到右水平排成一行
• 主轴：水平方向（左右）
• 交叉轴：垂直方向（上下）
• 特点：
  • 不重叠、不换行（默认）
  • 可以设置间距 space
  • 可以控制：左对齐、居中、右对齐、两端对齐
• 适合：导航栏、按钮行、标题 + 按钮、图标 + 文字一行

结构：

Row({ space: 10 }) {

Text('first')

Text('second')

Text('third')

}

三、层叠布局

又叫：堆叠布局 / 帧布局

• 作用：子组件一层层叠在一起（前后覆盖）
• 排列：Z 轴堆叠，后写的组件盖在前面组件上面
• 特点：
  • 组件可以重叠、覆盖
  • 支持 9 种对齐：左上、中上、右上、左中、居中、右中、左下、中下、右下
  • 可做悬浮、弹窗、遮罩、角标、背景 + 文字
• 适合：图片上写文字、悬浮按钮、弹窗、遮罩、轮播指示器

结构：

Stack() {

// 底层

Text('first').width('100%').height(200).backgroundColor(0xEFEFEF)

// 上层（盖在上面）

Text('second').fontSize(20).fontColor(Color.Red)

}

四、弹性布局

简介：Flex = Row + Column + 自动换行 + 自适应比例，一维弹性盒子，主轴可横可竖，能自动换行、自动分配空间。

• 特点：
  • 可水平 / 垂直排列（direction）
  • 内容多可自动换行（wrap:Wrap）
  • 子组件可按比例瓜分空间（layoutWeight）
  • 自动适配不同屏幕，响应式强Huawei Developer
• 适合：导航栏、标签流、卡片列表、自适应按钮组、均分布局

结构：

Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {       Text('1').layoutWeight(1).padding(10).backgroundColor('#eee')   Text('2').layoutWeight(1).padding(10).backgroundColor('#ddd')   Text('3').layoutWeight(1).padding(10).backgroundColor('#ccc')

}

五、相对布局

简介：子组件靠锚点定位（相对父容器或其他组件），不用嵌套 Row/Column，扁平化布局Huawei Developer。

• 特点：
  • 组件互相 “挂靠”：左 / 右 / 上 / 中 / 下对齐
  • 减少多层嵌套，性能好
  • 屏幕变化自动适配位置
  • 必须给组件设 id，用 alignRules 定规则Huawei Developer
• 适合：复杂表单、仪表盘、不规则界面、组件错落排布

结构：

RelativeContainer() {

Text('A').id('a')

.alignRules({top:{anchor:'__container__',align:VerticalAlign.Top}})

Text('B').id('b')

.alignRules({top:{anchor:'a',align:VerticalAlign.Bottom}}) }

六、轮播图

简介：左右 / 上下滑动翻页，自动轮播 + 手动滑动，首页 Banner、广告轮播专用。

• 特点：
  • 自动播放（autoplay）、循环（loop）
  • 指示器（小圆点）、切换动画
  • 可水平 / 垂直滑动Huawei Developer
  • 支持图片 / 页面轮播
• 适合：首页 Banner、广告、引导页、图片预览、新闻滚动

结构：

Swiper() { Text('页1').width('100%').height(200).backgroundColor('#f00')

Text('页2').width('100%').height(200).backgroundColor('#0f0')

Text('页3').width('100%').height(200).backgroundColor('#00f')

}

.loop(true).autoplay(true).interval(3000)

七、Tabs

简介：顶部 / 底部 / 侧边导航，点击标签切换页面，由 TabBar（标签栏）+ TabContent（内容页）组成HarmonyOS设备开发。

• 特点：
  • 三种位置：顶部、底部、侧边
  • 可滑动标签、可自定义图标 + 文字
  • 切换带动画，保持页面状态
• 适合：APP 底部导航（首页 / 发现 / 我的）、分类标签、多页面切换

结构：

Tabs({ barPosition: BarPosition.End }) {

// 底部导航

TabContent() { Text('首页内容') }.tabBar('首页')

TabContent() { Text('发现内容') }.tabBar('发现')

TabContent() { Text('我的内容') }.tabBar('我的')

}