HarmonyOS鸿蒙Next中如何实现类似Android那样的全局弹窗loading

HarmonyOS鸿蒙Next中如何实现类似Android那样的全局弹窗loading 我想实现自定义的loading弹窗，里面的 loading动画使用自己的素材。现在系统的LoadingProgress 好像没法自定义动画内容图片，也没法实现在任何地方弹窗。

wuwangju 1楼•22 天前

如果你现在util类中弹窗，推荐使用promptAction.openCustomDialog自定义弹窗，参考文档： https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-promptaction-0000001815086746-V5#ZH-CN_TOPIC_0000001834458276__promptactionopencustomdialog11

提供一个demo可以参考：

//Index.ets
import { changeDialogBuilder, MyShowTest } from '../common/HttpUtils'
import {customDialogBuilder} from './testProm'
let myShowTest = new MyShowTest()
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
onPageShow(): void {
changeDialogBuilder(customDialogBuilder.bind(this))
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
myShowTest.showTest()
})
}
.width('100%')
}
.height('100%')
}
}

//testProm.ets
@Builder
export function customDialogBuilder() {
Column() {
Text('正在加载中').fontSize(16)
}.height(100).width(100)
}

//HttpUtils.ets
import promptAction from '@ohos.promptAction'
let myDialogBuilder: CustomBuilder;
let customDialogId: number = 0
export function changeDialogBuilder(builder: CustomBuilder) {
myDialogBuilder = builder
}
export class MyShowTest {
showTest() {
if (myDialogBuilder === undefined) {
return
}
promptAction.openCustomDialog({
builder: myDialogBuilder,
alignment: DialogAlignment.Center,
}).then((dialogId: number) => {
customDialogId = dialogId
})
setTimeout(() => {
promptAction.closeCustomDialog(customDialogId)
}, 2000)
}
}

更多关于HarmonyOS鸿蒙Next中如何实现类似Android那样的全局弹窗loading的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

caililin 2楼•22 天前

用个第三方库可以轻松实现，或者参考实现

https://github.com/ibestservices/ibest-ui

caililin 3楼•22 天前

在HarmonyOS鸿蒙Next中，实现类似Android的全局弹窗Loading可以通过使用UIAbility和WindowStage来实现。首先，创建一个自定义的Dialog组件，用于显示Loading动画和提示信息。然后，在UIAbility的onWindowStageCreate生命周期中，通过WindowStage获取到根窗口，并将自定义的Dialog组件添加到根窗口中。

具体步骤如下：

创建自定义Dialog组件，定义Loading动画和提示信息。
在UIAbility的onWindowStageCreate方法中，通过WindowStage获取根窗口。
使用Window的addWindow方法将自定义的Dialog组件添加到根窗口中。
通过UIAbility的onWindowStageDestroy方法，在窗口销毁时移除Dialog组件。

示例代码：

import { UIAbility, AbilityStage, window } from '@ohos.ability.featureAbility';

export default class MyAbility extends UIAbility {
  private loadingDialog: CustomDialog | null = null;

  onWindowStageCreate(windowStage: window.WindowStage) {
    let windowClass = windowStage.getMainWindowSync();
    this.loadingDialog = new CustomDialog(this.context);
    windowClass.addWindow(this.loadingDialog);
  }

  onWindowStageDestroy() {
    if (this.loadingDialog) {
      this.loadingDialog.destroy();
      this.loadingDialog = null;
    }
  }
}

class CustomDialog {
  constructor(context: any) {
    // 初始化Dialog组件
  }

  destroy() {
    // 销毁Dialog组件
  }
}

通过这种方式，可以在鸿蒙Next中实现全局的Loading弹窗效果。

nodeper 4楼•22 天前

在HarmonyOS鸿蒙Next中，可以通过CommonDialog实现全局弹窗loading。首先，创建CommonDialog实例，并设置其布局为自定义的loading界面。然后，使用show()方法显示弹窗，dismiss()方法关闭弹窗。为方便全局调用，可以将弹窗封装为单例类或工具类，确保在任何页面都能调用。代码示例如下：

CommonDialog loadingDialog = new CommonDialog(context);
loadingDialog.setContentCustomLayout(R.layout.loading_layout);
loadingDialog.show(); // 显示loading
loadingDialog.dismiss(); // 关闭loading

确保布局文件loading_layout.xml包含loading动画或提示信息。