HarmonyOS - 线性布局组件：Row 和 Column

前言

在搭建页面元素的场景中，最常见的就是线性布局。在 HarmonyOS 中，包含水平线性布局：Row 和垂直线性布局：Column。

在本文中，我们就来看一下 Row 和 Column 的使用方式。

Row

Row 是 HarmonyOS 中的水平线性布局，我们可以用它来包裹组件来实现水平方向的页面。下面是 Row 组件的代码示例：

struct Index {
  build() {
    Row() {
      Text("文本1")
      Text("文本2")
      Button("按钮").onClick((event: ClickEvent) => { })
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .backgroundColor(Color.Gray)
    .height('10%')
    .width('100%')
  }
}

上述代码设置了一个行高为屏幕 10% 高度的水平线性布局，背景色为灰色，里面包含三个子组件，两个文本组件，一个按钮组件。示例图如下：

从上图可以看出，线性布局内的组件是依次进行排放的。如果我们想改变他们的排列方式，可以通过 justifyContent 来进行修改，它支持设计以下几种排列方式：

• Start：从起始位置排列（默认）。
• Center：水平方向居中排列。

• End：从尾部排列。

• SpaceBetween：第一个组件头部，最后一个组件尾部，中间组件等间距排列。

• SpaceAround：中间组件等间距排列，第一个组件和最后一个组件的间距为中间组件间距的一半。

• SpaceEvenly：所有组件等间距。

Row 除了可以设置水平方向的组件排列方式，也支持通过 .alignItems() 设置垂直方向的排列方式，共支持以下三种：

• Top：垂直方向顶部排列。
• Center：垂直方向居中排列（默认）。
• Bottom：垂直方向底部排列。

除了可以设置自适应的排列方式之外，我们也可以通过 space 来设置固定的间距值。

struct Index {
  build() {
    Row({ space: 50 }) {
      Text("文本1")
      Text("文本2")
      Button("按钮").onClick((event: ClickEvent) => {
      })
    }
    .backgroundColor(Color.Gray)
    .height('10%')
    .width('100%')
  }
}

效果图如下：

Column

对于线性布局来讲，有主轴和交叉轴的概念。对于 Row 来说，主轴为水平方向，交叉轴为垂直方向；而对于 Column 来说，则主轴为垂直方向，交叉轴为水平方向。

上述代码例子和示例图给出了可以通过 justifyContent 设置 Row 主轴方向的排列方式；通过 alignItems 可以设置交叉轴的排列方式。对于 Column 则是一模一样的用法，示例代码如下：

struct Index {
  build() {
    Column() {
      Text("文本1")
      Text("文本2")
      Button("按钮").onClick((event: ClickEvent) => {})
    }
    .backgroundColor(Color.Gray)
    .justifyContent(FlexAlign.SpaceBetween)
    .alignItems(HorizontalAlign.Start)
    .height('50%')
    .width('100%')
  }
}

示例图如下：

通过 Blank 实现自适应效果

Blank 组件为空白站位组件，如果设置其宽高则会占据相应大小的位置。在我们日常的开发中，经常会碰到头尾两个组件自适应大小，中间空白填充。这种情况就可以通过 Blank 来实现：

struct Index {
  build() {
    Row() {
      Text("文本1")
      Blank()
      Button("按钮").onClick((event: ClickEvent) => {})
    }
    .backgroundColor(Color.Gray)
    .height('10%')
    .width('100%')
  }
}

通过中间添加一个不设置宽高的 Blank 组件，就可以将两个组件撑到左右边界。示例图如下：

总结

Row 和 Column 为线性布局组件，可以通过 justifyContent 设置组件的主轴方向的排列方式；通过 alignItems 可以设置组件的交叉轴的排列方式。如果需要固定大小的间距通过 space 实现。