实现非entry弹窗鸿蒙示例代码

本文原创发布在华为开发者社区，更多鸿蒙场景化示例请见华为开发者联盟官网“行业实践与常见问题”专题页。

介绍

本示例在一个非@Entry的类中创建一个CustomDialogController弹窗，以此来实现不依赖entry的弹窗。

实现非entry弹窗源码链接

效果预览

使用说明

点击请求网络按钮，触发不依赖entry的弹窗。

实现思路

1. 点击请求网络按钮触发testPromptDialog()方法。

export function testPromptDialog() {
  const that = GlobalContext.getContext().getObject('UIContext') as UIContext;
  if (that) {
    promptAction.openCustomDialog({
      builder: customDialogBuilder.bind(that, '网络请求失败！')
    }).then((dialogId: number) => {
      customDialogId = dialogId;
    })
  }
}

2. testPromptDialog()方法中触发customDialogBuilder()方法，实现弹窗。

export function customDialogBuilder(content: String) {
  Column() {
    Text(`Tip: ${content} `).fontSize(20).height('30%')
    Text('失败原因：!!!!').fontSize(16).height('30%')
    Row() {
      Button('确认').onClick(() => {
        promptAction.closeCustomDialog(customDialogId)
      })
      Blank().width(50)
      Button('取消').onClick(() => {
        promptAction.closeCustomDialog(customDialogId)
      })
    }
    .margin({top: 30})
  }.height(200).padding(5)
}