鸿蒙开发:dialog库做了一些优化

简介: 除了代码上的优化之外,针对功能和文档也做了同步更新,目前把dialog拆分了八大功能模块,几乎涵盖各个业务需求,分别是:1、自定义形式,2、时间弹窗,3、城市选择,4、确认&信息,5、底部列表&网格,6、toast,7、popup形式,8、loading形式。

前言


本文基于Api13


dialog库是我去年5月份开发了一个便捷弹窗库,主打一个使用简单,一经推出,在dialog领域下载量稳居在前,可以说是非常受欢迎的;但是,之前的版本仍然有着可优化的空间,比如弹窗内容不支持动态更新,时间弹窗数据是循环遍历,造成了数据加载慢,还有弹窗无法根据标识隐藏等等,这些问题的存在,导致了在特定场景下无法满足的情况,不得不促使着自己进行优化更新。


除了代码上的优化之外,针对功能和文档也做了同步更新,目前把dialog拆分了八大功能模块,几乎涵盖各个业务需求,分别是:1、自定义形式,2、时间弹窗,3、城市选择,4、确认&信息,5、底部列表&网格,6、toast,7、popup形式,8、loading形式


中心仓库地址如下,目前版本为1.2.0,本文不在赘述使用方式,只介绍优化项,大家如果想看使用方式,直接查看中心仓库地址即可:


https://ohpm.openharmony.cn/#/cn/detail/@abner%2Fdialog


支持的功能很多,无法做到一一截图,主要的功能效果如下,有一点需要说的是,所有的弹窗样式均可以通过全局初始化统一设置,或者在调用的时候进行单独设置。


首先是常见的信息确认形式,支持单双按钮,并且支持message自定义组件形式,最新的版本也已经支持数据的动态更新。



底部列表形式,支持常见的单列表,网格,列表滚动选择等形式,并且默认支持动画从底部弹出,适用于场景的性别选择,分享,条件选择等场景。



时间选择器,这一版,优化比较大,舍弃了之前的数据遍历,改为了单组件获取,这样大大提高了数据的加载速度。



内置了城市地址选择,如果不满足需求,您可以通过底部列表样式,自己来实现。



toast和系统不一样的是,可以自行设置圆角和背景,以及设置自己的icon图标。



具体使用,之前也有写过,并且中心仓库以及Gihub中也有文档说明,这里不在赘述了,简单说下本次优化的几个问题。


优化一、内容支持更新


之前的版本中,弹窗的内容默认传递什么就是什么,无法在弹窗弹出后进行动态更新,虽然大部分的场景下不需要更新,但是在一些特殊的场景下,这样的效果也是存在的,为了满足这部分需求,1.2.0针对这个问题做了统一的处理。


信息弹窗形式更新


参数为ContentAttribute,支持标题,描述信息,按钮,以及相关样式等全部的属性更新。


updateDialogInfo()


比如信息弹窗弹出后,我需要更新标题和描述信息,可以如下代码操作:


updateDialogInfo({
              title:"我更新了标题",
              message:"我更新了描述"
            })


确认弹窗形式更新


和信息弹窗除了更新方法不一样之外,参数是一模一样的。


updateDialogConfirm()


比如弹窗弹出后,我需要更新标题和描述信息,可以如下代码操作,当然了,你也可以更新其他的属性,比如按钮的内容,弹窗的样式等。


updateDialogConfirm({
              title:"我更新了标题",
              message:"我更新了描述"
            })


自定义弹窗形式更新


参数是Object,和弹出自定义弹窗传递的数据类型一样。


updateDialogParams()


popup弹窗数据更新


参数是Object,和传递的数据类型一样。


updatePopupData()


优化二、时间弹窗数据优化


由于系统的组件无法满足UI的样式,针对时间弹窗做了一层封装,系统虽然提供了可供选择的滚动组件TextPicker,但是所有的数据都需要自己来设置;因为时间格式的不同,比如年月日时分秒,年月日时分等,所展示的列也是不同的,上一版,由于需要联动的机制,采取了数据循环遍历,非常的耗时,比如年月日时分秒,需要遍历起始年,然后对每一年再遍历月,一层层往下走,非常的不便。


这一版,不在嵌套遍历,而是单独的执行遍历,年是年,月是月,日是日,时是时,分是分,秒是秒,只是在滚动单独列的时候,再去初始化数据和执行联动机制,极大的缩短了数据加载的时间。


使用方式上和之前保持不变,通过timeType字段区分时间展示类型。


showDialogTime({
          titleBarAttribute: {
            titleText: "年月日-弹窗",
          },
          timeAttribute: {
            timeType: TimeDialogType.YMD,
            startTime: "2024-10-24",
            selectTime: "2024-12-24",
            endTime: "2029-12-10",
          },
          timeConfirmClick: (date) => {
            //时间回调
            console.log("===时间结果:" + date)
          },
          confirmClick: (value, index) => {
            //内容和索引回调
            console.log("===内容结果:" + value + "====" + index)
          }
        })


优化三、支持多种隐藏模式


之前的版本只支持单一的顶层隐藏模式,也就是从上到下逐一隐藏,但是在有些特殊的场景的,dialog弹出顺序不一样,隐藏顺序也不一样,比如,我弹出了三个弹窗,我要先隐藏第二个,再隐藏第三个和第一个,之前的版本就无法实现,为了解决这个问题,这个版本,增加可以按照索引顺序隐藏和按照指定id隐藏的模式。


按照位置索引隐藏


适用于多个弹窗的情况下,只需要传递索引即可,比如弹出了三个弹窗,想隐藏第二个,就可以传索引1。


hidePosition(1)


按照指定id进行隐藏


也仅适用于多弹窗的情况下,和位置索引不同的是,你不需要考虑弹窗的弹出顺序,只需要标记弹窗的id,隐藏的时候直接传id即可。


使用id隐藏需要在弹出弹窗时进行设置id,可以通过dialogAttribute中的dialogId属性进行设置:


dialogAttribute:{
 dialogId:"dialogInfo1",
}


隐藏时直接隐藏对应的id即可。


hideDialogId("dialogInfo1")


优化四、toast和loading单独封装


之前toast和loading是和普通的弹窗绑定在一起的,由于toast和loading的使用频率很大,索性就单独抽取封装了,防止在使用的时候,造成不必要的问题。


优化五、message内容支持自定义组件


之前的message内容都是字符串形式的,为了兼顾到多样的需求,本次版本支持大家传递自定义组件形式,同样也支持动态数据的传递,支持确认取消形式和信息弹窗形式。


showDialogConfirm({
            title: "我是标题",
            messageView: wrapBuilder(MessageView), //传递自定义视图
            messageData: new TextBean("我是自定义的message视图", true), //传递自定义数据,可以是任意的类型
            clickConfirm: () => {
              //确认
              hide() //隐藏dialog
            }
          })


相关总结


当然了,目前仍然有很多可优化的项,比如时间弹窗中的跨步选择,跨月日期等等,在后续的时间安排中,也会着重的去解决这个问题,也希望友友们在使用的过程中能够踊跃的发现问题和提出问题,感谢大家。


相关文章
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
3月前
|
存储 IDE 定位技术
【HarmonyOS 5】鸿蒙组件&模板服务详解 - 助力高效开发的利器
在移动应用开发领域,效率与质量始终是开发者追求的核心目标。鸿蒙系统作为新兴的操作系统,为开发者提供了丰富且强大的开发资源,其中鸿蒙组件&模板服务更是成为开发者快速构建高质量应用的得力助手。
126 0
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:银行App
仓颉语言银行App项目分享,页面布局采用List容器,实现沉浸式体验与模块化设计。顶部资产模块结合Stack与Row布局,背景图与内容分离,代码清晰易懂;功能按钮部分通过负边距实现上移效果,圆角仅保留顶部;热门推荐使用header组件,结构更规范。整体代码风格与ArkTS相似,但细节更灵活,适合金融类应用开发。
|
2月前
|
存储 SQL 前端开发
跟老卫学HarmonyOS开发:ArkTS关系型数据库开发
本节以“账本”为例,使用关系型数据库接口实现账单的增、删、改、查操作。通过创建ArkTSRdb应用,演示如何操作RdbStore进行数据管理,并结合界面按钮实现交互功能。
113 0
跟老卫学HarmonyOS开发:ArkTS关系型数据库开发
|
3月前
|
编译器 程序员 开发者
详解HarmonyOS NEXT系统中ArkTS和仓颉的混合开发
本文介绍了鸿蒙系统中ArkTs与仓颉语言的混合开发方法,讲解了如何通过DevEco Studio创建混合项目、目录结构特点及组件调用方式,强调编译器自动化处理大幅简化开发流程,提升了开发体验。
HarmonyOS NEXT仓颉开发语言实战案例:图片预览器
本文介绍了如何使用仓颉语言实现图片放大预览器。通过弹窗组件`CustomDialogController`与`Swiper`容器结合,实现全屏图片浏览效果,支持多图切换与点击关闭功能,适配动态广场场景下的图片预览需求。
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
本文介绍了使用仓颉语言开发类似朋友圈的动态广场页面,包含导航栏和状态列表。通过Column、Row、List等组件实现页面结构,并使用Grid适配图片展示。结合数据绑定与组件化思想,完成动态内容展示。
|
3月前
|
前端开发
HarmonyOS NEXT仓颉开发语言实现画板案例
本文介绍了使用仓颉开发语言实现画板功能的案例,通过Canvas组件实现画布绘制,并利用贝塞尔曲线使画笔跟随触摸轨迹生成平滑曲线。内容包含画布初始化、触控事件处理及清空功能,展示了仓颉语言在图形绘制中的应用技巧。
详解HarmonyOS NEXT仓颉开发语言中的全局弹窗
仓颉语言提供全局弹窗模块prompt_action,支持无需页面依赖的弹窗功能。包含三种预设弹窗:文字提示、对话框及菜单弹窗,也可自定义内容并动态控制关闭。适用于各类交互场景,提升开发效率。

热门文章

最新文章