通过弹窗控制类进行弹窗及弹窗控制

在日常开发过程中，往往需要进行使用弹窗进行提示或者进行一些信息确认

但是传统的customdialog，往往会在UI代码中占用许多篇幅，现在为大家介绍一种弹窗控制类的编写方法，使我们在需要弹窗的时候可以通过一行代码进行调用

文档地址：https://qcnda4r17bnp.feishu.cn/wiki/RqsXwAr9mifFYBkUuQGcJamRnFc

最佳实践地址：https://gitcode.com/FlyTiger_/DialogUtils/tree/master

/** * @param UIContext 外部通过new UIContext传入 * @param title 传入的弹窗文本 */ public showLightDialog(UIContext: UIContext, title: ResourceStr) { // ComponentContext赋值 this.componentContext = new ComponentContent(UIContext, wrapBuilder(DialogBuilder), title) // 进行弹窗，可以通过延时进行自动关闭 // 第二个参数是弹窗控制option this.promptAction.openCustomDialog(this.componentContext, { maskColor: Color.Transparent }) this.timer = setTimeout(() => { this.promptAction.closeCustomDialog(this.componentContext) }, 2000) }

import { ComponentContent, PromptAction } from '@kit.ArkUI' class DialogUtil { private promptAction: PromptAction = new PromptAction() private componentContext?: ComponentContent<Object> timer: number = -1 timerMap: Record<string, number> = {} /** * @param UIContext 外部通过new UIContext传入 * @param title 传入的弹窗文本 */ public showLightDialog(UIContext: UIContext, title: ResourceStr) { // ComponentContext赋值 this.componentContext = new ComponentContent(UIContext, wrapBuilder(DialogBuilder), title) // 进行弹窗，可以通过延时进行自动关闭 // 第二个参数是弹窗控制option this.promptAction.openCustomDialog(this.componentContext, { maskColor: Color.Transparent }) this.timer = setTimeout(() => { this.promptAction.closeCustomDialog(this.componentContext) }, 2000) } /** * 关闭弹窗 */ public closeLightDialog() { if (this.componentContext) { this.promptAction.closeCustomDialog(this.componentContext) } } /** * 清除定时器 */ clearAllTimeout() { if (this.timer != -1) { clearTimeout(this.timer) } // 如果有多个定时器，进行循环关闭 const timerList = Object.values(this.timerMap) if (timerList.length > 0) { timerList.forEach(element => { clearTimeout(element) }) } } } export const dialogUtil = new DialogUtil() /*------------------------- 弹窗builder -------------------------*/ // 这里传入的参数要和ComponentContext第三个参数类型一致，因参数通过ComponentContext进行传入 @Builder function DialogBuilder(title: ResourceStr) { DialogComp({ text: title }) } /*------------------------- 弹窗组件 -------------------------*/ @Component struct DialogComp { text: ResourceStr = '' build() { Column() { Column() { Text(this.text) .fontColor(Color.White) .fontSize(14) } .height(50) .backgroundColor(Color.Black) .borderRadius(8) .clip(true) .padding({ left: 16, right: 16 }) .justifyContent(FlexAlign.Center) } } }

一、定义私有变量promptAction

private promptAction: PromptAction = new PromptAction()

二、进行绘制弹窗UI

@Component struct DialogComp { text: ResourceStr = '' build() { Column() { Column() { Text(this.text) .fontColor(Color.White) .fontSize(14) } .height(50) .backgroundColor(Color.Black) .borderRadius(8) .clip(true) .padding({ left: 16, right: 16 }) .justifyContent(FlexAlign.Center) } } }

三、

1. 进行弹窗的时候需要使用promptAction.openCustomDialog(),第二个参数需要传入wrapBuilder类型参数

2. new WarpBuilder() 需要传入Builder类型的组件

3. 因此将组件使用@Builder装饰器进行包裹

// 这里传入的参数要和ComponentContext第三个参数类型一致，因参数通过ComponentContext进行传入 @Builder function DialogBuilder(title: ResourceStr) { DialogComp({ text: title }) }

四、

1. 定义类方法进行弹窗

2. 这里写的是轻弹窗，所以设置了定时器进行关闭

/** * @param UIContext 外部通过new UIContext传入 * @param title 传入的弹窗文本 */ public showLightDialog(UIContext: UIContext, title: ResourceStr) { // ComponentContext赋值 this.componentContext = new ComponentContent(UIContext, wrapBuilder(DialogBuilder), title) // 进行弹窗，可以通过延时进行自动关闭 // 第二个参数是弹窗控制option this.promptAction.openCustomDialog(this.componentContext, { maskColor: Color.Transparent }) this.timer = setTimeout(() => { this.promptAction.closeCustomDialog(this.componentContext) }, 2000) }

五、

1. 设置关闭方法以及清除定时器方法完善类的功能

/** * 关闭弹窗 */ public closeLightDialog() { if (this.componentContext) { this.promptAction.closeCustomDialog(this.componentContext) } } /** * 清除定时器 */ clearAllTimeout() { if (this.timer != -1) { clearTimeout(this.timer) } // 如果有多个定时器，进行循环关闭 const timerList = Object.values(this.timerMap) if (timerList.length > 0) { timerList.forEach(element => { clearTimeout(element) }) } }

六、进行全局单例导出，方便使用

export const dialogUtil = new DialogUtil()

------------------------------------ 弹窗类的使用 --------------------------------------

import { dialogUtil } from '../util/DialogUtil'; import { UIContext } from '@kit.ArkUI'; @Entry @Component struct Index { @State message: string = 'Hello World'; timer: number = -1 aboutToDisappear(): void { dialogUtil.clearAllTimeout() } build() { Column() { Button('点击进行弹窗').onClick((event: ClickEvent) => { dialogUtil.showLightDialog(new UIContext(), '这是一个轻弹窗') }) } .height('100%') .width('100%') .padding({ top: 100 }) } }