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

本文原创发布在华为开发者社区。

介绍

本示例基于Grid网格容器实现图片九宫格展示功能，使用swipr实现图片滑动预览功能。

实现图片九宫格源码链接

效果预览

使用说明

打开页面，展示九宫格图片。点击图片，进入该图片的滑动展示页面。在该页面中可以通过滑动切换图片位置，切换图片。

实现思路

1. 通过Grid网格容器构造图片九宫格，通过Navigation组件实现点击图片后跳转到对应图片的展示页面

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行

2. 页面跳转以后读取图片编号，展示对应图片。

Swiper(this.swiperController) {
  ForEach(this.mainViewModel.getFinancialGridData(), (item: ItemData) => {
    Image(item.img)
      .width('90%')
      .height('90%')
      .margin({ top: 4 })
      .onClick(() => {
        this.pageStack.clear()
      })
  })
}