HarmonyOS 鸿蒙Next 界面黑白化

置灰可以通过选择设置页面根组件的如下通用属性。 1）.saturate(0) https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-image-effect-V5#saturate 2）.grayscale(1) https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-image-effect-V5#grayscale

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

@Entry
@Component
struct ArkUIClubTest {

@State saturateValue: number = 0;

build() {

Column({space: 10}) {
Row({space: 10}) {
Text('Red Text')
.fontColor(Color.Red)
.fontSize(22)

Text('Blue Text')
.fontColor(Color.Blue)
.fontSize(22)
}

Row({space: 10}) {

Button('White Text')
.fontColor(Color.White)
}

Flex()
.width("100%")
.height(50)
.backgroundColor(Color.Pink)

Image($r("app.media.startIcon"))
.height(150)

Row({space: 10}) {

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

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