鸿蒙5.0【OpenHarmony】鸿蒙弹窗实现乱象？带你玩转正确的实现姿势

鸿蒙系统小能手Mr.Li

于 2024-08-27 18:21:47 发布

阅读量381

点赞数 5

分类专栏：鸿蒙开发文章标签： harmonyos 鸿蒙系统鸿蒙 openharmony UI 组件程序员

本文链接：https://blog.csdn.net/2401_82772199/article/details/141608146

版权

鸿蒙开发专栏收录该内容

265 篇文章 1 订阅

订阅专栏

最近看到很多童鞋吐槽鸿蒙自定义弹窗的实现，也有不少童鞋提供了各式各样的低耦，轻巧方向的优化方案，但多数参差不齐，甚至有基于老API(白玩，以后还得废弃掉…)给的方案，为避免如此“乱象”遂提出正确的实现姿势。

姿势一

如果您没有特别的要求，系统AlertDialog(API 6+)完全够用

代码示例：

AlertDialog.show({
      title: '温馨提示',
      message: '您确认要退出登录吗？',
      autoCancel: true, //点击窗口外边是否自动关闭
      alignment: DialogAlignment.Center, //弹窗位置
      cornerRadius: 8,
      primaryButton: {
        value: '确认',
        action: () => {
          toast.show('点击了确认按钮')
        }
      },
      secondaryButton: {
        value: '取消',
        action: () => {
          toast.show('点击了取消按钮')
        }
      },
      cancel: () => {
          toast.show('点击弹窗外导致的取消回调')
      }
    })

效果是酱紫的：

系统AlertDialog还可以定制一些特别的样式：

具体就不代码举例了，感兴趣的童鞋可以参考官网demo哈

姿势二

很多时候，系统AlertDialog并不能满足精致化的业务需求，那么API 7给您带来了饱受诟病和吐槽的CustomDialog(API 6+)来方便开发者自定义弹窗

代码示例：

@CustomDialog
@Preview
export struct CommonDialog {
  title: string | Resource = "温馨提示"
  msg: string | Resource = ""
  confirm: string | Resource = "确认"
  cancel: string | Resource = "取消"
  controller?: CustomDialogController
  onCancel: () => void = () => {
  }
  onConfirm: () => void = () => {
  }

  build() {
    Column({ space: 30 }) {
      Text(this.title)
        ......

      Text(this.msg)
        ......
        
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button(this.cancel)
          .onClick(() => {
            if (this.controller) {
              this.controller.close()
              this.onCancel()
            }
          })
          ......

        Button(this.confirm)
          .onClick(() => {
            if (this.controller) {
              this.controller.close()
              this.onConfirm()
            }
          })
          ......
      }
    }
  }
}

然后在组件中配置和唤起：

@Entry
@Component
struct ToolTestPage {
  private dialogController: CustomDialogController = new CustomDialogController({
    builder: CommonDialog({
      onCancel: () => {
        toast.show("你点了取消")
      },
      onConfirm: () => {
        toast.showLong("你点了确认")
      },
      title: "温馨提示",
      msg: "您确认要退出登录吗？",
      cancel: "取消",
      confirm: "确认",
    })
  })

  build() {
  ......
    Button('自定义弹窗')
      .onClick(() => {
        this.dialogController.open()
      })
  ......
  }
}

运行效果：

有童鞋就问了，为什么不把属性dialogController收到封装控制类里去呢？哥，我也想啊，鸿蒙不让啊（它会让你报错，跑不起来）

来看下官方文档说明：

CustomDialogController仅在作为@CustomDialog和@Component struct的成员变量，且在@Component struct内部定义时赋值才有效。

再来看官方解释：

CustomDialogController作为UI的一部分必须在Component中使用是非常合理的，因为view是树形结构，dialog不能脱离window独立存在。统一调用router.push方法并且处理错误中弹窗，开发者可以自己在Component中写回调。

这是哪位“大佬”的“牛逼”设计啊？不敢想象，如果业务弹窗再复杂些，或者组件里搞多个弹窗，代码是有多酸爽~~~

好了，不吐槽了，反正我只用“姿势三”…

姿势三

好在官方貌似意识到了这个问题，在API 12的PromptAction里支持了全局自定义弹框openCustomDialog，不要太舒服~

代码示例：

export class PrivacyDialog {
  static show(context: UIContext, dialogParam: DialogParam) {
    const contentNode = new ComponentContent(context, wrapBuilder(buildDialogComponent), dialogParam);
    const promptAction = context.getPromptAction()
    const funcConfirm = dialogParam.onConfirm
    dialogParam.onConfirm = () => {
      promptAction.closeCustomDialog(contentNode)
      if (funcConfirm) {
        funcConfirm()
      }
    }
    let funcCancel = dialogParam.onCancel
    dialogParam.onCancel = () => {
      promptAction.closeCustomDialog(contentNode)
      if (funcCancel) {
        funcCancel()
      }
    }

    promptAction.openCustomDialog(contentNode, {
      alignment: DialogAlignment.Center,
      autoCancel: false
    });
  }
}

@Builder
function buildDialogComponent(param: DialogParam) {

  Column() {

    Image($r("app.media.user_login_ic_close"))
      ......
      .onClick(() => {
        param.onCancel()
      })


    Text("个人信息保护政策更新")
      ......

    Scroll() {
      Text(param.content ? param.content : $r("app.string.wcb_privacy_reminder"))
        ......

    }

    Column() {

      Divider()
        ......
      
      Text() {
          Span('请阅读')
          Span('《个人信息保护政策》')
            .fontColor($r('app.color.text_blue1'))
            .onClick(() => {
              ToastUtils.show("个人信息保护政策")
            })
          Span('了解详细内容，我们将按此政策收集、使用和保护您的信息')
      }
      ......

      Text("确认并继续")
        ......
        .onClick(() => {
          param.onConfirm()
        })

      Text("暂不同意")
        ......
        .onClick(() => {
          param.onCancel()
        })

    }
    ......

  }
  ......
}

interface DialogParam {
  content?: string | Resource
  registerUrl?: string
  privacyUrl?: string
  onConfirm: () => void
  onCancel: () => void
}

然后在组件中唤起：

@Entry
@Component
struct ToolTestPage {
  ......
  build() {
  ......
    Button('隐私协议弹窗')
              .onClick(() => {
              
                PrivacyDialog.show(this.getUIContext(), {
                  content: $r("app.string.wcb_privacy_reminder"),
                  onConfirm: (): void => {
                    ToastUtils.show("用户同意了")
                  },
                  onCancel: (): void => {
                    ToastUtils.show("用户暂不同意")
                  }
                })
                
              })
  ......
  }
}

运行效果：

最后呢，很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

高清完整版请点击→《鸿蒙NEXT星河版开发学习文档》

针对鸿蒙成长路线打造的鸿蒙学习文档。话不多说，我们直接看详细资料鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，帮助大家在技术的道路上更进一步。

《鸿蒙 (OpenHarmony)开发学习视频》

《鸿蒙生态应用开发V2.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

《鸿蒙开发基础》

《鸿蒙开发进阶》

《鸿蒙开发实战》
在这里插入图片描述

获取这份鸿蒙星河版学习资料，请点击→《鸿蒙NEXT星河版开发学习文档》

总结

鸿蒙—作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。

并且鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，未来将会支持 50 万款的应用。那么这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！

鸿蒙系统小能手Mr.Li

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
鸿蒙5.0【OpenHarmony】鸿蒙弹窗实现乱象？带你玩转正确的实现姿势

最近看到很多童鞋吐槽鸿蒙自定义弹窗的实现，也有不少童鞋提供了各式各样的低耦，轻巧方向的优化方案，但多数参差不齐，甚至有基于老API(白玩，以后还得废弃掉...)给的方案，为避免如此“乱象”遂提出正确的实现姿势。
复制链接

扫一扫

专栏目录