当前位置：首页 > ds >正文

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

ds 2025/5/11 11:20:47

前言

本文基于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}})