鸿蒙开发笔记(十八): 网格 Grid/GridItem,轮播 Swiper

1. 网格 Grid/GridItem

网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。

ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。

1.1 布局与约束

Grid组件为网格容器，其中容器内每一个条目对应一个GridItem组件，如下图所示。

网格布局是一种二维布局。Grid组件支持自定义行列数和每行每列尺寸占比、设置子组件横跨几行或者几列，同时提供了垂直和水平布局能力。当网格容器组件尺寸发生变化时，所有子组件以及间距会等比例调整，从而实现网格布局的自适应能力。根据Grid的这些布局能力，可以构建出不同样式的网格布局，如下图所示。

如果Grid组件设置了宽高属性，则其尺寸为设置值。如果没有设置宽高属性，Grid组件的尺寸默认适应其父组件的尺寸。

Grid组件根据行列数量与占比属性的设置，可以分为三种布局情况：

1. 行、列数量与占比同时设置：Grid只展示固定行列数的元素，其余元素不展示，且Grid不可滚动。（推荐使用该种布局方式）

2. 只设置行、列数量与占比中的一个：元素按照设置的方向进行排布，超出的元素可通过滚动的方式展示。

3. 行列数量与占比都不设置：元素在布局方向上排布，其行列数由布局方向、单个网格的宽高等多个属性共同决定。超出行列容纳范围的元素不展示，且Grid不可滚动。

1.2 设置排列方式

1. 设置行列数量与占比

通过设置行列数量与尺寸占比可以确定网格布局的整体排列方式。Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比。

rowsTemplate和columnsTemplate属性值是一个由多个空格和’数字+fr’间隔拼接的字符串，fr的个数即网格布局的行或列数，fr前面的数值大小，用于计算该行或列在网格布局宽度上的占比，最终决定该行或列的宽度。

只要将rowsTemplate的值为’1fr 1fr 1fr’，同时将columnsTemplate的值为’1fr 2fr 1fr’，即可实现上述网格布局。

Grid() {
   
  ...
}
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 2fr 1fr')

当Grid组件设置了rowsTemplate或columnsTemplate时，Grid的layoutDirection、maxCount、minCount、cellLength属性不生效，属性说明可参考 Grid-属性。

2. 设置子组件所占行列数

除了大小相同的等比例网格布局，由不同大小的网格组成不均匀分布的网格布局场景在实际应用中十分常见，如下图所示。在Grid组件中，通过设置GridItem的rowStart、rowEnd、columnStart和columnEnd可以实现如图所示的单个网格横跨多行或多列的场景。

在单个网格单元中，rowStart和rowEnd属性表示指定当前元素起始行号和终点行号，columnStart和columnEnd属性表示指定当前元素的起始列号和终点列号。

GridItem() {
   
  Text(key)
    ...
}
.columnStart(1)
.columnEnd(2)
......

GridItem() {
   
  Text(key)
    ...
}
.rowStart(5)
.rowEnd(6)

3. 设置主轴方向

使用Grid构建网格布局时，若没有设置行列数量与占比，可以通过layoutDirection可以设置网格布局的主轴方向，决定子组件的排列方式。此时可以结合minCount和maxCount属性来约束主轴方向上的网格数量。

当前layoutDirection设置为Row时，先从左到右排列，排满一行再排一下一行。当前layoutDirection设置为Column时，先从上到下排列，排满一列再排一下一列，如上图所示。此时，将maxCount属性设为3，表示主轴方向上最大显示的网格单元数量为3。

Grid() {
   
  ...
}
.maxCount(3)
.layoutDirection(GridDirection.Row)

1. layoutDirection属性仅在不设置rowsTemplate和columnsTemplate时生效，此时元素在layoutDirection方向上排列。

2. 仅设置rowsTemplate时，Grid主轴为水平方向，交叉轴为垂直方向。

3. 仅设置columnsTemplate时，Grid主轴为垂直方向，交叉轴为水平方向。

1.3 在网格布局中显示数据

Grid组件可以通过二维布局的方式显示一组GridItem子组件。

Grid() {
   
  GridItem() {
   
    Text('会议')
      ...
  }

  GridItem() {
   
    Text('签到')
      ...
  }

  GridItem() {
   
    Text('投票')
      ...
  }

  GridItem() {
   
    Text('打印')
      ...
  }
}
.rowsTemplate('1fr 1fr')
.columnsTemplate('1fr 1fr')

对于内容结构相似的多个GridItem，通常更推荐使用循环渲染ForEach语句中嵌套GridItem的形式，来减少重复代码。

@Component
struct OfficeService {
   
  @State services: Array<string> = ['会议', '投票', '签到', '打印']
  ...

  build() {
   
    Column() {
   
      Grid() {
   
        ForEach(this.services, service => {
   
          GridItem() {
   
            Text