鸿蒙应用示例：ArkTS中实现一键置灰功能

 

引言

在特殊情况下，如国难日或其他重要事件期间，应用程序可能需要将界面转换为灰度显示以示尊重或表达特定的情感。

比如android环境下的代码为

?

1 2 3 4 5

Paint paint = new Paint(); ColorMatrix cm = new ColorMatrix(); cm.setSaturation( 0);//0:表示灰度显示，1:表示彩色显示 paint.setColorFilter(new ColorMatrixColorFilter(cm)); view.setLayerType(View.LAYER_TYPE_HARDWARE, paint);

　　

方案一：使用 saturate 属性

通过设置页面根容器的饱和度为0来实现灰度效果：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

@Entry @Component struct Index {   build() {     Column() {       Image($r("app.media.app_icon"))         .autoResize(true)         .width(100)         .height(100)     }     .width('100%')     .height('100%')     .saturate(0)   } }

　　

方案二：使用 grayscale 属性

通过设置页面根容器的灰度效果为1来实现灰度效果：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

@Entry @Component struct Index {   build() {     Column() {       Image($r("app.media.app_icon"))         .autoResize(true)         .width(100)         .height(100)     }     .width('100%')     .height('100%')     .grayscale(1)   } }