HarmonyOS 鸿蒙Next中怎么实现APP切到后台以及在后台查看时蒙层遮罩效果

HarmonyOS 鸿蒙Next中怎么实现APP切到后台以及在后台查看时蒙层遮罩效果金融类APP，行业要求APP在进入后台后，要增加蒙层遮罩，处于后台时，不可以展示出来app具体内容。

切换回前台时，再去除蒙层展示真实内容。之前按如下实现，监听windowEvent可以达到效果，后来升级后该方法失效了。

windowClass.on('windowEvent', (data) => { 
  if (data.toString() == '4') { 
    AppStorage.setOrCreate('appVisible', false)
  } else if(data.toString() == '1') { 
    AppStorage.setOrCreate('appVisible', true)
  } 
})

更多关于HarmonyOS 鸿蒙Next中怎么实现APP切到后台以及在后台查看时蒙层遮罩效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

phonegap100 1楼•8 天前

试试

windowStage.getMainWindowSync().on('windowEvent', (data) => {
  if (data == window.WindowEventType.WINDOW_SHOWN) {
    console.log('App is in Foreground')
  } else if(data == window.WindowEventType.WINDOW_HIDDEN){
    console.log('App is in Background')
  }
}

在EntryAbility中onWindowStageCreate方法中添加AppStorage.setOrCreate(‘windowStage’,windowStage);

page重demo如下：

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

更多关于HarmonyOS 鸿蒙Next中怎么实现APP切到后台以及在后台查看时蒙层遮罩效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

vueper 2楼•8 天前

在HarmonyOS鸿蒙Next中，实现APP切到后台以及在后台查看时蒙层遮罩效果，可以通过以下步骤完成：

APP切到后台：
- 使用Ability的生命周期方法onBackground()来监听应用切换到后台的事件。当应用切换到后台时，系统会自动调用此方法。
蒙层遮罩效果：
- 在onBackground()方法中，可以通过Window的addWindowFlag()方法为窗口添加一个遮罩层。遮罩层可以通过自定义Component来实现，比如使用Image或Shape组件，并设置其透明度、颜色等属性。
- 使用Window的setLayoutParams()方法调整遮罩层的大小和位置，使其覆盖整个应用界面。
移除蒙层遮罩：
- 当应用从后台返回到前台时，系统会调用onForeground()方法。在此方法中，可以通过Window的removeWindowFlag()方法移除之前添加的遮罩层。

示例代码片段如下：

import Ability from '@ohos.app.ability.Ability';
import Window from '@ohos.window';

export default class MainAbility extends Ability {
    onBackground() {
        // 添加遮罩层
        let window = this.context.getWindow();
        window.addWindowFlag(Window.WindowFlag.WINDOW_FLAG_BLUR_BEHIND);
        let maskComponent = new MaskComponent(); // 自定义遮罩组件
        window.setLayoutParams({ width: '100%', height: '100%' });
        window.addComponent(maskComponent);
    }

    onForeground() {
        // 移除遮罩层
        let window = this.context.getWindow();
        window.removeWindowFlag(Window.WindowFlag.WINDOW_FLAG_BLUR_BEHIND);
        window.removeComponent(maskComponent);
    }
}

通过以上方法，可以在HarmonyOS鸿蒙Next中实现APP切到后台时添加蒙层遮罩效果，并在返回前台时移除遮罩层。

yibo5220 3楼•8 天前

在HarmonyOS鸿蒙Next中，实现APP切到后台时显示蒙层遮罩效果，可以通过以下步骤：

监听生命周期：使用Ability或AbilitySlice的onBackground()方法监听应用进入后台事件。
显示蒙层：在onBackground()中，通过UI组件（如Component或CustomDialog）显示一个半透明的遮罩层。
隐藏蒙层：在onForeground()中，移除或隐藏遮罩层，恢复应用界面。

示例代码：

@Override
protected void onBackground() {
    super.onBackground();
    // 显示遮罩层
    showOverlay();
}

@Override
protected void onForeground() {
    super.onForeground();
    // 隐藏遮罩层
    hideOverlay();
}

通过这种方式，可以在应用切到后台时显示蒙层，提升用户体验。