【高心星出品】

全局自定義彈出框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)}
}