自定义弹窗初始化问题 (HarmonyOS 鸿蒙Next)

自定义弹窗初始化问题 (HarmonyOS 鸿蒙Next)

kjController: CustomDialogController = new CustomDialogController({ builder: MyLoadingDialog(), alignment: DialogAlignment.Bottom, customStyle: true })

this.kjController.open()

在page页面里面这样调用是可以正常打开一个小弹窗；

想把这个kjController的初始化单独封装起来 放在其它地方初始化， 为什么在调用就打不开了， 请问CustomDialogController 的申明只能放在page页面里面吗？

还是在其它地方初始化需要添加其它条件？


更多关于自定义弹窗初始化问题 (HarmonyOS 鸿蒙Next)的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

使用uiContext可以不依赖UI控件创建弹窗。而uiContext可以用

window.getLastWindow来间接过去

uiContext.getPromptAction().openCustomDialog

更多关于自定义弹窗初始化问题 (HarmonyOS 鸿蒙Next)的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


是的，CustomDialogController 必须依赖 UI 组件创建弹窗，不适合封装为全局调用的方法。官方给过一个全局创建的方案：

不依赖UI组件的全局自定义弹出框 (openCustomDialog)

但我觉得也没那么好用，我基本只用来做简单的提示弹窗。如果涉及复杂的场景交互，比如账号密码登录，我会用子窗口实现自定义弹窗：

window.createSubWindow 子窗口创建

用起来比较麻烦也有一些小缺点，但是基本能覆盖所有需要用到自定义窗口的场景，也有办法封装为全局方法（需要初始化）。

在HarmonyOS鸿蒙Next中，自定义弹窗的初始化通常涉及以下几个步骤：

  1. 创建自定义弹窗类：首先需要定义一个继承自CommonDialog或BaseDialog的自定义弹窗类。这个类将包含弹窗的布局和逻辑。

  2. 设置布局：在自定义弹窗类中，通过onCreate方法设置弹窗的布局文件。可以使用LayoutInflater来加载布局文件，并将其设置为弹窗的内容视图。

  3. 初始化控件：在onCreate方法中，通过findComponentById方法获取布局文件中的控件，并进行初始化操作，如设置文本、绑定事件等。

  4. 显示弹窗：在需要显示弹窗的地方，创建自定义弹窗类的实例，并调用show方法来显示弹窗。

  5. 处理弹窗生命周期：根据需要，可以在自定义弹窗类中重写onStart、onStop等方法，以处理弹窗的生命周期事件。

以下是一个简单的代码示例：

import { CommonDialog, Resource } from '@ohos.ability.featureAbility';
import { LayoutInflater, UIComponent } from '@ohos.ability.ui';

export class CustomDialog extends CommonDialog {
    private layoutInflater: LayoutInflater;
    private rootView: UIComponent;

    constructor(context: Resource, themeResId: number) {
        super(context, themeResId);
    }

    protected onCreate(): void {
        super.onCreate();
        this.layoutInflater = LayoutInflater.from(this.getContext());
        this.rootView = this.layoutInflater.inflate($r('app.layout.custom_dialog'), null);
        this.setContentView(this.rootView);

        const button = this.rootView.findComponentById($r('app.id.button'));
        button.on('click', () => {
            this.dismiss();
        });
    }
}

// 使用自定义弹窗
const customDialog = new CustomDialog($r('app.context'), $r('app.style.dialog'));
customDialog.show();
回到顶部