Openharmony“页面置灰”功能的实现

Trainee_Li

1.实现原理：通用属性grayscale方法
   ArkUI 开发框架在接口文档common.d.ts中为组件添加了一个通用属性 grayscale() 方法，该方法定义如下：
   grayscale(value: number): T;
    /**
   * Adds a color overlay effect for the current component. The input parameter is the superimposed color.
   * @since 7
   */
   /**
   * Adds a color overlay effect for the current component. The input parameter is the superimposed color.
   * @form
   * @since 9
   */

简而言之，grayscale()方法为当前组件添加一个灰度显示效果，也就是让页面显示灰色。


2.示例代码

@Entry
@Component
struct Test {


  @State saturateValue: number = 0;


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


        Text("蓝色文本")
          .fontColor(Color.Blue)
          .fontSize(22)
      }

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

        Button("白色文本")
          .fontColor(Color.White)
      }
      Image($r("app.media.icon1"))
        .height(150

      Row({space: 10}) {

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

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

3.实现效果

原始图像：



置灰图像：



参考来源：https://www.arkui.club/chapter18

xiejirui666

顶一个！！！