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')
    })