鸿蒙常用容器组件介绍

本文章组要介绍在鸿蒙应用级开发中常用的容器组件，了解组件特性，帮助小伙伴们理解组件，主要介绍以下组件：

1. 线性布局（Column / Row）
2. 弹性布局（Flex）
3. 层叠布局（Stack）

在介绍布局容器之前我们首先要了解主轴和交叉轴的知识：

• 主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。
• 交叉轴：垂直于主轴方向的轴线。

线性布局

线性布局是最常用的容器，很多基础结构都会用到。在线性布局中还存在元素之间的间距。

1. Column 容器

Column 容器主轴方向默认是垂直的。

基础用法

Column({参数配置}) {
// 内部结构
}
.属性

对上述参数以及相关属性进行说明：

• 参数：这里我们所用的参数就是 space，可以设置子元素之间的间距。

• 属性

  • justifyContent()：这是设置主轴的对齐方式，使用FlexAlign的枚举，效果图如下：

• alignItems()：这是设置交叉轴的对齐方式，使用HorizontalAlign的枚举，效果图如下：

2. Row 容器

Row 容器主轴方向默认是水平的，参数和 Column 容器一致。

基础用法

Row({ space: 20 }) {
// 内部结构
}
.属性

对上述参数以及相关属性进行说明：

• 参数：和 Column 容器一致，也是space控制子元素间距

• 属性：也是主轴和交叉轴的对齐状态

1. justifyContent()：使用FlexAlign的枚举，示例如下：

2. alignItems()：使用VerticalAlign的枚举，示例如下：

弹性布局

弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。

基本使用

Flex({参数配置}) {
// 内容结构
}
.通用属性

对上述参数进行说明：

• direction：使用FlexDirection的枚举，可以改变Flex的主轴方向，示例如下：

• wrap：使用FlexWrap的枚举，属性值以及效果如下：

测试代码：

    @Entry
    @Component
    struct Test {
      build() {
        Column() {
          // 1. 默认不换行
          Flex({ wrap: FlexWrap.NoWrap }) {
            Text('1')
              .width('50%').height(80).backgroundColor(Color.Pink)
            Text('2')
              .width('50%').height(80).backgroundColor(Color.Orange)
            Text('3')
              .width('50%').height(80).backgroundColor(Color.Red)
          }
          .height(240)
          .backgroundColor('#ccc')
          .width('100%')
    ​
          // 2. 换行
          Flex({ wrap: FlexWrap.Wrap }) {
            Text('1')
              .width('50%').height(80).backgroundColor(Color.Pink)
            Text('2')
              .width('50%').height(80).backgroundColor(Color.Orange)
            Text('3')
              .width('50%').height(80).backgroundColor(Color.Red)
          }
          .height(240)
          .backgroundColor('#ccc')
          .width('100%')
    ​
          // 3. 换行并反向排列
          Flex({ wrap: FlexWrap.WrapReverse }) {
            Text('1')
              .width('50%').height(80).backgroundColor(Color.Pink)
            Text('2')
              .width('50%').height(80).backgroundColor(Color.Orange)
            Text('3')
              .width('50%').height(80).backgroundColor(Color.Red)
          }
          .height(240)
          .backgroundColor('#ccc')
          .width('100%')
        }
      }
    }

• justifyContent：使用FlexAlign的枚举，和线性布局中justifyContent()属性的使用方法一致，这里就不做演示了

• alignItems：使用ItemAlign的枚举，属性如下：

  • ItemAlign.Auto：使用Flex容器中默认配置
  • ItemAlign.Start：交叉轴方向首部对齐
  • ItemAlign.Center：交叉轴方向居中对齐
  • ItemAlign.End：交叉轴方向底部对齐
  • ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸
  • ItemAlign. Baseline：交叉轴方向文本基线对齐

  详细属性资料请参考交叉轴对齐方式

层叠布局

层叠布局（Stack）简单来讲就是把内部的所有元素层叠在一起，全部都绝对定位到一个位置。

基本使用

Stack({参数}) {
// 内部组件
}
.通用属性

对上述参数进行说明：

• alignContent：使用Alignment的枚举，是一个九宫格布局

把所有的内部组件全部层叠到一起进行展示，我们可以对内部组件的位置进行调整，使其达到我们所需要的效果，调整位置我们可以选择相对定位offset、绝对定位position、位移translate等