HarmonyOS鸿蒙Next中如何实现应用退出到后台时新增蒙层保护隐私

【问题现象】

当应用进入后台，要给应用界面一个遮罩，例如IOS上的银行应用切到后台后，任务列表中显示的应用界面是增加了遮罩，或者应用自己设置界面。

【背景知识】

1. 窗口：[@ohos.window](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-window#onwindowstageevent9)窗口提供管理窗口的一些基础能力，包括对当前窗口的创建、销毁、各属性设置，以及对各窗口间的管理调度。
2. 组件内容模糊：foregroundBlurStyle。

【定位思路】

1. 需要判断应用当前在前台/后台，可查看判断方案；
2. 从以上方案可知，需开启WindowStage生命周期变化的监听：on(‘windowStageEvent’)。

可知各WindowStageEventType对应的应用进入前后台的阶段：

windowStage.on("windowStageEvent",
  // 根据事件状态类型选择进行相应的处理
  if (data == window.WindowStageEventType.SHOWN) {
    console.info("current window stage event is SHOWN");
    // 应用进入前台，默认为可交互状态
    // ...
  } else if (data == window.WindowStageEventType.HIDDEN) {
    console.info("current window stage event is HIDDEN");
    // 应用进入后台，默认为不可交互状态
    // ...
  } else if (data == window.WindowStageEventType.PAUSED) {
    console.info("current window stage event is PAUSED");
    // 前台应用进入多任务，转为不可交互状态
    // ...
  } else if (data == window.WindowStageEventType.RESUMED) {
    console.info("current window stage event is RESUMED");
    // 进入多任务后又继续返回前台时，恢复可交互状态
    // ...
  }

  // ...
});

【解决方案】

1. 在EntryAbility.ets文件中获取windowStage并在应用全局存储：

onWindowStageCreate(windowStage: window.WindowStage): void {
    // 存储windowStage
    AppStorage.setOrCreate("windowStage", windowStage)
    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
   });
}

1. Index.ets实现应用状态监听以及组件模糊：

import { window } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State flag: boolean = false

  onPageShow(): void {
    let windowStage = AppStorage.get("windowStage") as window.WindowStage;
    windowStage.on("windowStageEvent", (data) => {
      if (data === window.WindowStageEventType.PAUSED) {
        this.flag = true
      } else {
        this.flag = false
      }
    })
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
    .foregroundBlurStyle(this.flag ? BlurStyle.Thin : BlurStyle.NONE, {
      colorMode: ThemeColorMode.LIGHT,
      adaptiveColor: AdaptiveColor.DEFAULT
    })
  }
}

最终展示效果如下图所示：

这就实现了应用退出到后台时页面组件模糊保护隐私。

【总结】

想要实现应用退出到后台时保护隐私:

1. 首先考虑当前应用退出到后台的生命周期如何监听；
2. 实现保护效果可以使用页面组件模糊或者还可以新增自定义蒙层。