|
|
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
|
|
发表于 2023-7-27 11:26:07