鸿蒙5.0开发实战-图片预览器实现案例

往期鸿蒙全套实战精彩文章必看内容：

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

---

今天分享一个简单的图片预览器，支持加载本地和网络图片，支持滑动翻页和默认页数。使用系统弹窗组件CustomDialogController实现。

首先搭建弹窗的内容部分，使用Swiper可以完美解决多张图片的滑动、翻页、默认页数等功能。

@CustomDialogexport default  struct PhotoBrowser {  controller:CustomDialogController  //图片列表  images:Resource[]|string[]  //默认第几张  index:number = 0
  build() {    Swiper(){      ForEach(this.images,(str,index)=>{        Image(str)          .width('100%')          .height('100%')          .objectFit(ImageFit.Auto)      })    }    .index(this.index)    .indicatorStyle({      color:Color.White    })    .loop(false)    .backgroundColor(Color.Black)    .width('100%')    .height('100%')    .onClick(()=>{      this.controller.close()    })  }}

内容部分写完后，我们要把它放进弹窗控制器里，要注意CustomDialogController默认样式不是全屏的，通过设置customStyle和offset属性可以让弹窗全屏：

dialogController: CustomDialogController = new CustomDialogController({    builder: PhotoBrowser({images:this.imgList,index:1}),    customStyle: true,    offset: { dx: 0, dy: 0 },    alignment: DialogAlignment.Top,  })

  使用时和普通弹窗一样：

 this.dialogController.open()