HamronyOS开发5.0【一行代码实现任意处弹窗】_harmony navdestinationmode.dialog-CSDN博客

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

前言

从Api9开始开发鸿蒙的大佬应该被自定义弹窗折腾得够呛，到目前为止我能想到的自定义弹窗方案有以下几种

promptAction.openCustomDialog(options: CustomDialogOptions)
(该方案@Builder装饰的视图(builder参数)必须定义在组件内部)
CustomDialogController+CustomDialog
(该方案CustomDialogController仅在作为@CustomDialog和@Component struct的成员变量，
且在@Component struct内部定义时赋值才有效)
windowStage.createSubWindow
(该方案需要对子窗口进行完美的控制,一旦逻辑控制不好容易出大问题)
自定义一个@Component组件当做普通视图引入布局中(顶层位置)，动态控制隐藏显示，达到弹窗的效果
使用Navigation时,将NavDestination的mode属性设置为NavDestinationMode.DIALOG
(优点：在使用Navigation做路由方案时，NavDestination弹窗方案不会覆盖即将要跳转的页面) (推荐)
使用ComponentContent (本文要介绍的方法) (推荐)

除了3、5、6方案，其他方案都不方便在非组件中控制弹窗显示

效果图

一行代码任意处显示Loading和对话框或者自定义弹窗

//显示loading弹窗
Loading.show(UIContext)

//loading弹窗消失
Loading.dismiss()

//显示自定义弹窗
TestDialog.showDialog(UIContext)

实现在普通类中也可以控制弹窗显示

import { Dialog } from './Dialog'
import { Loading } from './Loading'

export class TestDialog {
  static showLoading(ctx: UIContext) {
    Loading.show(ctx)
  }

  static showDialog(ctx: UIContext) {
    let dialog = new Dialog(ctx)
    dialog.show({
      title: "提示",
      content: "是否确定要删除?",
      leftText: "取消",
      rightText: "确定",
      leftClick: () => {
        dialog.dismiss()
      },
      rightClick: () => {
        dialog.dismiss()
      }
    })
  }
}

import { Loading } from './Loading';
import { TestDialog } from './TestDialog';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column({ space: 10 }) {
      Button("显示Loading")
        .onClick(() => {
          TestDialog.showLoading(this.getUIContext())
          setTimeout(() => {
            Loading.dismiss()
          }, 2000)
        })
      Button("显示Dialog")
        .onClick(() => {
          TestDialog.showDialog(this.getUIContext())
        })
    }.justifyContent(FlexAlign.Center)

    .height('100%')
    .width('100%')
  }
}

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

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

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