HarmonyOS 5.0应用开发——全局自定义弹出框openCustomDialog

【高心星出品】

全局自定义弹出框openCustomDialog

CustomDialog是自定义弹出框，可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹出框。

但是使用起来有很多问题，不支持动态创建也不支持动态刷新，在相对较复杂的应用场景中推荐使用UIContext中获取到的PromptAction对象提供的openCustomDialog接口来实现自定义弹出框。

openCustomDialog（传参为ComponentContent形式）：通过ComponentContent封装内容可以与UI界面解耦，调用更加灵活，可以满足开发者的封装诉求。拥有更强的灵活性，弹出框样式是完全自定义的，且在弹出框打开之后可以使用updateCustomDialog方法动态更新弹出框的一些参数。

案例

下面将写一个案例，点击按钮弹出自定义对话框，并且可以动态修改对话框的位置和内容。

运行结果

开发步骤

全局对话框弹出工具

里面只需要UIContext，ComponentContent和对话框配置option。

里面有打开对话框，关闭对话框和更新对话框的方法。

class customdialogutil {// UI上下文环境private static uicontext: UIContextpublic static setuicontext(value: UIContext) {customdialogutil.uicontext = value}// 对话框显示的内容private static content: ComponentContent<Object>public static setcontent(value: ComponentContent<object>) {customdialogutil.content = value}// 弹出对话框的配置private static option: promptAction.ShowDialogOptionspublic static setoption(value: promptAction.ShowDialogOptions) {customdialogutil.option = value}// 打开弹出框static open() {customdialogutil.uicontext.getPromptAction().openCustomDialog(customdialogutil.content, customdialogutil.option).catch((err: Error) => {console.error('gxxt ', err.message)})}// 关闭弹出框static close() {customdialogutil.uicontext.getPromptAction().closeCustomDialog(customdialogutil.content).catch((err: Error) => {console.error('gxxt ', err.message)})}// 更新弹出框内容或这样式static update(nopt: promptAction.ShowDialogOptions) {customdialogutil.uicontext.getPromptAction().updateCustomDialog(customdialogutil.content, nopt).catch((err: Error) => {console.error('gxxt ', err.message)})}
}

生成对话框界面的构建函数

interface param {message: stringupdck: () => voidcloseck: () => void
}@Builder
function dialogcontent(p: param) {Column({ space: 20 }) {Text(p.message).fontSize(20).fontWeight(FontWeight.Bolder)Row() {Button('更新').onClick(p.updck)Button('关闭').onClick(p.closeck)}.justifyContent(FlexAlign.SpaceAround).width('100%')}.padding(20).backgroundColor(Color.White).width('80%').borderRadius(20)
}

页面代码

@Entry
@Component
struct CustomdialogPage {build() {Column() {Button('弹出框').width('60%').onClick(() => {// 设置ui上下文环境customdialogutil.setuicontext(this.getUIContext())// 第一个builder构建函数生成的compoentcontentlet content: ComponentContent<param> =new ComponentContent<param>(this.getUIContext(), wrapBuilder<[param]>(dialogcontent), {message: '自定义对话框内容1', updck: () => {// 更新对话框的位置customdialogutil.update({ alignment: DialogAlignment.Top, offset: { dy: 100, dx: 0 } })}, closeck: () => {// 关闭对话框customdialogutil.close()}})// 设置第一个构建函数的componentcontentcustomdialogutil.setcontent(content)customdialogutil.setoption({})// 打开对话框customdialogutil.open()})}.height('100%').width('100%').justifyContent(FlexAlign.Center)}
}

完整代码

import { ComponentContent, promptAction, typeNode } from '@kit.ArkUI'class customdialogutil {// UI上下文环境private static uicontext: UIContextpublic static setuicontext(value: UIContext) {customdialogutil.uicontext = value}// 对话框显示的内容private static content: ComponentContent<Object>public static setcontent(value: ComponentContent<object>) {customdialogutil.content = value}// 弹出对话框的配置private static option: promptAction.ShowDialogOptionspublic static setoption(value: promptAction.ShowDialogOptions) {customdialogutil.option = value}// 打开弹出框static open() {customdialogutil.uicontext.getPromptAction().openCustomDialog(customdialogutil.content, customdialogutil.option).catch((err: Error) => {console.error('gxxt ', err.message)})}// 关闭弹出框static close() {customdialogutil.uicontext.getPromptAction().closeCustomDialog(customdialogutil.content).catch((err: Error) => {console.error('gxxt ', err.message)})}// 更新弹出框内容或这样式static update(nopt: promptAction.ShowDialogOptions) {customdialogutil.uicontext.getPromptAction().updateCustomDialog(customdialogutil.content, nopt).catch((err: Error) => {console.error('gxxt ', err.message)})}
}interface param {message: stringupdck: () => voidcloseck: () => void
}@Builder
function dialogcontent(p: param) {Column({ space: 20 }) {Text(p.message).fontSize(20).fontWeight(FontWeight.Bolder)Row() {Button('更新').onClick(p.updck)Button('关闭').onClick(p.closeck)}.justifyContent(FlexAlign.SpaceAround).width('100%')}.padding(20).backgroundColor(Color.White).width('80%').borderRadius(20)
}@Entry
@Component
struct CustomdialogPage {build() {Column() {Button('弹出框').width('60%').onClick(() => {// 设置ui上下文环境customdialogutil.setuicontext(this.getUIContext())// 第一个builder构建函数生成的compoentcontentlet content: ComponentContent<param> =new ComponentContent<param>(this.getUIContext(), wrapBuilder<[param]>(dialogcontent), {message: '自定义对话框内容1', updck: () => {// 更新对话框的位置customdialogutil.update({ alignment: DialogAlignment.Top, offset: { dy: 100, dx: 0 } })}, closeck: () => {// 关闭对话框customdialogutil.close()}})// 设置第一个构建函数的componentcontentcustomdialogutil.setcontent(content)customdialogutil.setoption({})// 打开对话框customdialogutil.open()})}.height('100%').width('100%').justifyContent(FlexAlign.Center)}
}customdialogutil.setcontent(content)customdialogutil.setoption({})// 打开对话框customdialogutil.open()})}.height('100%').width('100%').justifyContent(FlexAlign.Center)}
}