写点什么

HarmonyOS NEXT 仓颉开发语言实战案例:图片预览器

作者:幽蓝计划
  • 2025-06-28
    山东
  • 本文字数:901 字

    阅读完需:约 3 分钟

上文分享了如何使用仓颉语言实现动态广场,动态广场中有很多图片,本文一下如何使用仓颉语言实现一个图片放大预览器:



看到这个效果,我首先想到的实现方案是弹窗,弹窗的弹出和消失效果为我们节省了很多工作,这里使用的是 CustomDialogController。


我们首先实现弹窗内容组件,图片预览可能会有不同数量的图片,我们要做好适配,还要实现翻页效果,所以使用 swiper 容器最为合适,具体代码如下,大家要注意接收参数的定义和弹窗点击关闭代码的写法:


package ohos_app_cangjie_entryimport ohos.base.*import ohos.component.*import ohos.state_manage.*import ohos.state_macro_manage.*import cj_res_entry.appimport std.collection.ArrayList@CustomDialogpublic  class imgdialog {    var controller: Option<CustomDialogController> = Option.None    @Prop var imgList:ArrayList<CJResource>    func build() {        Swiper(){            ForEach(imgList, itemGeneratorFunc: {img:CJResource,index:Int64 =>                        Image(img)                        .width(100.percent)                        .height(100.percent)                        .objectFit(ImageFit.Contain)                        })        }        .width(100.percent)        .height(100.percent)        .backgroundColor(Color(0, 0, 0, alpha: 0.6))        .onClick({e =>            controller.getOrThrow().close()                })    }}
复制代码


回到动态广场,这里要先初始化弹窗对象,并且传入图片列表:


@State var imglist:ArrayList<CJResource> = ArrayList<CJResource>()var dialogController: CustomDialogController = CustomDialogController(CustomDialogControllerOptions(    builder: imgdialog(imgList:imglist),    customStyle:true,    autoCancel:true))
复制代码


在弹窗的配置参数中,设置 customStyle 为 true 可以使弹窗全屏展示。最后在点击图片的时候打开弹窗:


imglist = item.getImages()dialogController.open()
复制代码


今天的内容分享完啦,感谢大家阅读。##HarmonyOS 语言 ##仓颉 ##休闲娱乐 #

用户头像

幽蓝计划

关注

还未添加个人签名 2025-05-09 加入

还未添加个人简介

评论

发布
暂无评论
HarmonyOS NEXT仓颉开发语言实战案例:图片预览器_HarmonyOS NEXT_幽蓝计划_InfoQ写作社区