1.垂直布局 Column

排列规则：子组件从上至下垂直依次排列
适用场景：表单、详情页、竖向列表、页面主体内容

Column(){
  Text("第一行")
  Text("第二行")
}.width("100%").height(300)

2.水平布局 Row

排列规则：子组件从左至右水平依次排列

适用场景：导航栏、按钮组、横向选项、输入框 + 按钮组合

Row(){
      Text("第一行")
      Text("第二行")
    }.width("100%")

3.相对布局 RelativeContainer

排列规则：通过alignRules设置组件之间相对位置（A 在 B 左边 / 下边 / 对齐）
适用场景：元素位置相互依赖、不规则排版、图文混排

相对父容器

RelativeContainer() {
  Text("居中")
    .id("centerTxt")
    .alignRules({
      center: { anchor: "__container__", align: VerticalAlign.Center },
      middle: { anchor: "__container__", align: HorizontalAlign.Center }
    })
}
.width("100%").height(300)

相对兄弟组件

RelativeContainer() {
  Text("A")
    .width(80).height(80)
    .id("boxA")
    .alignRules({
      top: { anchor: "__container__", align: VerticalAlign.Top },
      start: { anchor: "__container__", align: HorizontalAlign.Start }
    })

  Text("B在A右侧")
    .width(80).height(80)
    .id("boxB")
    .alignRules({
      top: { anchor: "boxA", align: VerticalAlign.Top },
      start: { anchor: "boxA", align: HorizontalAlign.End }
    })
}
.width("100%").height(300)

4.层叠布局 Stack

排列规则：子组件层级叠加，后写的组件覆盖上层

适用场景：图片上加文字、弹窗浮层、头像角标

Stack(){
      Image($r('app.media.banner1'))
      Text("浮层文字").fontSize(20).fontColor(Color.White)
    }.width(300).height(200)

5.弹性布局 Flex

排列规则：融合 Row/Column，可切换横向 / 纵向弹性流式排布，支持自动换行

适用场景：标签流、多元素自适应、自动换行的按钮组

横向自动换行

Flex({ wrap: FlexWrap.Wrap }) {
  Text("标签1").padding(8).margin(6)
  Text("标签2").padding(8).margin(6)
  Text("标签3").padding(8).margin(6)
}
.width("100%")

纵向均分布局

Flex({ direction: FlexDirection.Column }) {
  Button("按钮1")
  Button("按钮2")
}
.height(200)
.justifyContent(FlexAlign.SpaceEvenly)