Call the grayscale() method to add a grayscale effect and achieve a unified grayscale feature.
The grayscale() method takes a number type parameter that defines the proportion of the grayscale conversion.
@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('Grayscale')
.onClick(() => {
this.grayscaleValue = 1;
})
Button('Restore')
.onClick(() => {
this.grayscaleValue = 0;
})
}
}
.width("100%")
.height("100%")
.backgroundColor('#fcd473')
.padding(10)
.grayscale(this.grayscaleValue)
}
}