【高心星出品】
文章目录
全局自定义弹出框openCustomDialog
CustomDialog是自定义弹出框，可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹出框。
但是使用起来有很多问题，不支持动态创建也不支持动态刷新，在相对较复杂的应用场景中推荐使用UIContext中获取到的PromptAction对象提供的openCustomDialog接口来实现自定义弹出框。
openCustomDialog（传参为ComponentContent形式）：通过ComponentContent封装内容可以与UI界面解耦，调用更加灵活，可以满足开发者的封装诉求。拥有更强的灵活性，弹出框样式是完全自定义的，且在弹出框打开之后可以使用updateCustomDialog方法动态更新弹出框的一些参数。
案例
下面将写一个案例，点击按钮弹出自定义对话框，并且可以动态修改对话框的位置和内容。
运行结果
开发步骤
全局对话框弹出工具
里面只需要UIContext，ComponentContent和对话框配置option。
里面有打开对话框，关闭对话框和更新对话框的方法。
class customdialogutil {
// UI上下文环境
private static uicontext: UIContext
public 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.ShowDialogOptions
public 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: string
updck: () => void
closeck: () => 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构建函数生成的compoentcontent
let 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()
}
})
// 设置第一个构建函数的componentcontent
customdialogutil.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: UIContext
public 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.ShowDialogOptions
public 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: string
updck: () => void
closeck: () => 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构建函数生成的compoentcontent
let 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()
}
})
// 设置第一个构建函数的componentcontent
customdialogutil.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)
}
}