Row 横向线性布局

Row({
  space: 10, // 子组件之间的间距（横向）
  alignItems: VerticalAlign.Center, // 垂直方向对齐方式（Top / Center / Bottom / Stretch）
  justifyContent: FlexAlign.Start // 主轴（横向）排列方式（Start / Center / End / SpaceBetween / SpaceAround / SpaceEvenly）
}) {
  Text('第一个').fontSize(16).backgroundColor('#FFCCCC')
  Text('第二个').fontSize(16).backgroundColor('#CCFFCC')
}
.padding(12)
.backgroundColor('#F5F5F5')

Column 纵向线性布局

Column({
  space: 12, // 子组件之间的间距（纵向）
  alignItems: HorizontalAlign.Center, // 水平方向对齐方式（Start / Center / End / Stretch）
  justifyContent: FlexAlign.Start // 主轴（纵向）排列方式
}) {
  Text('上方内容').fontSize(18).backgroundColor('#FFDDDD')
  Text('下方内容').fontSize(18).backgroundColor('#DDFFDD')
}
.padding(10)
.backgroundColor('#EFEFEF')

Stack 组件堆叠布局

Stack({
  alignContent: Alignment.Center, // 内容整体对齐方式（TopStart / Center / BottomEnd 等）
  alignItems: Alignment.TopStart // 子组件默认对齐方式
}) {
  Image($r('app.media.bg'))
    .width(200)
    .height(200)
    .borderRadius(8)

  Text('上层文本')
    .fontSize(20)
    .fontColor(Color.White)
}
.width('100%')
.height(300)
.backgroundColor('#333')

Flex 弹性布局容器

Flex({
  direction: FlexDirection.Row, // 主轴方向（Row / Column）
  justifyContent: FlexAlign.SpaceAround, // 主轴对齐方式
  alignItems: ItemAlign.Center, // 交叉轴对齐方式
  wrap: FlexWrap.Wrap // 是否换行（NoWrap / Wrap / WrapReverse）
}) {
  Text('子项1').width(100).height(50).backgroundColor('#A6E3E9')
  Text('子项2').width(100).height(50).backgroundColor('#FFB6B9')
  Text('子项3').width(100).height(50).backgroundColor('#D8E2DC')
}
.padding(10)

Wrap 自动换行布局

Wrap({
  spacing: 10, // 主轴方向的间距
  runSpacing: 8, // 交叉轴（换行）间距
  alignContent: WrapAlign.Center, // 整体内容对齐
  alignItems: ItemAlign.Center // 每行子项对齐方式
}) {
  ForEach([1, 2, 3, 4, 5], item => {
    Text('项 ' + item)
      .padding(8)
      .backgroundColor('#C1E1C1')
  })
}
.padding(12)
GridContainer 网格布局容器

GridContainer({
  columns: 3, // 每行显示多少列
  gutter: 12, // 网格之间的间距
  margin: 8, // 网格整体外边距
  alignment: GridRowAlignment.Center // 内容对齐方式（Start / Center / End / SpaceAround / SpaceBetween）
}) {
  ForEach([1, 2, 3, 4, 5, 6], item => {
    Text('格子 ' + item)
      .height(50)
      .backgroundColor('#FFD6A5')
      .textAlign(TextAlign.Center)
  })
}
.padding(10)