1. Column 垂直线性布局

作用

子组件从上至下垂直排列，页面最常用基础容器。

核心参数

space：子组件间距；justifyContent：垂直分布；alignItems：水平对齐

示例代码

@Entry
@Component
struct ColumnDemo {
  build() {
    Column({ space: 15 }) {
      Text("标题")
        .fontSize(20)
      Text("正文内容")
      Button("提交")
    }
    .width("100%")
    .padding(20)
    .justifyContent(FlexAlign.Center) // 垂直居中
    .alignItems(HorizontalAlign.Start) // 左对齐
  }
}

2. Row 水平线性布局

作用

子组件从左至右水平排列，实现一行多元素排版。

核心参数

space：元素间距；主轴 / 交叉轴对齐属性同 Column

示例代码

@Entry
@Component
struct RowDemo {
  build() {
    Row({ space: 10 }) {
      Text("选项1")
        .width(80)
        .height(40)
        .backgroundColor("#eee")
      Text("选项2")
        .width(80)
        .height(40)
        .backgroundColor("#eee")
      Text("选项3")
        .width(80)
        .height(40)
        .backgroundColor("#eee")
    }
    .width("100%")
    .padding(10)
  }
}

3. Stack 层叠布局

作用

子组件叠加堆叠，后写组件覆盖上层；适合背景 + 浮层、角标场景。

核心参数

alignContent：统一对齐；子组件.zIndex()控制层级（数值越大越顶层）

示例代码

@Entry
@Component
struct StackDemo {
  build() {
    Stack({ alignContent: Alignment.Center }) {
      // 底层背景
      Rect()
        .width(200)
        .height(120)
      // 中层文字
      Text("主图")
        .fontSize(22)
        .fontColor(Color.White)
        .zIndex(1)
      // 顶层角标
      Text("热")
        .fontSize(12)
        .backgroundColor(Color.Red)
        .fontColor(Color.White)
        .padding(4)
        .position({ x: 160, y: 10 })
        .zIndex(2)
    }
  }
}

4. Flex 弹性布局

作用

超灵活自适应布局，支持自动换行、均分剩余空间，复杂流式排版首选。

核心参数

direction：主轴方向；wrap：是否换行；justifyContent主轴分布

示例代码

@Entry
@Component
struct FlexDemo {
  build() {
    Flex({
      direction: FlexDirection.Row,
      wrap: FlexWrap.Wrap, // 自动换行
      justifyContent: FlexAlign.SpaceAround
    }) {
      ForEach([1,2,3,4,5], (item:number)=>{
        Text(`标签${item}`)
          .width(100)
          .height(40)
          .backgroundColor("#f0f0f0")
          .margin({ bottom:10 })
      })
    }
    .width("100%")
    .padding(10)
  }
}

5. RelativeContainer 相对布局

作用

通过 ID 互相参照定位，适合组件位置互相依赖的复杂页面。

核心 API

id("xxx")给组件标记；.alignRules()设置相对对齐规则

示例代码

@Entry
@Component
struct RelativeDemo {
  build() {
    RelativeContainer()
        .width(300)
        .height(300)
        .backgroundColor("#f5f5f5") {
      // 基准方块
      Rect()
        .id("base")
        .width(80)
        .height(80)
        .fill("#2196F3")
        .alignRules({ centerX: { anchor: "__container__", align: HorizontalAlign.Center }})
      // 方块在基准下方
      Rect()
        .id("down")
        .width(60)
        .height(60)
        .fill("#4CAF50")
        .alignRules({ top: { anchor: "base", align: VerticalAlign.Bottom }})
    }
  }
}

6. Swiper 轮播布局

作用

横向滑动切换多页面，用于首页 Banner、图片轮播。

核心参数

index默认页；loop循环播放；autoPlay自动轮播；interval切换间隔

示例代码

@Entry
@Component
struct SwiperDemo {
  @State curIndex: number = 0
  build() {
    Swiper() {
      ForEach([1,2,3], (i:number)=>{
        Rect()
           .width("100%")
           .height(160)
           .fill(i%2 ? "#FF9800":"#9C27B0")
      })
    }
    .index(this.curIndex)
    .loop(true)
    .autoPlay(true)
    .interval(3000)
    .width("100%")
    .height(160)
  }
}

7. Tabs 标签页布局

作用

顶部 / 底部切换多内容页面，常用于首页分栏、分类导航。

核心参数

barPosition标签栏位置（Start 顶部 / End 底部）；onChange切换监听

示例代码

@Entry
@Component
struct TabsDemo {
  build() {
    Tabs({ barPosition: BarPosition.Start }) {
      TabContent() { Text("首页内容").fontSize(24) }
        .tabBar(Text("首页").fontSize(16))
      TabContent() { Text("分类内容").fontSize(24) }
        .tabBar(Text("分类").fontSize(16))
      TabContent() { Text("我的页面").fontSize(24) }
        .tabBar(Text("我的").fontSize(16))
    }
    .width("100%")
    .height(400)
  }
}

快速选型总结

1. 简单上下排列 → Column
2. 简单左右一行 → Row
3. 叠加浮层 / 角标 → Stack
4. 流式自动换行 / 均分 → Flex
5. 组件互相参照定位 → RelativeContainer
6. 图片滑动轮播 → Swiper
7. 顶部底部切换页面 → Tabs