HarmonyOS app退到后台，如何将界面磨砂化，看不到界面数据呢？

Question

app退到后台，如何将界面磨砂化，看不到界面数据呢

Answer 1

使用foregroundBlurStyle为组件添加内容模糊效果

参考连接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-blur-effect-V5\#使用foregroundblurstyle为组件添加内容模糊效果

接口说明：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-foreground-blur-style-V5\#foregroundblurstyle

应用可以监听WindowStageEventType 在页面中自行处理，用navigation实现的话就只需要加在navigation根组件上，如果是router的话目前只能做到一个页面一个页面的处理 ，没有全局处理的方式。

navigation示例代码：

EntryAbility.ets:

onWindowStageCreate(windowStage: window.WindowStage): void {
  ......
  AppStorage.setOrCreate('window',windowStage);
  ......
}

Index.ets:

@Component
struct PageA {
  @Consume('pageInfos') pageInfos: NavPathStack;

  build() {
    NavDestination() {
      Button('push PageB')
        .width('80%')
        .onClick(() => {
          this.pageInfos.pushPathByName('PageB', '');
        })
        .margin({top: 10, bottom: 10})
    }
    .transition(TransitionEffect.asymmetric(
      TransitionEffect.move(TransitionEdge.BOTTOM).animation({ duration: 500, curve: Curve.ExtremeDeceleration }),
      TransitionEffect.move(TransitionEdge.TOP).animation({ duration: 500, curve: Curve.ExtremeDeceleration })
    ))
    .title("PageA")
  }
}

@Component
struct PageB {

  @Consume('pageInfos') pageInfos: NavPathStack;

  build() {
    NavDestination() {
      Button('push PageC')
        .width('80%')
        .onClick(() => {
          this.pageInfos.pushPathByName('PageC', '');
        })
        .margin({top: 10, bottom: 10})
    }
    .title('PageB')
  }
}

@Component
struct PageC {

  @Consume('pageInfos') pageInfos: NavPathStack;

  build() {
    NavDestination() {
      Column(){
        Text("hello---------------------------------------------------------")
        Text("hello---------------------------------------------------------")
        Text("hello---------------------------------------------------------")
        Text("hello---------------------------------------------------------")
        Text("hello---------------------------------------------------------")
      }
    }
    .title('PageC')
  }
}

@Entry
@Component
struct NavDestination_240624155036026 {
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()
  isLogin: boolean = false;

  @State flag: boolean = false

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

  @Builder
  PagesMap(name: string) {
    if (name == 'PageA') {
      PageA()
    } else if (name == 'PageB') {
      PageB()
    }else if (name == 'PageC') {
      PageC()
    }
  }

  build() {
    Navigation(this.pageInfos) {
      Button('push PageA')
        .width('80%')
        .onClick(() => {
          this.pageInfos.pushPathByName('PageA', '');
        })
    }
    .mode(NavigationMode.Stack)
    .titleMode(NavigationTitleMode.Mini)
    .title('主页')
    .navDestination(this.PagesMap)
    .foregroundBlurStyle(this.flag ? BlurStyle.Thin : BlurStyle.NONE, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT })
  }
}