This content originally appeared on DEV Community and was authored by wei chang
今天分享一个简单的图片预览器，支持加载本地和网络图片，支持滑动翻页和默认页数。使用系统弹窗组件CustomDialogController实现。
首先搭建弹窗的内容部分，使用Swiper可以完美解决多张图片的滑动、翻页、默认页数等功能。
@CustomDialog
export 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()
This content originally appeared on DEV Community and was authored by wei chang
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
wei chang | Sciencx (2025-03-23T03:48:15+00:00) 鸿蒙Next开发实战案例–图片预览器. Retrieved from https://www.scien.cx/2025/03/23/%e9%b8%bf%e8%92%99next%e5%bc%80%e5%8f%91%e5%ae%9e%e6%88%98%e6%a1%88%e4%be%8b-%e5%9b%be%e7%89%87%e9%a2%84%e8%a7%88%e5%99%a8/
" » 鸿蒙Next开发实战案例–图片预览器." wei chang | Sciencx - Sunday March 23, 2025, https://www.scien.cx/2025/03/23/%e9%b8%bf%e8%92%99next%e5%bc%80%e5%8f%91%e5%ae%9e%e6%88%98%e6%a1%88%e4%be%8b-%e5%9b%be%e7%89%87%e9%a2%84%e8%a7%88%e5%99%a8/
HARVARDwei chang | Sciencx Sunday March 23, 2025 » 鸿蒙Next开发实战案例–图片预览器., viewed ,<https://www.scien.cx/2025/03/23/%e9%b8%bf%e8%92%99next%e5%bc%80%e5%8f%91%e5%ae%9e%e6%88%98%e6%a1%88%e4%be%8b-%e5%9b%be%e7%89%87%e9%a2%84%e8%a7%88%e5%99%a8/>
VANCOUVERwei chang | Sciencx - » 鸿蒙Next开发实战案例–图片预览器. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/03/23/%e9%b8%bf%e8%92%99next%e5%bc%80%e5%8f%91%e5%ae%9e%e6%88%98%e6%a1%88%e4%be%8b-%e5%9b%be%e7%89%87%e9%a2%84%e8%a7%88%e5%99%a8/
CHICAGO" » 鸿蒙Next开发实战案例–图片预览器." wei chang | Sciencx - Accessed . https://www.scien.cx/2025/03/23/%e9%b8%bf%e8%92%99next%e5%bc%80%e5%8f%91%e5%ae%9e%e6%88%98%e6%a1%88%e4%be%8b-%e5%9b%be%e7%89%87%e9%a2%84%e8%a7%88%e5%99%a8/
IEEE" » 鸿蒙Next开发实战案例–图片预览器." wei chang | Sciencx [Online]. Available: https://www.scien.cx/2025/03/23/%e9%b8%bf%e8%92%99next%e5%bc%80%e5%8f%91%e5%ae%9e%e6%88%98%e6%a1%88%e4%be%8b-%e5%9b%be%e7%89%87%e9%a2%84%e8%a7%88%e5%99%a8/. [Accessed: ]
rf:citation » 鸿蒙Next开发实战案例–图片预览器 | wei chang | Sciencx | https://www.scien.cx/2025/03/23/%e9%b8%bf%e8%92%99next%e5%bc%80%e5%8f%91%e5%ae%9e%e6%88%98%e6%a1%88%e4%be%8b-%e5%9b%be%e7%89%87%e9%a2%84%e8%a7%88%e5%99%a8/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.