HarmonyOS-ArkUI Grip组件

我们在学习List的时候，已经捎带引入了Grid。讲解如下图所示：

也就是，如果一个表，长宽基本都是一致的，那么此时可以完全不用Grid也可以实现，并且，优先考虑的就是List。

如果List实现不了的情况下，我们才会考虑到要不要用Grid来完成。那么grid究竟存在什么List不具备的能力呢？

我们首先看一张图就大致明白了。 Grid组件可以实现的能力：

其中中间的那张布局结构，就是Grid与List相比有明显差异的地方。当我们有需求，要求每一个子组件并非是严格的相等的宽高时，采用Grid组件是比较合适的。

好有了大概得了解 ，我们接下来来学习一下，这个组件，并掌握这么错落有致的界面应该怎么搭建，搭建的时候，组件的其他属性限制。

概述

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

ArkUI为网格布局提供了相关的组件，Grid以及GridItem。Grid用来设置布局相关参数，GridItem定义子组件相关特征。Grid组件也支持，条件渲染，循环渲染，和懒加载等方式来生成组件.

Grid与GridItem组件的关系：

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

设置排列方式

Grid的亮点就是用户可以设置排列方式，下面我们学习一下应该怎么排列。

设置行列数量与占比

首先看看效果图

Grid提供了rowsTemplate和 columnsTemplate属性，用来设置网格布局的行数，行占比，列数，列占比。他们的值的格式是一个数组，数组的数量即可表示行或者列的数量，数组的内容则代表占比。

上图，构建的是一个三行三列的网格，其中每一行的第二列都是第一行的2倍宽度。所以我们可以这样写。

@Entry
@Component
struct GridItemPage {
  @State numberList: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8']

  build() {
    Stack() {
        Grid() {
         ForEach(this.numberList, (item:string)=>{
           GridItem(){
             Text(item)
               .backgroundColor(Color.Pink)
           }
           .backgroundColor(Color.Brown)
         }, (item:string)=> item.toString())
        }
        // 注意中间一定不要有逗号,有逗号，渲染就会出问题。就是空格分开的.
        // 另外,展示的数量就是这个行列相乘的数量.即使给定的数据很多,也就会展示这几个元素,且没有滚动交互.
        .rowsTemplate('1fr 1fr 1fr')
        .columnsTemplate('1fr 2fr 1fr')
        .rowsGap(10)
      .columnsGap(10)
      }
  }
}

注意：

当Grid设置了rowsTemplate和columnsTemplate之后，相当于Grid的方向大小已经确定了，所以以下几个不奏效

• layoutDirection
• maxCount
• minCount
• cellLengh

另外，因为设置了rowsTemplate和columnsTemplate之后，相当于展示的总量已经固定死了，所以Grid的滚动效果也不会被触发，上述界面是不可以滚动的。

构建可滚动的网格布局

可滚动的网格布局，在首页或者某一个重要的Tab页中用到的是比较多的。这个实现也会用到我们上文讲的 rowsTemplete或者 columnsTemplete，但是使用的时候有个特殊的就是，只用其中一个，系统会因为没有另外一个而造成开放式的这种情形，当内容超出了所能显示的，就会有滚动效果了。

• 仅仅设置columnsTemplete： 那么就代表列是固定死了， 只能在行上进行发挥，所以滚动是上下滚动，行数随着内容有多少，就会有相应的几行。
• 仅仅设置rowsTemplete： 那么就代表行已经被固定死了，只能在列进行发挥，所以滚动的时候是左右滚动，列数随着内容有多少，就会有相应的多少列。

@Entry
@Component
struct GridItemPage {
  @State numberList: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8']
  build() {
    Stack() {
        Grid() {
         ForEach(this.numberList, (item:string)=>{
           GridItem(){
             Text(item)
               .backgroundColor(Color.Pink)
           }
           .width(100)
           .height(100)
           .backgroundColor(Color.Brown)
         }, (item:string)=> item.toString())
        }
        // 注意中间一定不要有逗号,就是空格分开的.
        // 另外,展示的数量就是这个行列相乘的数量.即使给定的数据很多,也就会展示这几个元素,且没有滚动交互.
        .rowsTemplate('1fr 1fr')
        // .columnsTemplate('1fr 2fr 1fr')
        .rowsGap(10)
      .columnsGap(10)
      .width('100%')
      .height('auto')
      }
      .width('100%')
    .height(200)
  }
}

可以观察下此时的排布，是纵向排布的！我们在写代码的时候注意下排布方向。

不均匀网格布局

我们可以通过创建Grid组件时传入GridLayoutOptions实现上图所示的，单个网格横跨多行多列的场景，设置方式如下：

layoutOptions: GridLayoutOptions = {
  regularSize: [1, 1],
  onGetRectByIndex: (index: number) => {
    if (index == key1) { // key1是“0”按键对应的index
      return [6, 0, 1, 2]; // [rowStart,columnStart,rowSpan,columnSpan] 格式
    } else if (index == key2) { // key2是“=”按键对应的index
      return [5, 3, 2, 1];
    }
    // ...
    // 这里需要根据具体布局返回其他item的位置
  }
}

Grid(undefined, this.layoutOptions) {
  // ...
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')

[rowStart,columnStart,rowSpan,columnSpan] 格式讲解

• rowStart 当前元素起始行号
• columStart 当前元素其实列号
• rowSpan 当前元素占用的行数
• columSpan 当前元素占用的列数

如果一个onGetRectByIndex回调，返回的结果是 [6， 0， 1， 2 ]也就是告知，在布局第6排第0列的数据时，它要站一行，两列的大小。

就像下方的计算器，0 的位置，就可以这么描述。

设置主轴方向

如果不做了解的话，我们可能会有一个疑惑。就是网格布局的主轴方向，有必要么？它会影响什么呢？ 答案是影响排布顺序。如图所示。

Grid设置主轴方向的属性是layoutDirection， 同时要搭配 maxCountminCount来使用

• layoutDirection 设置主轴方向。
• maxCount： 主轴方向最大可以排几个格。
• minCount： 主轴方向最小可以排几个格。

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

说明

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

上文可见，Grid在这种情况下，子组件的数量可能是变动的，所以约束了行或者列的铺排形式。相当于开放式布局。所以我们在约束的时候最好给一个最大可以排几个格子这种值。

设置行列间距

这个很简单，就是columnsGap列间距， rowsGap行间距。

Grid() {
  // ...
}
.columnsGap(10)
.rowsGap(15)

控制滚动位置

与新闻列表返回到顶部比较相似，滚动位置功能在网格布局中也比较常用，比如日历中的翻页功能。

实现方式，我们记住，凡是滚动控制，都离不开滚动控制器。我们在用系统组件的时候，但凡碰到滚动控制的时候都应该向这个方向来考虑。只是具体的控制器类型有区别，控制的内容细节有区别。套路是大差不差的。在这个案例中我们也是，在Grid构建的时候就会传入一个Scroller。这个跟List是一样的。

@Entry
@Component
struct GridItemPage {
  private gridScroller:Scroller = new Scroller()
  @State numberList: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8']
  build() {
    Column(){
        Grid(this.gridScroller) {
         ForEach(this.numberList, (item:string)=>{
           GridItem(){
             Text(item)
               .backgroundColor(Color.Pink)
           }
           .width(100)
           .height(100)
           .backgroundColor(Color.Brown)
         }, (item:string)=> item.toString())
        }
        // 注意中间一定不要有逗号,就是空格分开的.
        // 另外,展示的数量就是这个行列相乘的数量.即使给定的数据很多,也就会展示这几个元素,且没有滚动交互.
        .rowsTemplate('1fr 1fr')
        // .columnsTemplate('1fr 2fr 1fr')
        .rowsGap(10)
      .columnsGap(10)
      .width('100%')
      .height('30%')

      Row(){
        Button("上一页")
          .width(100)
          .height('wrap')
          .onClick(()=>{
            this.gridScroller.scrollPage({
              next: false
            })
          })

        Button("下一页")
          .width(100)
          .height('wrap')
          .onClick(()=>{
            this.gridScroller.scrollPage(
              {next: true}
            )
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .margin({top: 20})
      }

  }
}

Grid性能优化-懒加载

这个也就是和List的优化方式如出一辙，就是设置懒加载，然后设置加载数量。

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

属性互斥关系及注意事项总结