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

程序员一鸣
• 阅读 1

前言

本文基于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自定义组件形式,最新的版本也已经支持数据的动态更新。

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

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

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

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

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

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

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

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

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

具体使用,之前也有写过,并且中心仓库以及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
            }
          })

相关总结

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

点赞
收藏
评论区
推荐文章
皕杰报表(关于日期时间时分秒显示不出来)
在使用皕杰报表设计器时,数据据里面是日期型,但当你web预览时候,发现有日期时间类型的数据时分秒显示不出来,只有年月日能显示出来,时分秒显示为0:00:00。1.可以使用tochar解决,数据集用selecttochar(flowdate,"yyyyMMddHH:mm:ss")fromtablename2.也可以把数据库日期类型date改成timestamp
Wesley13 Wesley13
3年前
JAVA优化篇 如何从茫茫日志中找到运行缓慢的线程
引入  JAVA提供了一些分析DUMP的工具,比如jmap,visualvm等  JAVA还有寻找线程状态的工具,jstack等  数据库也有检查连接数,连接状态的命令,status,processlist等  代码中也可以添加一些时间的信息,对比信息发现可优化的地方  但这些都不是今天要记录的内容,今天要做的是使用一个比较
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Stella981 Stella981
3年前
HarmonyOS应用开发项目实战
鸿蒙2.0已经发布了有段时间了,目前网上也有些小demo了,但是缺乏稍微大点的项目代码。我准备计划开发一个稍微正式点的项目,我写了个初略的项目需求清单,来体验鸿蒙应用开发。目前我已经着手实现了其中的一些重要功能,某些功能发现鸿蒙暂时不支持,但是还是先写上吧,后面慢慢摸索。我会陆续更新连载此贴,一步步从0基础讲解项目开发过程,然后巩固鸿蒙应用开发知识点。有错误
陈杨 陈杨
8小时前
鸿蒙5开发宝藏案例分享---Web页面内点击响应时延分析
当然可以!下面是一篇详细、易懂的文章,结合鸿蒙官方案例和实际代码,帮你深入理解Web加载完成时延的优化技巧👇🚀鸿蒙开发宝藏:Web加载完成时延优化实战(附代码解析)大家好呀!今天在翻鸿蒙开发者文档时,发现了一个隐藏的​​性能优化宝藏区​​——官方竟然悄
陈杨 陈杨
8小时前
鸿蒙5开发宝藏案例分享---Web加载时延优化解析
当然可以!下面是一篇详细、易懂的文章,结合鸿蒙官方案例和实际代码,帮你深入理解Web加载完成时延的优化技巧👇🚀鸿蒙开发宝藏:Web加载完成时延优化实战(附代码解析)大家好呀!今天在翻鸿蒙开发者文档时,发现了一个隐藏的​​性能优化宝藏区​​——官方竟然悄
陈杨 陈杨
8小时前
鸿蒙5开发宝藏案例分享---Grid性能优化案例
发现鸿蒙宝藏:优化Grid组件性能的实战技巧!大家好呀!最近在鸿蒙开发者社区挖到一个超实用的性能优化案例——​​解决Grid组件加载慢、滚动卡顿的问题​​。官方其实藏了不少宝藏案例,但很多人可能没注意到。今天我就带大家拆解这个案例,加上详细讲解和代码分析,
使用 Taro 开发鸿蒙原生应用 —— 快速上手,鸿蒙应用开发指南
随着鸿蒙系统的不断完善,许多应用厂商都希望将自己的应用移植到鸿蒙平台上。最近,Taro发布了v4.0.0beta.x版本,支持使用Taro快速开发鸿蒙原生应用,也可将现有的小程序转换为鸿蒙原生应用。在《使用Taro开发鸿蒙原生应用》系列文章中,我们已经介绍
陈杨 陈杨
8小时前
鸿蒙5开发宝藏案例分享---性能优化案例解析
鸿蒙性能优化宝藏指南:实战工具与代码案例解析大家好呀!今天在翻鸿蒙开发者文档时,意外挖到一个性能优化宝藏库——原来官方早就提供了超多实用工具和案例,但很多小伙伴可能没发现!这篇就带大家手把手玩转这些神器,附上代码级解决方案,让你的应用流畅到飞起🛠️一、鸿
陈杨 陈杨
8小时前
鸿蒙5开发宝藏案例分享---分析帧率问题
鸿蒙性能优化宝藏:帧率问题实战案例解析​​嘿,各位鸿蒙开发者!​​今天分享一个开发中的大发现——鸿蒙官方文档里藏着一堆超实用的性能优化案例!这些案例不仅解决了常见的丢帧卡顿问题,还附带了详细的分析思路和代码改造方案。我整理了几个高频场景,结合代码讲解,帮你