班级链接

1. 线性布局容器（Row / Column）

特点

• 方向性排列：
  • Row：子组件水平排列（从左到右）。
  • Column：子组件垂直排列（从上到下）。
• 简单高效：适合单方向排列的场景（如列表、工具栏）。
• 间距控制：通过space属性设置子组件间距。
• 对齐方式：
  • justifyContent：主轴对齐（如FlexAlign.Start、FlexAlign.SpaceBetween）。
  • alignItems：交叉轴对齐（如HorizontalAlign.Center）。

适用场景

• 导航栏（Row）、垂直列表（Column）、表单布局。

示例代码

Row({ space: 10 }) {
  Text('左').fontSize(20)
  Text('中').fontSize(20)
  Text('右').fontSize(20)
}.justifyContent(FlexAlign.SpaceBetween)

---

2. 层叠布局容器（Stack）

特点

• 子组件堆叠：后添加的子组件覆盖在先前的组件上。
• 绝对定位：通过position、offset属性控制子组件位置。
• 对齐方式：支持9种预设对齐（如Alignment.TopStart）。
• 动态叠加：适合悬浮按钮、弹窗、图片叠加等场景。

适用场景

• 悬浮按钮、遮罩层、轮播图指示器。

示例代码

Stack({ alignContent: Alignment.BottomEnd }) {
  Image($r('app.media.background')).width('100%')
  Button('点击').margin(10)
}

---

3. 弹性布局容器（Flex）

特点

• 动态分配空间：通过flexGrow、flexShrink分配剩余空间。
• 多方向排列：支持FlexDirection.Row（水平）和FlexDirection.Column（垂直）。
• 换行支持：wrap: FlexWrap.Wrap实现多行布局。
• 性能注意：比Row/Column更灵活，但存在二次布局开销。

适用场景

• 复杂自适应布局（如电商商品网格）。

示例代码

Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
  ForEach([1, 2, 3], (item) => {
    Text(item.toString()).flexGrow(1)
  })
}

---

4. 相对布局容器（RelativeContainer）

特点

• 锚点定位：子组件通过alignRules相对于父容器或兄弟组件定位。
• 自由布局：适合不规则界面（如仪表盘）。
• 动态调整：结合onAreaChange事件实现响应式布局。

适用场景

• 自定义拖拽界面、复杂表单。

示例代码

RelativeContainer() {
  Text('标题')
    .alignRules({
      top: { anchor: '__container__', align: VerticalAlign.Top },
      left: { anchor: '__container__', align: HorizontalAlign.Start }
    })
}

---

5. 栅格布局容器（GridRow / GridCol）

特点

• 响应式断点：根据屏幕宽度（xs、sm、md、lg）动态调整列数。
• 灵活占比：通过span控制子组件占用的列数（如span: 4占4/12列）。
• 间距控制：gutter属性设置列间距。

适用场景

• 多设备适配的网格布局（如相册、新闻列表）。

示例代码

GridRow({ columns: 12, gutter: 10 }) {
  GridCol({ span: 6 }) { Text('左半部分') }
  GridCol({ span: 6 }) { Text('右半部分') }
}

---

6. 列表容器（List）

特点

• 高性能滚动：支持懒加载（LazyForEach）优化长列表性能。
• 多列布局：通过lanes属性实现横向或纵向多列。
• 分组支持：ListItemGroup对列表项分组。

适用场景

• 聊天记录、商品列表、社交媒体Feed。

示例代码

List({ space: 10 }) {
  LazyForEach(this.data, (item) => {
    ListItem() { Text(item) }
  })
}

---

7. 瀑布流容器（WaterFlow）

特点

• 动态高度：子组件高度不固定时自动填充最短列。
• 多列布局：通过columnsTemplate设置列数（如"1fr 1fr 2fr"）。
• 性能优化：适合图片/视频等高度不一的场景。

适用场景

• Pinterest式图片墙、电商商品展示。

示例代码

WaterFlow({ columnsTemplate: '1fr 1fr' }) {
  ForEach(this.imageList, (item) => {
    FlowItem() { Image(item) }
  })
}

---

总结对比表

---

选择建议

1. 简单布局：优先使用Row/Column，性能最佳。
2. 重叠元素：选择Stack实现层叠效果。
3. 响应式网格：GridRow适配不同屏幕尺寸。
4. 高性能列表：List + LazyForEach优化长列表渲染。

通过合理选择布局容器，可以高效构建美观且适应性强的鸿蒙应用界面。