HarmonyOS鸿蒙Next中全局log弹窗openCustomDialog

HarmonyOS鸿蒙Next中全局log弹窗openCustomDialog

import { ComponentContent } from '@kit.ArkUI';

@Builder
export function buildText(close: () => void) {
  Column() {
    LoadingProgress()
      .width(48)
      .height(48)
      .color(Color.White)
    Text("加载中")
      .fontSize(14)
      .fontColor(Color.White)
  }
  .borderRadius(16)
  .justifyContent(FlexAlign.Center)
  .width(120)
  .height(120)
  .backgroundColor('rgba(0,0,0,0.6)')
  .onClick(() => close())
}

class DialogManage {
  private uiContext: UIContext | undefined = undefined
  private contentNode: ComponentContent<object> | undefined = undefined

  init(uiContext: UIContext) {
    this.uiContext = uiContext
    this.contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), this.close);
  }

  open(quit: boolean = true) {
    if (this.uiContext && this.contentNode) {
      this.uiContext.getPromptAction().openCustomDialog(this.contentNode, {
        onWillDismiss: (closeData) => {
          console.log("关闭原因: ", closeData.reason) // 屏蔽点击遮障层关闭弹窗
          quit && closeData.reason !== DismissReason.TOUCH_OUTSIDE && this.close()
        }
      })
      return
    }
    console.error("uiContext 或者 contentNode 不存在 open 失败")
  }

  close = () => {
    if (this.uiContext && this.contentNode) {
      this.uiContext.getPromptAction().closeCustomDialog(this.contentNode)
      return
    }
    console.error("uiContext 或者 contentNode 不存在 close 失败")
  }
}

export const dialogManage = new DialogManage()

更多关于HarmonyOS鸿蒙Next中全局log弹窗openCustomDialog的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，openCustomDialog用于创建全局自定义log弹窗。通过CustomDialogController类控制弹窗生命周期，包括定义布局、绑定组件及事件。使用@CustomDialog装饰器声明自定义弹窗组件，在aboutToAppear中初始化数据。通过controller.open()和controller.close()控制显示与关闭。弹窗支持模态交互，可自定义样式、位置和动画效果。

更多关于HarmonyOS鸿蒙Next中全局log弹窗openCustomDialog的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，openCustomDialog是用于创建自定义弹窗的核心方法。从你的代码来看，实现基本正确，但有几个关键点需要注意：

  1. wrapBuilder函数缺失：代码中使用了wrapBuilder(buildText)，但未提供wrapBuilder的实现。需要确保这个包装函数正确转换@Builder函数为组件内容。

  2. DismissReason枚举引用：代码中使用了DismissReason.TOUCH_OUTSIDE，需要确认是否正确导入了相关枚举。

  3. 生命周期管理：在onWillDismiss回调中，通过判断closeData.reason来屏蔽点击遮罩层关闭是合理的做法。这样可以防止用户误触关闭。

  4. 单例模式：使用export const dialogManage = new DialogManage()创建全局实例是个好实践，便于在应用各处调用。

  5. 错误处理：当前的错误日志输出很完善，建议在实际项目中考虑更完善的错误处理机制。

代码结构清晰，封装良好，遵循了HarmonyOS Next的UI开发规范。主要需要补充wrapBuilder的实现和确保相关枚举的导入。

回到顶部