学习笔记（二十四）：ArkUi-网格 (Grid/GridItem)

概述：

网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。

网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。

ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。

Grid组件支持使用条件渲染、循环渲染、懒加载等方式生成子组件。

 

网格布局是一种二维布局。Grid组件支持自定义行列数和每行每列尺寸占比、设置子组件横跨几行或者几列，

同时提供了垂直和水平布局能力。当网格容器组件尺寸发生变化时，

所有子组件以及间距会等比例调整，从而实现网格布局的自适应能力。根据Grid的这些布局能力，可以构建出不同样式的网格布局，如下图所示。

 

 

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

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

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

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

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

 

1、设置排列方式

rowsTemplate和columnsTemplate属性值是一个由多个空格和'数字+fr'间隔拼接的字符串，

fr的个数即网格布局的行或列数，fr前面的数值大小，用于计算该行或列在网格布局宽度上的占比，最终决定该行或列宽度。

      Grid() {

      }
      .rowsTemplate('1fr 1fr') // 设置两行
      .columnsTemplate('1fr 2fr 1fr') // 设置三列 占比权重分别为1 2 1

 

2、设置主轴方向

若没有设置行列数量与占比，可以通过layoutDirection设置网格布局的主轴方向，决定子组件的排列方式。

此时可以结合minCount和maxCount属性来约束主轴方向上的网格数量。

Grid() {
  ...
}
.maxCount(3)  // 一行最多3个
.layoutDirection(GridDirection.Row) // 从左到右排列，超出换下一行

 

说明

• layoutDirection属性仅在不设置rowsTemplate和columnsTemplate时生效，此时元素在layoutDirection方向上排列。
• 仅设置rowsTemplate时，Grid主轴为水平方向，交叉轴为垂直方向。
• 仅设置columnsTemplate时，Grid主轴为垂直方向，交叉轴为水平方向。

3、设置行列间距

Grid() {
  ...
} 
.columnsGap(10) // 设置列间距10
.rowsGap(15) // 设置行间距15

4、构建可滚动的网格布局

在设置Grid的行列数量与占比时，如果仅设置行、列数量与占比中的一个，

即仅设置rowsTemplate或仅设置columnsTemplate属性，网格单元按照设置的方向排列，超出Grid显示区域后，Grid拥有可滚动能力。 

Grid() {
        ForEach(this.gridItems,(item,index)=>{
          GridItem(){
            Text(item)
          }
          .height('30%')
          .width('30%')
          .margin(10)
          .backgroundColor(Color.Red)
        })
      }
      .rowsTemplate('1fr 1fr 1fr') // 设置两行
      .rowsGap(10) // 设置行间距为10
      .columnsGap(20) // 设置列间距为20
      .layoutDirection(GridDirection.Row) // 设置从左到右排列，排满一行再排下一行,只设置rowsTemplate属性，当内容超出Grid区域时，可水平滚动。
      .height('50%')