HarmonyOS NEXT - 网格布局（Grid）

Question

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

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

接口

Grid(scroller?: Scroller, layoutOptions?: GridLayoutOptions)

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

行、列数量与占比同时设置：Grid只展示固定行列数的元素，其余元素不展示，且Grid不可滚动。（推荐使用该种布局方式）
只设置行、列数量与占比中的一个：元素按照设置的方向进行排布，超出的元素可通过滚动的方式展示。
行列数量与占比都不设置：元素在布局方向上排布，其行列数由布局方向、单个网格的宽高等多个属性共同决定。超出行列容纳范围的元素不展示，且Grid不可滚动。

通过设置行列数量与尺寸占比可以确定网格布局的整体排列方式。
Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比。rowsTemplate和columnsTemplate属性值是一个由多个空格和'数字+fr'间隔拼接的字符串，fr的个数即网格布局的行或列数，fr前面的数值大小，用于计算该行或列在网格布局宽度上的占比，最终决定该行或列宽度。

在两个网格单元之间的网格横向间距称为行间距，网格纵向间距称为列间距
通过Grid的rowsGap和columnsGap可以设置网格布局的行列间距

代码实例：GridPage

@Entry
@Component
struct GridPage {
  @State message: string = 'GridPage';

  @Styles gridItemStyle(){
    .backgroundColor(Color.Orange)
    // .margin(4)
  }

  build() {
    Column() {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      Grid(){
        GridItem(){
          Text('1')
        }.gridItemStyle()

        GridItem(){
          Text('2')
        }.gridItemStyle()

        GridItem(){
          Text('3')
        }.gridItemStyle()

        GridItem(){
          Text('4')
        }.gridItemStyle()

        GridItem(){
          Text('5')
        }.gridItemStyle()

        GridItem(){
          Text('6')
        }.gridItemStyle()

        GridItem(){
          Text('7')
        }.gridItemStyle()

        GridItem(){
          Text('8')
        }.gridItemStyle()

        GridItem(){
          Text('9')
        }.gridItemStyle()
      }
      .size({width:300,height:300})
      .rowsTemplate('1fr 1fr 1fr')
      .columnsTemplate('1fr 2fr 1fr')
      .backgroundColor('#EEEEEE')
      .padding(10)
      .columnsGap(10)
      .rowsGap(10)
    }
    .height('100%')
    .width('100%')
  }
}

性能优化

与长列表的处理类似，循环渲染适用于数据量较小的布局场景，当构建具有大量网格项的可滚动网格布局时，推荐使用数据懒加载方式实现按需迭代加载数据，从而提升列表性能。
当使用懒加载方式渲染网格时，为了更好的滚动体验，减少滑动时出现白块，Grid组件中也可通过cachedCount属性设置GridItem的预加载数量，只在懒加载LazyForEach中生效。
设置预加载数量后，会在Grid显示区域前后各缓存cachedCount*列数个GridItem，超出显示和缓存范围的GridItem会被释放。
代码实例

Grid() {
  LazyForEach(this.dataSource, () => {
    GridItem() {
    }
  })
}
.cachedCount(3)