上文分享了如何使用仓颉语言实现动态广场,动态广场中有很多图片,本文一下如何使用仓颉语言实现一个图片放大预览器:
看到这个效果,我首先想到的实现方案是弹窗,弹窗的弹出和消失效果为我们节省了很多工作,这里使用的是CustomDialogController。
我们首先实现弹窗内容组件,图片预览可能会有不同数量的图片,我们要做好适配,还要实现翻页效果,所以使用swiper容器最为合适,具体代码如下,大家要注意接收参数的定义和弹窗点击关闭代码的写法:
package ohos_app_cangjie_entry
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
import cj_res_entry.app
import std.collection.ArrayList
@CustomDialog
public 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语言##仓颉##休闲娱乐#