HarmonyOS鸿蒙Next中不使用嵌套Grid实现MultiType Grid效果

HarmonyOS鸿蒙Next中不使用嵌套Grid实现MultiType Grid效果 在这里使用GridLayoutOptions的irregularIndexes和onGetIrregularSizeByIndex来实现

定义MultiType类型

enum ItemType {
  banner, //占整行
  label, //占整行
  column2, //一行2列
  column3 //一行3列
}

interface ItemEntity {
  type: ItemType
  color: ResourceColor
}

Grid代码

@Entry
@ComponentV2
struct GridPage {
  @Local array: ItemEntity[] = []
  @Local indexArray: number[] = []

  aboutToAppear(): void {
    this.array = getTestData()
    this.indexArray = Array.from<number, number>({ length: this.array.length }, (_, index) => index)
  }

  build() {
    Grid(undefined, {
      regularSize: [1, 1] ,
      irregularIndexes:this.indexArray,//1,2,3的最小公倍数是6,一行是6个columns，因为没有1行6个的item，所以所有的index都要设置
      onGetIrregularSizeByIndex:(index) =>{
        const type = this.array[index].type
        switch (type){
          case ItemType.banner:
          case ItemType.label:
            return [1,6]//1,2,3的最小公倍数是6,占满6个columns，所以就是占满整行
          case ItemType.column2:
            return [1,3]//占3个columns，就是一行2个(6/3=2)
          default :
            return [1,2]//占2个columns，就是一行3个(6/2=3)
        }
      },
    }) {
      Repeat(this.array)
        .templateId((item) =>{
          return item.type.toString()
        })
        .template(ItemType.banner.toString(),(rpItem) =>{//banner
          GridItem(){
            Text(rpItem.index.toString())
          }.backgroundColor(rpItem.item.color)
          .width('100%')
          .height(100)
        })
        .template(ItemType.label.toString(),(rpItem) =>{//label
          GridItem(){
            Text(rpItem.index.toString())
          }.backgroundColor(rpItem.item.color)
          .width('100%')
          .height(30)
        })
        .template(ItemType.column2.toString(),(rpItem) =>{//column2
          GridItem(){
            Text(rpItem.index.toString())
          }.backgroundColor(rpItem.item.color)
          .width('100%')
          .aspectRatio(1)
        })
        .each((rpItem)=>{//column3
            GridItem(){
              Text(rpItem.index.toString())
            }.backgroundColor(rpItem.item.color)
            .width('100%')
            .aspectRatio(1)
        })
        .virtualScroll({totalCount:this.array.length})
    }
    .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr') //1,2,3的最小公倍数是6
    .columnsGap(10)
    .rowsGap(10)
    .height('100%')
    .width('100%')
    .padding(10)
  }
}

测试数据：

function getTestData():ItemEntity[]{
  let array:ItemEntity[] = []
  //banner
  array.push({ type: ItemType.banner, color: Color.Red })
  //label
  array.push({ type: ItemType.label, color: Color.Grey })
  //column2
  for (let i = 0; i < 3; i++) {
    array.push({ type: ItemType.column2, color: Color.Pink })
  }
  //label
  array.push({ type: ItemType.label, color: Color.Grey })
  //column3
  for (let i = 0; i < 100; i++) {
    array.push({ type: ItemType.column3, color: Color.Orange })
  }
  return array

}

最终效果如上图。

存在的问题：

如果把测试的数据column2和column3之间lableitem去掉则会变成：

图中红圈这个item怎么跑到上面一行去了！！

个人猜测这个第4行还剩下的宽度大于column3的宽度，所以Grid把它安排到第4行，没有把它安排到下一行。

出现这种情况在column2的最后一行可以填充空白的数据。