线性布局方式LinearLayout是在开发中一种比较常用的布局方式，是指通过横向或者是纵向的方式来对页面进行布局的方式，在HarmonyOS UI中提供了Row和Clumn两种线性容器来支持线性布局方式。下面我们就来详细介绍一下两种布局方式。

Row容器

线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，而Row容器的交叉轴位于垂直方向上。

Row容器内排列方向上的间距

在Row容器中的子元素是按照水平方向排列，如下图所示。

从上面图中我们可以看到，Row容器中的元素是横向进行布局的，而在横向布局的时候，我们可以通过space属性来调整元素的间距如下所示。

@Entry
@Component
struct Index {
  @State message: string = 'Harmony OS';

  build() {
    Row({space:35}) {
      Column() {
        Text(this.message)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
      }
      .width('30%')
      .backgroundColor('#ffcccc')
      Column() {
        Text(this.message)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
      }
      .width('30%')
      .backgroundColor('#ffcccc')
      Column() {
        Text(this.message)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
      }
      .width('30%')
      .backgroundColor('#ffcccc')
    }
    .width('90%')
  }
}

在模拟器中运行的效果如下所示

Row容器内子元素在垂直方向上的排列

如下图所示，我们可以在代码中通过.alignItems(VerticalAlign.Top)属性配置来设置在水平方向上的布局位置。

该属性有三个值分别如下所示

VerticalAlign.Top：子元素在垂直方向顶部对齐。
VerticalAlign.Center：子元素在垂直方向居中对齐。
VerticalAlign.Bottom：子元素在垂直方向底部对齐。

代码操作如下所示。

@Entry
@Component
struct Index {
  @State message: string = 'Harmony OS';

  build() {
    Row({space:20}) {
      Column() {
        Text(this.message)
          .fontWeight(FontWeight.Bold)
      }
      .backgroundColor('#ffcccc')
      Column() {
        Text(this.message)
          .fontWeight(FontWeight.Bold)
      }
      .backgroundColor('#ffcccc')
      Column() {
        Text(this.message)
          .fontWeight(FontWeight.Bold)
      }
      .backgroundColor('#ffcccc')
    }
    .width('100%')
    .height('100%')
    .alignItems(VerticalAlign.Top)
    .backgroundColor(0xD2B48C)
  }
}

Row容器内子元素在水平方向上的排列

聊完在竖直方向上的排列之后，我们下面来看看在水平方向上的排列，如下图所示

我们可以通过.justifyContent(FlexAlign.Start)配置属性来设置相关的属性配置，该配置属性值有如下一些

justifyContent(FlexAlign.Start)：这种布局方式是指，将元素在水平方向上从左往右开始逐次排列。

justifyContent(FlexAlign.Center)：这种布局方式是将元素从中心位置开始对其排列，也就是说第一个元素与行首的距离与最后一个元素与行尾距离相同。

justifyContent(FlexAlign.End)：这种方式与Start的方式作用相反，元素在水平方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。

justifyContent(FlexAlign.SpaceBetween)：水平方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐，如下图所示。

justifyContent(FlexAlign.SpaceAround)：这种布局方式是指将元素在水平方向上进行均匀分配，并且两个相邻元素之间距离相同。并且第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半，如下图所示。

justifyContent(FlexAlign.SpaceEvenly)：这种布局方式是指将元素在水平方向均匀分配，并且两个相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样的，如下图所示。

需要注意最后两种方式在实现上有些相似，但是需要注意二者在分布距离上的不同。

总结

上面我们介绍了关于Row容器的相关布局以及使用方式，其他的例如布局宽高、布局背景色、外边距、内边距则是一些标准属性，有兴趣的读者可以自己进行测试。

顾乔芝士网

持续更新的前后端开发技术栈

鸿蒙开发入门-UI开发之线性布局Row详解

Row容器

总结