全局状态保留能力弹窗

介绍

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

效果图预览

使用说明

使用案例参考短视频案例

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;}// 创建节点，需要uiContextthis.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     // 全局状态保留能力弹窗

模块依赖

不涉及

参考资料

Stack

显隐控制

NodeContainer

StorageProp

鸿蒙全栈开发全新学习指南

也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线【包含了大APP实战项目开发】。

本路线共分为四个阶段：

第一阶段：鸿蒙初中级开发必备技能

第二阶段：鸿蒙南北双向高工技能基础：gitee.com/MNxiaona/733GH

第三阶段：应用开发中高级就业技术

第四阶段：全网首发-工业级南向设备开发就业技术：https://gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）

如何快速入门？

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

开发基础知识:gitee.com/MNxiaona/733GH

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

基于ArkTS 开发

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

鸿蒙开发面试真题（含参考答案）:gitee.com/MNxiaona/733GH

鸿蒙入门教学视频：

美团APP实战开发教学：gitee.com/MNxiaona/733GH

写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
• 想要获取更多完整鸿蒙最新学习资源，请移步前往小编：gitee.com/MNxiaona/733GH