HarmonyOS鸿蒙Next中如何让页面一键置灰色

如今越来越多的 APP 都实现了页面置灰功能，在国家公祭日等重大节日的时候，这些 APP 打开的后页面都自动变成了灰色，比如在长者逝世后，各大主流 APP 打开的时候页面都变成了灰色。

grayscale() 方法的注释说明的很清楚：为当前组件添加一个灰度显示效果，至于啥是灰度效果，说白了就是让页面显示灰色。

@Entry @Component struct ArkUIClubTest {
  build() {
    Column({space: 10}) {
      Button("按钮的显示效果")
      Button("按钮的显示效果")
        .grayscale(1)
    }
    .size({width: "100%", height: "100%"})
    .padding(10)
  }
}

@Entry @Component struct ArkUIClubTest {

  @State saturateValue: number = 0;

  build() {
    Column({space: 10}) {
      Row({space: 10}) {
        Text("Red Text")
          .fontColor(Color.Red)
          .fontSize(22)

        Text("Blue Text")
          .fontColor(Color.Blue)
          .fontSize(22)
      }

      Row({space: 10}) {
        QRCode('Hello, OpenHarmony')
          .width(50)
          .height(50)
          .color(Color.Green)

        Button("White Text")
          .fontColor(Color.White)
      }

      Flex()
        .width("100%")
        .height(50)
        .backgroundColor(Color.Pink)

      Image($r("app.media.test"))
        .height(150)

      Row({space: 10}) {

        Button("页面置灰")
          .onClick(() => {
            this.saturateValue = 1; // 页面置灰
          })

        Button("恢复彩色")
          .onClick(() => {
            this.saturateValue = 0; // 页面复原
          })
      }
    }
    .width("100%")
    .height("100%")
    .padding(10)
    .grayscale(this.saturateValue) // 设置根组件的颜色饱和度
  }
}