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

【高心星出品】

文章目录

- - 全局自定义弹出框openCustomDialog

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