HarmonyOS实战开发-全局状态保留能力弹窗。

介绍

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

效果图预览

使用说明

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

实现思路

使用显隐控制来实现弹窗的状态保留能力，使用NodeContainer来动态操作弹窗的布局以及内容。

/**
 * 全局状态保留能力弹窗组件
 */
@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堆叠能力，为全局弹窗占位，且初始化相关数据。

@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     // 全局状态保留能力弹窗
模块依赖
不涉及

如果大家还没有掌握鸿蒙，现在想要在最短的时间里吃透它，我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程》以及《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

OpenHarmony APP应用开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG