实现图片九宫格鸿蒙示例代码

Grid() {
  ForEach(this.mainViewModel.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('50%')
.borderRadius(12)
.columnsTemplate('1fr 1fr 1fr') //3列
.rowsTemplate('1fr 1fr 1fr') //3行
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

Swiper(this.swiperController) {
  ForEach(this.mainViewModel.getFinancialGridData(), (item: ItemData) => {
    Image(item.img)
      .width('90%')
      .height('90%')
      .margin({ top: 4 })
      .onClick(() => {
        this.pageStack.clear()
      })
  })
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.