HarmonyOS鸿蒙开辟 弹窗及加载中指示器HUD功能实现

天空闲话  金牌会员 | 2025-1-11 20:48:37 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 805|帖子 805|积分 2415

HarmonyOS鸿蒙开辟 弹窗及加载中指示器HUD功能实现
最近在学习鸿蒙开辟过程中，阅读了官方文档，在之前做flutter时候，经常使用overlay，使用OverlayEntry加入到overlayState来做添加悬浮按钮、提示弹窗、加载中指示器、加载失败的toast等功能。那在HarmonyOS鸿蒙开辟中也可能有类似的功能需求。
HarmonyOS鸿蒙开辟的使用弹窗文档中已经非常详细了
地点：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-use-dialog-V5
一、子窗口window

在弹出的loading指示器中，我们可以使用创建子window的方式，调用window的loadContentByName方法来实现。
实现步调
效果预览



  • 1、实现加载中的loading组件，这里定义名字为LoadingHud
在LoadingHud中有LoadingProgress、Text提示文本，Text显示的信息由LocalStorage进行传递
必要传递的数据message，在aboutToAppear进行赋值
  1. @Local message: string = '';
  3.   aboutToAppear(): void {
  4.     this.message = LocalStorage.getShared().get("message") ?? "";
  5.   }
复制代码
固然在调用window的loadContentByName时候，必要确定加载的主角的routeName，这就必要在LoadingHud组件中使用装饰器来设置
  1. /// 通用的hud，弹出框，或者loading框
  2. @Entry({ routeName: "hudLoading", storage: LocalStorage.getShared() })
  3. @ComponentV2
  4. export struct LoadingHud {
  5.   ... 其他代码
  6. }
复制代码
LoadingHud的完备代码如下：
  1. /// 通用的hud，弹出框，大概loading框@Entry({ routeName: "hudLoading", storage: LocalStorage.getShared() })@ComponentV2export struct LoadingHud {  @Local message: string = '';
  3.   aboutToAppear(): void {
  4.     this.message = LocalStorage.getShared().get("message") ?? "";
  5.   }
  7.   build() {    Column() {      Column(){        Row() {          // 从左往右，1号环形进度条，默认前景致为蓝色渐变，默认strokeWidth进度条宽度为2.0vp          LoadingProgress()            .color($r('app.color.success'))            .width(40)            .height(40)          // message          Text(this.message)            .fontSize(14)            .fontColor($r('app.color.dataset_empty_message'))            .margin({              left: 10            })        }        .padding({          top: 15,          bottom: 15,          left: 15,          right: 20        })        .justifyContent(FlexAlign.Center)        Button("点击消散")          .width(100)          .height(40)          .fontSize(12)          .backgroundColor('#ef04792c')          .margin({            top: 10          })          .onClick(()=> {             LoadingHudUtil.dismissLoading();          })      }      .justifyContent(FlexAlign.Center)      .constraintSize({        minWidth: 200,        minHeight: 150,      })      .backgroundColor($r('app.color.white'))      .borderRadius(10)    }    .justifyContent(FlexAlign.Center)    .width('100%')    .height('100%')    .backgroundColor('#00000000')    .hitTestBehavior(HitTestMode.Transparent)  }}
复制代码


  • 2、创建子Window并显示
在创建LoadingHud后，我们必要创建创建子Window并显示window，显示我们的loadingHUD
创建window的createWindow，这里使用的windowType是window.WindowType.TYPE_DIALOG,也可以换成其他的试试看。
  1. let windowName = "loading";
  2.       // 创建窗口
  3.       let subWindow = await window.createWindow(
  4.         {
  5.           name: windowName,
  6.           windowType: window.WindowType.TYPE_DIALOG,
  7.           ctx: ctx,
  8.         }
  9.       );
复制代码
设置LocalStorage数据，存储message
  1. //创建存储
  2.       let storage = new LocalStorage();
  3.       //存储数据
  4.       storage.setOrCreate('message',  tip);
复制代码
调用window的loadContentByName，设置Window的大小及背景颜色，显示Window
  1. await subWindow.loadContentByName('hudLoading', storage);
  2.       let dp = display.getDefaultDisplaySync();
  3.       await subWindow.resize(dp.width, dp.height);
  4.       subWindow.setWindowBackgroundColor('#30000000');
  5.       await subWindow.showWindow();
复制代码
显示后Window，在必要消散的时候调用destroyWindow
  1. static async dismissLoading(): Promise<void> {
  2.     if (LoadingHudUtil.cacheWindow) {
  3.       await LoadingHudUtil.cacheWindow.destroyWindow();
  4.     }
  5.   }
复制代码
完备的LoadingHudUtil的代码如下
  1. import { display, window } from '@kit.ArkUI';import { common } from '@kit.AbilityKit';import('../components/hud/LoadingHud'); // 引入命名路由页面// 自定义弹出窗口export class LoadingHudUtil {  private static cacheWindow: window.Window;  static async showLoading(tip: string): Promise<void> {    let ctx = getContext() as common.UIAbilityContext;    try {      let windowName = "loading";
  2.       // 创建窗口
  3.       let subWindow = await window.createWindow(
  4.         {
  5.           name: windowName,
  6.           windowType: window.WindowType.TYPE_DIALOG,
  7.           ctx: ctx,
  8.         }
  9.       );
  11.       LoadingHudUtil.cacheWindow = subWindow;      //创建存储
  12.       let storage = new LocalStorage();
  13.       //存储数据
  14.       storage.setOrCreate('message',  tip);
  16.       console.log("LoadingHudUtil loadContentByName" + tip);      // subWindow.setGestureBackEnabled(false);      // subWindow.setDialogBackGestureEnabled(false);      // subWindow.setWindowTouchable(true);      await subWindow.loadContentByName('hudLoading', storage);
  17.       let dp = display.getDefaultDisplaySync();
  18.       await subWindow.resize(dp.width, dp.height);
  19.       subWindow.setWindowBackgroundColor('#30000000');
  20.       await subWindow.showWindow();
  22.     } catch (e) {      console.log("LoadingHudUtil showLoading e:" + JSON.stringify(e));    }  }  static async dismissLoading(): Promise<void> {
  23.     if (LoadingHudUtil.cacheWindow) {
  24.       await LoadingHudUtil.cacheWindow.destroyWindow();
  25.     }
  26.   }
  28. }
复制代码
二、自定义Dialog

在HarmonyOS鸿蒙开辟中，可以使用CustomDialogController来实现自定义的弹窗。
效果预览



  • 1.自定义弹窗组件CustomAlertDialog
在CustomAlertDialog中实现一个消息提示，并且点击按钮可以关闭dialog
代码如下：
  1. @CustomDialog
  2. export struct CustomAlertDialog {
  3.   controller?: CustomDialogController
  4.   title?: string
  6.   build() {
  7.     Column() {
  8.       Column() {
  9.         // message
  10.         Text(this.title)
  11.           .fontSize(14)
  12.           .fontColor($r('app.color.dataset_empty_message'))
  13.           .margin({
  14.             left: 10
  15.           })
  17.         Button("点击消失")
  18.           .width(100)
  19.           .height(40)
  20.           .fontSize(12)
  21.           .backgroundColor('#ef04792c')
  22.           .margin({
  23.             top: 10
  24.           })
  25.           .onClick(() => {
  26.             this.controller?.close();
  27.           })
  28.       }
  29.       .justifyContent(FlexAlign.Center)
  30.       .constraintSize({
  31.         minWidth: 200,
  32.         minHeight: 100,
  33.       })
  34.       .backgroundColor($r('app.color.white'))
  35.       .borderRadius(10)
  36.     }
  37.     .justifyContent(FlexAlign.Center)
  38.     .width('100%')
  39.     .height('100%')
  40.     .backgroundColor(Color.Transparent)
  41.     .hitTestBehavior(HitTestMode.Transparent)
  42.   }
  43. }
复制代码


  • 2.使用CustomDialogController来展示弹窗
定义CustomDialogController
  1. // 自定义CustomDialog
  2.   customDialogController: CustomDialogController | null = new CustomDialogController({
  3.     builder: CustomAlertDialog({
  4.       title: "温馨提示"
  5.     }),
  6.     alignment: DialogAlignment.Center,
  7.     onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
  8.       console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
  9.       console.log("dialog onWillDismiss")
  10.       if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
  11.         dismissDialogAction.dismiss()
  12.       }
  13.       if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
  14.         dismissDialogAction.dismiss()
  15.       }
  16.     },
  17.     autoCancel: true,
  18.     customStyle: true,
  19.   });
复制代码
在必要展示弹窗的时候调用customDialogController的open方法。
  1. if (this.customDialogController != null) {
  2.                       this.customDialogController.open()
  3.                     }
复制代码
固然假如页面消散，只管在aboutToDisappear中将customDialogController置空
  1.   // 在自定义组件即将销毁时将dialogController置空
  2.   aboutToDisappear() {
  3.     this.customDialogController = null // 将dialogController置空
  4.   }
复制代码
三、Overlay浮层

在官方文档中有一段描述
浮层（OverlayManager） 用于将自定义的UI内容展示在页面（Page）之上，在Dialog、Popup、Menu、BindSheet、BindContentCover和Toast等组件之下，展示的范围为当前窗口安全区内。可适用于常驻悬浮等场景。
使用OverlayManager来添加、删除、隐藏、显示节点Component
效果预览





  • 1.定义CustomOverlayView组件界面
在CustomOverlayView中，我们定义了加载中，加载失败，加载乐成的几种范例，用于展示不同的样式
定义OverlayConfig类为展示的界面配置、OverlayScaleImage缩放的icon
  1. export enum OverlayType {
  2.   loading,
  3.   success,
  4.   fail
  5. }
  7. export class OverlayConfig {
  8.   message: string = ""
  9.   offset: Position = { x: 0, y: -50 }
  10.   index: number = 0
  11.   autoDismiss: boolean = true;
  12.   duration: number = 3000 // 持续时间
  13.   onCallback?: (index: number) => void
  14.   type: OverlayType = OverlayType.loading
  16.   constructor(message: string) {
  17.     this.message = message
  18.   }
  19. }
  21. @Builder
  22. export function builderCustomOverlayView(overlayConfig: OverlayConfig) {
  23.   CustomOverlayView({
  24.     olConfig: overlayConfig
  25.   })
  26. }
  28. @ComponentV2
  29. struct OverlayScaleImage {
  30.   @Param @Require src: PixelMap | ResourceStr | DrawableDescriptor;
  31.   @Param imgWidth: number = 40;
  32.   @Local imgScale: number = 0.0;
  34.   build() {
  35.     Image(this.src)
  36.       .width(this.imgWidth)
  37.       .aspectRatio(1)
  38.       .scale({ x: this.imgScale, y: this.imgScale })
  39.       .animation({
  40.         duration: 300, // 时长
  41.         iterations: 1, // 设置-1表示动画无限循环
  42.       })
  43.       .onAppear(() => {
  44.         // 组件挂载完毕，修改数值触发动画效果
  45.         this.imgScale = 1.0
  46.       })
  47.   }
  48. }
  50. @ComponentV2
  51. export struct CustomOverlayView {
  52.   @Param olConfig: OverlayConfig = new OverlayConfig("");
  54.   aboutToAppear(): void {
  55.     setTimeout(() => {
  56.       console.log("CustomOverlayView aboutToAppear");
  57.       if (this.olConfig.onCallback != null) {
  58.         this.olConfig.onCallback(this.olConfig.index);
  59.       }
  60.     }, this.olConfig.duration);
  61.   }
  63.   build() {
  64.     Column() {
  65.       if (OverlayType.loading == this.olConfig.type) {
  66.         // message
  67.         LoadingProgress()
  68.           .color($r('app.color.success'))
  69.           .width(40)
  70.           .height(40)
  71.       } else if (OverlayType.success == this.olConfig.type) {
  72.         // message
  73.         OverlayScaleImage({
  74.           src: $r('app.media.ic_hud_success'),
  75.           imgWidth: 40
  76.         })
  77.       } else if (OverlayType.fail == this.olConfig.type) {
  78.         // message
  79.         OverlayScaleImage({
  80.           src: $r('app.media.ic_hud_fail'),
  81.           imgWidth: 30
  82.         })
  83.       }
  85.       Text(this.olConfig.message)
  86.         .fontSize(14)
  87.         .fontColor($r('app.color.white'))
  88.         .margin({
  89.           top: 10,
  90.         })
  91.     }
  92.     .padding({
  93.       top: 20,
  94.       bottom: 20,
  95.       left: 15,
  96.       right: 15
  97.     })
  98.     .justifyContent(FlexAlign.Center)
  99.     .constraintSize({
  100.       minWidth: 180,
  101.       minHeight: 80,
  102.     })
  103.     .backgroundColor($r('app.color.overlay_bg_color'))
  104.     .borderRadius(10)
  105.     .offset(this.olConfig.offset)
  106.   }
  107. }
复制代码


  • 2.CustomOverlayStorage
由于在OverlayManager来添加、删除、隐藏、显示节点过程中，必要使用index索引参数。这里使用一个类，类中有一个数组记录一下展示的节点Component
  1. @ObservedV2
  2. export class CustomOverlayStorage {
  3.   @Trace contentArray: ComponentContent<OverlayConfig>[] = []
  4. }
复制代码


  • 3.自定义MyOverlayManager进行封装OverlayManager
起首确定属性uiContext，创建ComponentContent必要该参数，这个我在index.ets中进行初始化传入。
CustomOverlayStorage存储ComponentContent的数组，确定index
overlayManager用来来添加、删除、隐藏、显示节点
MyOverlayManager代码如下
  1. /// 用于管理Overlay
  2. /// 浮层（OverlayManager） 用于将自定义的UI内容展示在页面（Page）之上，
  3. /// 在Dialog、Popup、Menu、BindSheet、BindContentCover和Toast等组件之下，
  4. /// 展示的范围为当前窗口安全区内。可适用于常驻悬浮等场景。
  5. /// 与OverlayManager相关的属性推荐采用AppStorage来进行应用全局存储，以免切换页面后属性值发生变化从而导致业务错误。
  6. import { AppStorageV2, ComponentContent, OverlayManager, router } from '@kit.ArkUI';
  7. import {
  8.   builderCustomOverlayView,
  9.   CustomOverlayStorage,
  10.   OverlayConfig
  11. } from '../common/components/hud/CustomOverlayView';
  13. export class MyOverlayManager {
  14.   private static currentIndex: number = 0;
  15.   private uiContext?: UIContext
  16.   private overlayManager?: OverlayManager
  17.   private overlayStorage: CustomOverlayStorage =
  18.     AppStorageV2.connect(CustomOverlayStorage, 'overlayStorage', () => new CustomOverlayStorage())!;
  19.   private static instance: MyOverlayManager;
  21.   public static getInstance(): MyOverlayManager {
  22.     if (MyOverlayManager.instance == null) {
  23.       MyOverlayManager.instance = new MyOverlayManager();
  24.     }
  25.     return MyOverlayManager.instance;
  26.   }
  28.   initOverlayNode(uiContext: UIContext): void {
  29.     this.uiContext = uiContext;
  30.     this.overlayManager = uiContext.getOverlayManager();
  31.   }
  33.   addOverlayView(overlayConfig: OverlayConfig): void {
  34.     if (this.uiContext != null && this.uiContext != undefined) {
  35.       // 设置索引下标
  36.       let index = MyOverlayManager.currentIndex++;
  37.       overlayConfig.index = index;
  39.       // 创建componentContent
  40.       let componentContent = new ComponentContent(
  41.         this.uiContext!, wrapBuilder<[OverlayConfig]>(builderCustomOverlayView),
  42.         overlayConfig
  43.       )
  45.       this.overlayStorage.contentArray.push(componentContent);
  47.       if (this.overlayManager != null && this.overlayManager != undefined) {
  48.         this.overlayManager.addComponentContent(componentContent, index)
  49.       }
  50.     }
  51.   }
  53.   hideOverlayView(index: number) {
  54.     if (this.overlayManager != null && this.overlayManager != undefined) {
  55.       if (index < this.overlayStorage.contentArray.length) {
  56.         this.overlayManager.hideComponentContent(this.overlayStorage.contentArray[index])
  57.       }
  58.     }
  59.   }
  61.   showOverlayView(index: number) {
  62.     if (this.overlayManager != null && this.overlayManager != undefined) {
  63.       if (index < this.overlayStorage.contentArray.length) {
  64.         this.overlayManager.showComponentContent(this.overlayStorage.contentArray[index])
  65.       }
  66.     }
  67.   }
  69.   removeOverlayView(index: number) {
  70.     if (this.overlayManager != null && this.overlayManager != undefined) {
  71.       if (index < this.overlayStorage.contentArray.length) {
  72.         this.overlayManager.removeComponentContent(this.overlayStorage.contentArray[index])
  73.       }
  74.     }
  75.   }
  77.   removeAllOverlayView() {
  78.     if (this.overlayManager != null && this.overlayManager != undefined) {
  79.       this.overlayManager.hideAllComponentContents();
  80.       for (let index: number = 0; index < this.overlayStorage.contentArray.length; index++) {
  81.         this.overlayManager.removeComponentContent(this.overlayStorage.contentArray[index])
  82.       }
  83.     }
  84.   }
  85. }
复制代码


  • 4.index.ets传入uiContext
初始化配置uiContext
  1. aboutToAppear(): void {
  2.     console.log("aboutToAppear");
  3.     MyOverlayManager.getInstance().initOverlayNode(this.getUIContext());
  4.   }
复制代码


  • 5.调用OverlayManager进行显示加载中、加载乐成、加载失败提示
定义type及message
  1. let config = new OverlayConfig(message);
  2.     config.type = OverlayType.loading;
  3.     config.onCallback = (index: number)=>{
  4.       MyOverlayManager.getInstance().removeOverlayView(index)
  5.     }
  6.     MyOverlayManager.getInstance().addOverlayView(config);
复制代码
加载中、加载乐成、加载失败的Util
  1. import { MyOverlayManager } from "../../manager/MyOverlayManager";import { OverlayConfig, OverlayType } from "../components/hud/CustomOverlayView";export class EasyLoadingHud {  static showLoading(message: string) {    let config = new OverlayConfig(message);
  2.     config.type = OverlayType.loading;
  3.     config.onCallback = (index: number)=>{
  4.       MyOverlayManager.getInstance().removeOverlayView(index)
  5.     }
  6.     MyOverlayManager.getInstance().addOverlayView(config);
  8.   }  static showSuccess(message: string) {    let config = new OverlayConfig(message);    config.type = OverlayType.success;    config.onCallback = (index: number)=>{      MyOverlayManager.getInstance().removeOverlayView(index)    }    MyOverlayManager.getInstance().addOverlayView(config);  }  static showFail(message: string) {    let config = new OverlayConfig(message);    config.type = OverlayType.fail;    config.onCallback = (index: number)=>{      MyOverlayManager.getInstance().removeOverlayView(index)    }    MyOverlayManager.getInstance().addOverlayView(config);  }}
复制代码


  • 6.页面调用EasyLoadingHud进行显示
可以在页面必要的地方调用EasyLoadingHud进行显示
代码如下
  1. // 加载中
  2. EasyLoadingHud.showLoading("加载中...")
  3. // 加载成功
  4. EasyLoadingHud.showSuccess("加载成功")
  5. // 加载失败
  6. EasyLoadingHud.showFail("加载失败")
复制代码
四、小结

在开辟过程中会遇到提示弹窗、加载中指示器、加载失败的toast等功能，这里是学习HarmonyOS鸿蒙开辟的学习记录，假如对你有用，你可以点个赞哦～～。详细的文档还是以官方文档为主。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

天空闲话

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表