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

布局王
• 阅读 3

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

点赞
收藏
评论区
推荐文章
布局王 布局王
8小时前
仓颉开发语言入门教程:搭建开发环境
仓颉开发语言作为华为为鸿蒙系统自研的开发语言,虽然才发布不久,但是它承担着极其重要的历史使命。作为鸿蒙开发者,掌握仓颉开发语言将成为不可或缺的技能,今天我们从零开始,为大家分享仓颉语言的开发教程,今天要分享的是搭建开发环境。仓颉在DevEcostudio和
布局王 布局王
8小时前
鸿蒙仓颉开发语言实战教程:实现商城应用首页
经过了几天的入门教程,我们终于进入到了仓颉开发语言的实战环节,今天分享的内容是实现商城应用的首页页面,效果图如下:首页的内容包括导航栏、轮播图、商品分类和商品列表,我们下面逐一介绍。导航栏仓颉语言中是没有导航栏组件的,我们需要自己去开发。此处的导航栏也比较
布局王 布局王
8小时前
鸿蒙仓颉开发语言实战教程:自定义组件
关于仓颉开发语言我们已经连续分享了很多天,相信大家对于仓颉开发语言已经有了一定的了解。今天我们继续进阶,分享一个仓颉开发语言中的自定义组件知识。本文案例就以上一篇文章中的自定义tabbar为例,因为我们自己开发的tabbar一直放在index.cj文件中总
布局王 布局王
8小时前
鸿蒙仓颉语言开发教程:自定义弹窗
假期第一天,祝大家端午节快乐。昨天观看了时代旗舰尊界S800的发布,不得不感慨这车真好啊~放假闲来无事,继续跟大家分享仓颉语言的开发教程,今天介绍一下自定义弹窗。仓颉语言中的自定义弹窗和ArkTs类似,但是还是有一些不同的地方。在仓颉中通过CustomDi
布局王 布局王
8小时前
鸿蒙Next仓颉语言开发实战教程:下拉刷新和上拉加载更多
在移动应用中,各种列表页面离不开下拉刷新和上拉加载更多,我们的商城应用也是如此。今天介绍一下在仓颉开发语言中如何实现这一功能。下拉刷新仓颉开发语言直接提供了下拉刷新的组件,叫做Refresh,使用起来也非常方便:@StatevarheaderLoading
布局王 布局王
8小时前
详解HarmonyOS NEXT系统中ArkTS和仓颉的混合开发
连续分享了很多天鸿蒙仓颉语言的开发教程,大家现在应该都知道鸿蒙开发有ArkTs和仓颉两种开发语言,这两种语言有些相似,而且还支持混合开发,今天就分享一下怎么实现ArkTs和仓颉的混合开发,分不清这两种语言的友友今天可能要头疼了。官方文档对这两种语言的混合开
布局王 布局王
8小时前
详解HarmonyOS NEXT仓颉开发语言中的全局弹窗
之前分享过仓颉开发语言中的自定义弹窗,那一次的自定义弹窗需要在对应页面先初始化再进行弹出,不是很方便。今天分享一下不依赖页面的全局弹窗。仓颉提供了全局弹窗模块promptaction,使用之前先将它导入:importohos.promptaction.该模
布局王 布局王
8小时前
HarmonyOS NEXT仓颉开发语言实现画板案例
大家上午好,今天分享一下仓颉开发语言实现的画板案例。最近总是有同学说我写ArkTS冒充仓颉,为了自证清白,截图给大家看一下,确实是仓颉文件:仓颉提供了画布组件Canvas,我们所有的绘制工作都要在画布上进行,所以首先在页面添加一个足够大的画布组件:Canv
布局王 布局王
9小时前
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
大家好,今日要分享的是使用仓颉语言开发动态广场页面,也比较像朋友圈页面:整个页面分为两部分,分别是导航栏和状态列表,导航栏比较简单,我们可以先写下导航栏的具体代码和页面的基本结构:ColumnRow(10)Text('推荐').fontColor(Colo
布局王 布局王
9小时前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
大家周末好,今天依然为大家分享之前使用ArkTS实现过的案例,一个电影App,今天使用仓颉的UI再次实现,看看仓颉和ArkTs有哪些相同和不同之处。这个页面的结构比较简单,因为没有导航栏,全都使用List容器实现,最顶部是一个巨大的图片,这个不再演示,继续