可以通过grayscale()方法添加灰度效果,实现统一置灰功能。
grayscale()接收一个number类型的参数,定义灰度转换的比例。
@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)
}
}