HarmonyOS鸿蒙开发实战(5.0)自定义全局弹窗实践

鸿蒙HarmonyOS开发实战往期文章必看:

HarmonyOS NEXT应用开发性能实践总结

最新版!"非常详细的" 鸿蒙HarmonyOS Next应用开发学习路线!(从零基础入门到精通)

非常详细的" 鸿蒙HarmonyOS Next应用开发学习路线!(从零基础入门到精通)


介绍

全局状态保留能力弹窗一种很常见的能力,能够保持状态,且支持全局控制显隐状态以及自定义布局。使用效果参考评论组件

效果图预览

使用说明

使用案例参考短视频案例

  1. 首先程序入口页对全局弹窗初始化,使用GlobalStateDialogManager.getGlobalStateDialogNodeController().setUIContext(this.getUIContext())。
  2. 在全局入口页设置弹窗位置GlobalStateDialog()。
  3. 在需要使用弹窗的页面引入GlobalStateDialogManager,使用operateGlobalStateDialog函数对弹窗显隐及内容布局进行配置,配置项参考GlobalStateDialogConfig

实现思路

  1. 使用显隐控制来实现弹窗的状态保留能力,使用NodeContainer来动态操作弹窗的布局以及内容。源码参考GlobalStateDialog.ets

    /**

    • 全局状态保留能力弹窗组件
      */
      @Component
      export struct GlobalStateDialog {
      @StorageProp('isShowGlobalStateDialog') isShowGlobalStateDialog: boolean = false;

    build() {
    Column() {
    、、、
    // 弹窗的布局与内容,使用NodeContainer提前占位
    NodeContainer(GlobalStateDialogManager.getGlobalStateDialogNodeController())
    }
    .visibility(this.isShowGlobalStateDialog ? Visibility.Visible : Visibility.Hidden)
    .backgroundColor(r('app.color.ohos_global_state_dialog_background_color')) .height(r('app.string.ohos_global_state_dialog_sixty_percent'))
    .borderRadius({
    topLeft: r('app.integer.ohos_global_state_dialog_number_10'), topRight: r('app.integer.ohos_global_state_dialog_number_10')
    })
    .width($r('app.string.ohos_global_state_dialog_hundred_percent'))
    }
    }

    /**

    • 全局状态保留能力弹窗控制器,对外提供fillGlobalStateDialog函数来操作弹窗的布局与内容
      */
      export class GlobalStateDialogNodeController extends NodeController {
      private uiContext: UIContext | null = null;
      private rootNode: BuilderNode<[ESObject]> | null = null;
      private wrapBuilder: WrappedBuilder<[ESObject]> | null = null;
      private params: ESObject;

    setUIContext(uiContext: UIContext) {
    this.uiContext = uiContext;
    }

    /**
    * 填充全局状态保留能力弹窗的布局以及内容
    * @param wrapBuilder 布局
    * @param params 内容
    */
    fillGlobalStateDialog(wrapBuilder: WrappedBuilder<[ESObject]>, params: ESObject) {
    this.wrapBuilder = wrapBuilder;
    this.params = params;
    this.refreshNode();
    }

    makeNode(uiContext: UIContext): FrameNode | null {
    if (this.rootNode != null) {
    // 返回FrameNode节点
    return this.rootNode.getFrameNode();
    }
    // 返回null控制动态组件脱离绑定节点
    return null;
    }

    refreshNode() {
    if (!this.uiContext) {
    return;
    }
    // 创建节点,需要uiContext
    this.rootNode = new BuilderNode(this.uiContext)
    // 创建组件
    this.rootNode.build(this.wrapBuilder, this.params)
    this.rebuild();
    }
    }

    /**

    • 全局弹窗配置项
      */
      interface GlobalStateDialogConfig {
      isShowGlobalStateDialog?: boolean; // 显隐控制:true显示/false隐藏
      wrapBuilder?: WrappedBuilder<[ESObject]>; // 布局
      params?: ESObject; // 内容
      }

    /**

    • 管理全局弹窗
      */
      export class GlobalStateDialogManager {
      private static globalStateDialogController: GlobalStateDialogNodeController = new GlobalStateDialogNodeController();

    static getGlobalStateDialogNodeController(): GlobalStateDialogNodeController {
    return GlobalStateDialogManager.globalStateDialogController;
    }

    /**
    * 控制全局弹窗的显隐及内容布局
    * @param globalStateDialogConfig 配置全局弹窗
    */
    static operateGlobalStateDialog(globalStateDialogConfig: GlobalStateDialogConfig) {
    if (globalStateDialogConfig.isShowGlobalStateDialog !== undefined) {
    AppStorage.setOrCreate('isShowGlobalStateDialog', globalStateDialogConfig.isShowGlobalStateDialog);
    }
    if (globalStateDialogConfig.wrapBuilder) {
    GlobalStateDialogManager.globalStateDialogController.fillGlobalStateDialog(globalStateDialogConfig.wrapBuilder, globalStateDialogConfig.params);
    }
    }
    }

  2. 使用Stack堆叠能力,为全局弹窗占位,且初始化相关数据。源码参考EntryView.ets.ets

    @Entry
    @Component
    struct EntryView {
    、、、
    aboutToAppear(): void {
    、、、
    GlobalStateDialogManager.getGlobalStateDialogNodeController().setUIContext(this.getUIContext());
    、、、
    }

    build() {
    Stack() {
    、、、

    复制代码
       // 全局状态保留能力弹窗
       GlobalStateDialog()
     }
     .alignContent(Alignment.BottomEnd)
     .height('100%')
     .backgroundColor($r('app.color.main_background_color'))

    }
    }

高性能知识点

不涉及

工程结构&模块类型

复制代码
utils                             // har类型
|---component
|   |---GlobalStateDialog.ets     // 全局状态保留能力弹窗
相关推荐
哟哟耶耶1 小时前
Starting again-02
开发语言·前端·javascript
Apifox.1 小时前
Apifox 9 月更新| AI 生成接口测试用例、在线文档调试能力全面升级、内置更多 HTTP 状态码、支持将目录转换为模块
前端·人工智能·后端·http·ai·测试用例·postman
Kitasan Burakku1 小时前
Typescript return type
前端·javascript·typescript
叁佰万1 小时前
前端实战开发(一):从参数优化到布局通信的全流程解决方案
前端
笔尖的记忆1 小时前
js异步任务你都知道了吗?
前端·面试
光影少年2 小时前
react生态
前端·react.js·前端框架
golang学习记2 小时前
从0死磕全栈之Next.js 中的错误处理机制详解(App Router)
前端
力Mer2 小时前
console.log()控制台异步打印与对象展开后不一致问题
前端·javascript
WillaWang2 小时前
Liquid:在assign定义变量时使用allow_false
前端
2401_831501732 小时前
Python学习之Day05学习(定制数据对象,面向对象)
前端·python·学习