上文分享了如何使用仓颉语言实现动态广场，动态广场中有很多图片，本文一下如何使用仓颉语言实现一个图片放大预览器：
看到这个效果，我首先想到的实现方案是弹窗，弹窗的弹出和消失效果为我们节省了很多工作，这里使用的是 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 语言 ##仓颉 ##休闲娱乐 #
评论