ArkUI Row / Column：主轴想不明白，布局一定乱

Row 和 Column 是 ArkUI 布局里最常用的两个容器。它们不难，但很多页面乱，往往就是主轴和交叉轴没想清楚。

先分清主轴

Column 从上往下排，所以它的主轴是垂直方向。Row 从左往右排，所以它的主轴是水平方向。

justifyContent 管主轴方向怎么排，alignItems 管交叉轴方向怎么对齐。这个关系记住以后，很多布局问题不用猜。

Row({ space: 10 }) {
  this.colorBlock('左', '#7C3AED')
  this.colorBlock('中', '#1D4ED8')
  this.colorBlock('右', '#0F766E')
}
.justifyContent(FlexAlign.SpaceEvenly)
.alignItems(VerticalAlign.Center)

剩余空间交给 layoutWeight

如果一行里有左右两块内容，别总想着写死宽度。layoutWeight 可以按比例分剩余空间。

Text('1')
  .layoutWeight(1)

Text('2')
  .layoutWeight(2)

这就是 1:2 的宽度分配。实际页面里，标题区域和操作区域经常会用到这种思路。

先别套太深

Row / Column 很好用，但不是越套越稳。能用一个 Row 表达“左边内容、右边操作”，就不要为了对齐再包三四层。布局优化后面会单独讲，这一篇先把基础手感练出来。

你平时最容易卡在横向对齐，还是纵向间距？把问题拆成主轴和交叉轴以后，通常会好判断很多。

参考文档： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-build-layout

完整示例代码

文件位置：entry/src/main/ets/pages/arkUI/layout/ArkUIRowColumnDemo.ets

@Entry
@Component
struct ArkUIRowColumnDemo {
  @Builder
  sectionTitle(title: string, desc: string) {
    Column({ space: 4 }) {
      Text(title)
        .width('100%')
        .fontSize(16)
        .fontWeight(700)
        .fontColor('#0F172A')

      Text(desc)
        .width('100%')
        .fontSize(13)
        .fontColor('#64748B')
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  colorBlock(text: string, color: string) {
    Text(text)
      .width(62)
      .height(48)
      .fontSize(14)
      .fontWeight(700)
      .fontColor('#FFFFFF')
      .textAlign(TextAlign.Center)
      .backgroundColor(color)
      .borderRadius(8)
  }

  build() {
    Scroll() {
      Column({ space: 18 }) {
        Text('ArkUI Row / Column')
          .width('100%')
          .fontSize(24)
          .fontWeight(700)
          .fontColor('#0F172A')

        Text('主轴想不明白，布局一定乱')
          .width('100%')
          .fontSize(22)
          .fontWeight(700)
          .fontColor('#111827')

        Text('这一页只看 Row 和 Column。先把主轴、交叉轴、间距和剩余空间分配想清楚，后面写 Flex、Stack、RelativeContainer 才不会乱。')
          .width('100%')
          .fontSize(14)
          .fontColor('#64748B')
          .lineHeight(22)

        Column({ space: 12 }) {
          this.sectionTitle('Column 负责从上往下排', 'Column 的主轴是垂直方向。space 是主轴间距，alignItems 控制水平方向怎么对齐。')

          Column({ space: 10 }) {
            this.colorBlock('A', '#2563EB')
            this.colorBlock('B', '#0F766E')
            this.colorBlock('C', '#C2410C')
          }
          .width('100%')
          .height(210)
          .justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Center)
          .backgroundColor('#FFFFFF')
          .border({ width: 1, color: '#DBEAFE' })
          .borderRadius(8)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#EFF6FF')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('Row 负责从左往右排', 'Row 的主轴是水平方向。justifyContent 控制横向分布，alignItems 控制垂直方向对齐。')

          Row({ space: 10 }) {
            this.colorBlock('左', '#7C3AED')
            this.colorBlock('中', '#1D4ED8')
            this.colorBlock('右', '#0F766E')
          }
          .width('100%')
          .height(110)
          .justifyContent(FlexAlign.SpaceEvenly)
          .alignItems(VerticalAlign.Center)
          .backgroundColor('#FFFFFF')
          .border({ width: 1, color: '#DDD6FE' })
          .borderRadius(8)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F5F3FF')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('layoutWeight 负责分剩余空间', '两个子组件都设置 layoutWeight 后，Row 会按权重分配剩余宽度。这里是 1:2。')

          Row({ space: 10 }) {
            Text('1')
              .height(58)
              .fontSize(18)
              .fontWeight(700)
              .fontColor('#FFFFFF')
              .textAlign(TextAlign.Center)
              .backgroundColor('#C2410C')
              .borderRadius(8)
              .layoutWeight(1)

            Text('2')
              .height(58)
              .fontSize(18)
              .fontWeight(700)
              .fontColor('#FFFFFF')
              .textAlign(TextAlign.Center)
              .backgroundColor('#0F766E')
              .borderRadius(8)
              .layoutWeight(2)
          }
          .width('100%')
          .padding(10)
          .backgroundColor('#FFFFFF')
          .border({ width: 1, color: '#FED7AA' })
          .borderRadius(8)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#FFF7ED')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('先别什么都嵌套', 'Row 和 Column 很好用，但不是越套越稳。能用一个 Row 解决的，就别再包三层 Column。')

          Row({ space: 12 }) {
            Column({ space: 4 }) {
              Text('标题')
                .fontSize(15)
                .fontWeight(700)
                .fontColor('#0F172A')

              Text('副标题自然跟着标题纵向排列')
                .fontSize(12)
                .fontColor('#64748B')
            }
            .layoutWeight(1)
            .alignItems(HorizontalAlign.Start)

            Text('操作')
              .width(64)
              .height(34)
              .fontSize(13)
              .fontWeight(700)
              .fontColor('#2563EB')
              .textAlign(TextAlign.Center)
              .backgroundColor('#DBEAFE')
              .borderRadius(8)
          }
          .width('100%')
          .padding({ left: 14, right: 14, top: 14, bottom: 14 })
          .backgroundColor('#FFFFFF')
          .border({ width: 1, color: '#E2E8F0' })
          .borderRadius(8)
          .alignItems(VerticalAlign.Center)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F8FAFC')
        .borderRadius(8)
      }
      .width('100%')
      .padding(20)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}