HarmonyOS 5.0应用开发——全局自定义弹出框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)
  }
}
相关推荐
zhanshuo2 天前
ArkUI 玩转水平滑动视图:超全实战教程与项目应用解析
harmonyos·arkui
zhanshuo2 天前
ArkUI Canvas 实战:快速绘制柱状图图表组件
harmonyos·arkui
娅娅梨8 天前
HarmonyOS-ArkUI Web控件基础铺垫4--TCP协议- 断联-四次挥手解析
网络协议·tcp/ip·http·okhttp·harmonyos·arkui·arkweb
儿歌八万首18 天前
HarmonyOS中各种动画的使用介绍
华为·harmonyos·arkts·arkui
儿歌八万首18 天前
HarmonyOS 中状态管理 V2和 V1 的区别
harmonyos·component·arkui
simple丶20 天前
【HarmonyOS】封装用户鉴权工具类
harmonyos·arkts·arkui
simple丶20 天前
【HarmonyOS】基于Axios封装网络请求工具类
harmonyos·arkts·arkui
simple丶20 天前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
程序员小张丶1 个月前
基于React Native的HarmonyOS 5.0房产与装修应用开发
javascript·react native·react.js·房产·harmonyos5.0
程序员小张丶2 个月前
基于React Native的HarmonyOS 5.0休闲娱乐类应用开发
react native·娱乐·harmonyos5.0