HarmonyOS 自定义弹窗在跳转页面不关闭时不遮挡新页面？

Question

如题：HarmonyOS 自定义弹窗在跳转页面不关闭时不遮挡新页面？

Answer 1

参考demo如下：

import { RouterManager } from 'router/Index';
import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';
import { BusinessError } from '@ohos.base';
import display from '@ohos.display';

export default class EntryAbility extends UIAbility {
  // ...
  onWindowStageCreate(windowStage: window.WindowStage) {
    console.info('onWindowStageCreate');
    let windowClass: window.Window | undefined = undefined;
    try {
      window.getLastWindow(this.context, (err: BusinessError, data) => {
        const errCode: number = err.code;
        if (errCode) {
          console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
          return;
        }
        windowClass = data;
        console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));
      });
    } catch (exception) {
      console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception));
    }
  }
}



@Preview
@Component
export struct PrivacyDialog {
  // @Consume('pageInfo') pageStack : NavPathStack;
  @State isAgree: string = "Not Agree";
  @State keyboardHeight: number = 0;
  private dialogAbsolutPosition_Y: number = 0;
  private dialog_Height: number = 0;
  scroller: Scroller = new Scroller()
  controller: RichEditorController = new RichEditorController();
  options: RichEditorOptions = { controller: this.controller };
  private screenHeight: number = 0
  private screenWidth: number = 0
  @State keyboard_isShow :boolean = false;
  @State dialogMoveDistance :number = 0;
  aboutToAppear(): void {
    window.getLastWindow(getContext(this)).then(currentWindow => {
      //获取windowClass对象
      let property = currentWindow.getWindowProperties();
      //方式1：获取规避区域
      let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_KEYBOARD);
      // 初始化显示区域高度
      // this.screenHeight = px2vp(property.windowRect.height - avoidArea.bottomRect.height);

      // 监视软键盘的弹出和收起
      /*currentWindow.on('avoidAreaChange', async data => {
        if (data.type !== window.AvoidAreaType.TYPE_KEYBOARD) {
        return;
      }
        this.screenHeight = px2vp(data.area.bottomRect.height);
        console.log(`${this.screenHeight}` + '' + "foo xxx")
      })*/
      currentWindow.on('keyboardHeightChange', (data) => {
        console.info('  Succeeded in enabling the listener for keyboard height changes. Data: ' + `${data}`);
        this.keyboardHeight = px2vp(data)
        if (this.keyboardHeight == 0) {
          this.keyboard_isShow = false
          this.dialogMoveDistance = 0
        }else {
          this.keyboard_isShow = true
          this.dialogMoveDistance = this.screenHeight -this.dialogAbsolutPosition_Y - this.keyboardHeight +16

          console.log("==== 整个屏幕高度vp：" + this.screenHeight );
          console.log("==== 整个软键盘高度vp：" + this.keyboardHeight );
          console.log("==== 整个弹窗高度vp：" + this.dialog_Height +"==== 整个弹窗高度px：" + vp2px(this.dialog_Height));
          console.log("==== 弹窗下边缘距屏幕ding的距离vp：" + this.dialogAbsolutPosition_Y );
          console.log("==== 弹窗下边缘距屏幕底的距离vp：" + (this.screenHeight -this.dialogAbsolutPosition_Y) );
          console.log("==== 移动总距离vp[未考虑导航条]：" + (this.screenHeight -this.dialogAbsolutPosition_Y - this.keyboardHeight));
          console.log("==== 移动总距离vp：" + this.dialogMoveDistance );

        }
      });
    })
    let displayClass: display.Display | null = null;

    try {
      displayClass = display.getDefaultDisplaySync();
      this.screenHeight = px2vp(displayClass.height)
      this.screenWidth = px2vp(displayClass.width)
    } catch (exception) {
      console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(exception));
    }

    /*display.getAllDisplays((err, data) => {
      this.screenWidth = data[0].width
      this.screenHeight = px2vp(data[0].height)
      console.log('width =' + this.screenWidth + 'height = ' + this.screenHeight)
    })*/
  }

  build() {
    NavDestination() {
      Scroll(this.scroller) {
        Stack({ alignContent: Alignment.Bottom }) {
          // 蒙层
          Column() {
          }
          .width("100%")
          .height("100%")
          .backgroundColor('rgba(0,0,0,0.5)')

          // 隐私弹窗
          Column() {
            // 富文本
            RichEditor(this.options)
              .placeholder("input...", {
                // fontColor: Color.Gray,
                font: {
                  size: 16,
                  weight: FontWeight.Normal,
                  family: "HarmonyOS Sans",
                  style: FontStyle.Normal
                }
              })
              .width("100%")
              .height("30%")

            Text("注册应用账号").fontSize(30).height('20%')
            Row() {
              Button("《应用隐私政策》",
                { type: ButtonType.Normal, stateEffect: true, buttonStyle: ButtonStyleMode.TEXTUAL })
                .onClick(ent => {
                  // let pathInfo : NavPathInfo = new NavPathInfo('PrivacyItem', null
                  //   , (popInfo: PopInfo) => {
                  //     this.isAgree = popInfo.result.toString();
                  //   })
                  RouterManager.pushPath("privacyItem", null, (popInfo: PopInfo) => {
                    this.isAgree = popInfo.result.toString();
                  }, false)
                })
              Text(this.isAgree)
            }.height('10%')
            .backgroundColor(Color.White)

            // 按钮
            Row() {
              Button("不同意").onClick(ent => {
                RouterManager.pop("Not Agree", false)
              }).width('30%')
              Button("同意").onClick(ent => {
                RouterManager.pop("Agree", false)
              }).width('30%')
            }
            .height('10%')
            .justifyContent(FlexAlign.SpaceEvenly)
            .width('100%')
            .backgroundColor(Color.White)
          }
          .backgroundColor(Color.White)
          .width('100%')
          .height('30%')
          .onAreaChange((oldValue: Area, newValue: Area) => {
            this.dialog_Height = Number(newValue.height)
            this.dialogAbsolutPosition_Y = Number(newValue.globalPosition.y)  + this.dialog_Height
            // console.log('dialogAbsolutPosition_Y is ' + this.dialogAbsolutPosition_Y)
          })
          // .translate({ y: -150 })
          .translate({ y: -this.keyboardHeight +32 })
          .animation({
            duration: 280,
            curve: Curve.EaseOut,
            iterations: 1,
            playMode: PlayMode.Normal
          })
        }
      }
    }.hideTitleBar(true)
    .expandSafeArea([SafeAreaType.KEYBOARD])
    .mode(NavDestinationMode.DIALOG)
    .onReady((ctx) => {
      console.log("==== PrivacyDialog onReady");
    })

  }
}

@Builder
export function getPrivacyDialog(): void {
  PrivacyDialog();
}

// DynamicsRouter.registerRouterPage(RouterInfo.PRIVACY_DIALOG, wrapBuilder(getPrivacyDialog));