元服务如何实现页面统一置灰功能？

可以通过grayscale()方法添加灰度效果，实现统一置灰功能。

grayscale()接收一个number类型的参数，定义灰度转换的比例。

• 参数为1.0：表示完全转为灰度图像。
• 参数为0.0：表示图像无变化。
• 参数在0.0和1.0之间时：表示效果呈线性变化。
  收起

  自动换行

  深色代码主题

  复制

  @Entry
  @Component
  struct Index {
    @State grayscaleValue: number = 0;
    build() {
      Column({ space: 20 }) {
        Flex()
        Image($r('app.media.app_icon'))
          .height(100)
        Row({ space: 20 }) {
          Button('置灰')
            .onClick(() => {
              this.grayscaleValue = 1;
            })
          Button('恢复')
            .onClick(() => {
              this.grayscaleValue = 0;
            })
        }
      }
      .width("100%")
      .height("100%")
      .backgroundColor('#fcd473')
      .padding(10)
      .grayscale(this.grayscaleValue)
    }
  }