Grid布局最后一个元素怎么单独占一整行 - HarmonyOS 鸿蒙Next

使用irregularIndexes和onGetIrregularSizeByIndex ：

irregularIndexes是一个数组，用于指定哪些GridItem的大小是不规则的。

onGetIrregularSizeByIndex是一个函数，用于指定不规则GridItem占用的行数和列数。

参考以下demo：

import ItemData from '../common/ItemData';
import { MainViewModel } from '../common/MainViewModel';
import router from '@ohos.router';

@Entry
@Component
export struct Index {
  pathStack: NavPathStack = new NavPathStack()
  private mainViewModel: MainViewModel = new MainViewModel()

  getFinancialGridData(): Array<ItemData> {
    let liveGridData: ItemData[] = [
      new ItemData(0, $r('app.media.1')),
      new ItemData(1, $r('app.media.2')),
      new ItemData(2, $r('app.media.3')),
      new ItemData(3, $r('app.media.4')),
      new ItemData(4, $r('app.media.5')),
      new ItemData(5, $r('app.media.6')),
      new ItemData(6, $r('app.media.7')),
      new ItemData(7, $r('app.media.8')),
      new ItemData(8, $r('app.media.9')),
    ];
    return liveGridData;
  }

  //Grid 网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。
  build() {
    Navigation(this.pathStack) {
      Grid(undefined, {
        regularSize: [1, 1],
        irregularIndexes: [8],
        onGetIrregularSizeByIndex: (index: number) => {
          if (index === 8) {
            return [1, 3];
          }
          return [1, 1];
        }
      }) {
        ForEach(this.getFinancialGridData(), (item: ItemData) => {
          GridItem() {
            Column() {
              Image(item.img)
                .width(110)
                .margin({ top: 4 }).onClick(() => {
                  this.pathStack.pushPathByName('Index1', item.index)
                })
            }
          }
        })
      }
      .backgroundColor(Color.White)
      .margin({ top: 15 })
      .width('100%')
      .height('100%')
      .borderRadius(12)
      .columnsTemplate('1fr 1fr 1fr') //3列
    }
  }
}