如何在不同场景下实现页面置灰效果

问题现象
在不同的场景下，如何实现将单个组件、页面或者整个app置灰的效果，具体场景如下：

场景

场景说明

场景一：单个组件置灰

将单个组件颜色置灰，其他组件不受影响，例如将一张彩色图片变成灰白色图片

场景二：单个页面置灰

在多个页面场景中，只将其中某个页面颜色置灰，其他页面不受影响

场景三：所有页面置灰

将app中的所有页面颜色置灰，例如当发生一些重大事件（哀悼日）时，要求将整个app的页面颜色统一设置为灰色

背景知识
Navigation：路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。
grayscale：为组件添加灰度效果。上层渲染灰度会覆盖下层子组件渲染。值定义为灰度转换的比例，入参1则完全转为灰度图像，入参0则图像无变化，入参在0和1之间时，效果呈线性变化。
saturate：为组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大，小于1时消色成分越大，饱和度越小。
解决方案
场景一：单个组件置灰。
通过给Image组件添加grayscale属性并将属性值设置为1来实现图片置灰效果，或者使用saturate属性并将属性值设置为0来实现图片置灰效果。示例代码如下：
@Entry
@Component
struct GrayDemo {
@State grayscaleValue: number = 0; // 灰度默认为0，正常显示
@State saturateValue: number = 1; // 饱和度默认为1，正常显示

build() {
Row() {
Column() {
Text('grayscale:')
Image($r('app.media.startIcon'))
.autoResize(true)
.width(100)
.height(100)
.margin(16)
.grayscale(this.grayscaleValue) // 设置图片灰度效果
Button('一键置灰').onClick(() => {
this.grayscaleValue = 1; // 设置灰度为100%
})

    Text('saturate:').margin({ top: 16 })  
    Image($r('app.media.startIcon'))  
      .autoResize(true)  
      .width(100)  
      .height(100)  
      .margin(16)  
      .saturate(this.saturateValue) // 设置图片的饱和度  
    Button('一键置灰').onClick(() => {  
      this.saturateValue = 0; // 将饱和度设置为0，显示灰白  
    })  
  }  
}  
.justifyContent(FlexAlign.Center)  
.alignItems(VerticalAlign.Center)  
.width('100%')  
.height('100%')  

}
}
效果图如下：

点击放大

场景二：单个页面置灰。
在多个页面场景，如果只有某个页面需要置灰，其他页面不变，只需将相应页面根元素设置grayscale属性为1。

首先定义一个变量grayscaleValueSingle，本页面根组件Column设置grayscale属性，分别给用于实现本页面置灰和还原效果的Button绑定onClick事件，该事件用于修改grayscaleValueSingle的值，当该值变化时，即可实现本页面的置灰效果，子页面没有置灰。

效果图如下：

点击放大

场景三：所有页面置灰。Navigation设置的一些属性会影响所有的页面，将主页的Navigation组件设置grayscale属性为1，可实现所有页面置灰的效果。完整示例代码如下：主页Index.ets示例代码如下：
@Entry
@Component
struct Index {
@State grayscaleValueAll: number = 0; // 灰度默认为0，正常显示
@State grayscaleValueSingle: number = 0;
pageStack: NavPathStack = new NavPathStack();

build() {
Navigation(this.pageStack) {
Column() {
Button('前往子页', { stateEffect: true, type: ButtonType.Capsule })
.width('80%')
.height(40)
.margin(20)
.onClick(() => {
this.pageStack.pushPathByName('PageOne', null, false);
})
Image($r('app.media.startIcon'))
.width('50%')
.height('30%')
Button('本页面置灰', { stateEffect: true, type: ButtonType.Capsule })
.width('80%')
.height(40)
.margin(20)
.onClick(() => {
this.grayscaleValueSingle = 1; // 设置灰度为100%
})
Button('全局置灰', { stateEffect: true, type: ButtonType.Capsule })
.width('80%')
.height(40)
.onClick(() => {
this.grayscaleValueAll = 1; // 设置灰度为100%
})
Button('还原', { stateEffect: true, type: ButtonType.Capsule })
.width('80%')
.height(40)
.margin(20)
.onClick(() => {
this.grayscaleValueAll = 0;
this.grayscaleValueSingle = 0;
})
}.grayscale(this.grayscaleValueSingle)
}
.title('主页')
.grayscale(this.grayscaleValueAll)
}
}
子页PageOne.ets示例代码如下：

@Builder
export function PageOneBuilder() {
PageOne()
}

@Entry
@Component
struct PageOne {
build() {
NavDestination() {
Column() {
Button('这是子页', { stateEffect: true, type: ButtonType.Capsule })
.width('80%')
.height(40)
.margin(20)
}
.width('100%')
.height('100%')
}
}
}
route_map需放置在项目名/src/main/resources/base/profile/route_map.json路径下，具体代码如下：

{
"routerMap": [
{
"name": "PageOne",
"pageSourceFile": "src/main/ets/pages/PageOne.ets",
"buildFunction": "PageOneBuilder",
"data": {
"description": "This is PageOne"
}
}
]
}
在module.json5配置文件的module标签中定义routerMap字段，指向定义的路由表配置文件route_map.json，如："routerMap": "$profile:route_map"。

效果图如下：

点击放大

常见FAQ
Q：在Navigation组件中添加的属性，在NavDestination组件中也会生效吗？

A：NavDestination作为子页面的根容器，用于显示Navigation的内容区。NavDestination组件在渲染时会使用到Navigation组件中添加的属性。
https://pastebin.com/tB45X2Jp
https://pastebin.com/hjD1EQe6
https://pastebin.com/ZPZSXrit
https://pastebin.com/BKvXc1XH
https://pastebin.com/EWXDC53c
https://pastebin.com/cZtc3Gm0
https://pastebin.com/D8xdXuhM
https://pastebin.com/EgrbEUJD
https://pastebin.com/8VvqjShG
https://pastebin.com/C8U16GGp
https://pastebin.com/601zAGr0
https://pastebin.com/VUYU8tTc
https://pastebin.com/4eSAuAFs
https://pastebin.com/hYWauvkZ
https://pastebin.com/dKtpzYwL
https://pastebin.com/faS8dizU
https://pastebin.com/epWAdZjT
https://pastebin.com/N28eTbrZ
https://pastebin.com/4Yhy1g4R
https://pastebin.com/pVHAppet
https://pastebin.com/6n0m31zk
https://pastebin.com/BwNRYEsp
https://pastebin.com/UHgxVZrY
https://pastebin.com/sdBk4pwS
https://pastebin.com/qw3Qeiv3
https://pastebin.com/ZE3yTP0u
https://pastebin.com/fbLvkuFA
https://pastebin.com/jrQByFhQ
https://pastebin.com/BLDqNVZd
https://pastebin.com/rsWambwi
https://pastebin.com/jSNv47wj
https://pastebin.com/SgFwMwCn
https://pastebin.com/ii9Mx19w
https://pastebin.com/U12DCAjc
https://pastebin.com/J4UTSFCv
https://pastebin.com/vLKGZmEC
https://pastebin.com/45sT2V0T
https://pastebin.com/HNSU6w07
https://pastebin.com/Q1ez1SyN
https://pastebin.com/NU2YtB2j
https://pastebin.com/4vYkErDF
https://pastebin.com/HbEs4xd0
https://pastebin.com/EQ5rygX0
https://pastebin.com/56zyx4mu
https://pastebin.com/BxL1hQtN
https://pastebin.com/u95LA4eA
https://pastebin.com/SERQ5L1R
https://pastebin.com/1HLR4hfE
https://pastebin.com/uhYYhvY7
https://pastebin.com/Gzwqu9J8
https://pastebin.com/TRzJAa7C
https://pastebin.com/jkvnkxUf
https://pastebin.com/tQniYitM
https://pastebin.com/teftqPhB
https://pastebin.com/ghmm3Z45
https://pastebin.com/u8zhaGJe
https://pastebin.com/pBUjLT6a
https://pastebin.com/F8xircWV
https://pastebin.com/bHfQyddL
https://pastebin.com/US11UXan
https://pastebin.com/uUq8A9PG
https://pastebin.com/gf0TnLaX
https://pastebin.com/KbjDei75
https://pastebin.com/Eg8SBXip
https://pastebin.com/TRnQT00H
https://pastebin.com/hrJTVPDq
https://pastebin.com/FQybjNNY
https://pastebin.com/vkjZ4wN3
https://pastebin.com/Em0EVbKz
https://pastebin.com/8SQtnCqe
https://pastebin.com/JzVba9rR
https://pastebin.com/VYum9agp
https://pastebin.com/kkQzAQQb
https://pastebin.com/rupgeDSt
https://pastebin.com/zaLpEv2s
https://pastebin.com/GcbHRNFi
https://pastebin.com/bpp4uE8Z
https://pastebin.com/7HKMVmd2
https://pastebin.com/Fg7cmq4m
https://pastebin.com/4yzireaB
https://pastebin.com/8JxAZZaT
https://pastebin.com/Ja0YVzXd
https://pastebin.com/ZD0SeiaT
https://pastebin.com/03wkfuNw
https://pastebin.com/2LsPES0D
https://pastebin.com/kpcMTN8H
https://pastebin.com/wDTn15yX
https://pastebin.com/DpmFJRhA
https://pastebin.com/WSgL8jW4
https://pastebin.com/XpDeHfFU
https://pastebin.com/HwhXqV7d
https://pastebin.com/KQuJBJGJ
https://pastebin.com/PvAf8UmX
https://pastebin.com/NvrpD52h
https://pastebin.com/mVcns0hQ
https://pastebin.com/iHkN8Zqt
https://pastebin.com/CtB7EXHR
https://pastebin.com/LGWxiLVh
https://pastebin.com/e1yYzpGV
https://pastebin.com/r690DqD6
https://pastebin.com/dxHZMZpR
https://pastebin.com/9Bt6QmGx
https://pastebin.com/3GR4wnyg
https://pastebin.com/U48VGWDZ
https://pastebin.com/DsvcvGfg
https://pastebin.com/5mJKbEHB
https://pastebin.com/XJHSbEB5
https://pastebin.com/K2TCyawf
https://pastebin.com/Ewn4DHM5
https://pastebin.com/Ta7ufBT4
https://pastebin.com/atf8fKFA
https://pastebin.com/SCwnf7Kq
https://pastebin.com/WwPcSmwn
https://pastebin.com/u1BUyfCp
https://pastebin.com/MdTnRfHn
https://pastebin.com/EbeshHhc
https://pastebin.com/qGcygDuP
https://pastebin.com/SqRmqdgU
https://pastebin.com/7npW5utw
https://pastebin.com/GjSNL297
https://pastebin.com/unDuaQRL
https://pastebin.com/GW5NYdDa
https://pastebin.com/v7NDFUPc
https://pastebin.com/8VRW7Q9K
https://pastebin.com/2KXX6VGt
https://pastebin.com/MCmswb3v
https://pastebin.com/iiuA6adw
https://pastebin.com/D58m3xJB
https://pastebin.com/0S5C0W5s
https://pastebin.com/kd37nDY6
https://pastebin.com/THKnHxWN
https://pastebin.com/b0cNSgs9
https://pastebin.com/4EgxXbvr
https://pastebin.com/e0Y46BLB
https://pastebin.com/JYnQsScA
https://pastebin.com/0JHz4u7D
https://pastebin.com/eLygzWDz
https://pastebin.com/BpNaLvtM
https://pastebin.com/YEpynedk
https://pastebin.com/nr92i4cm
https://pastebin.com/GyJdL3jT
https://pastebin.com/5J59xjwP
https://pastebin.com/YzKHrHf8
https://pastebin.com/9e9Fw0qZ
https://pastebin.com/xeyWtjCZ
https://pastebin.com/ZuNfjEXd
https://pastebin.com/1eAXJXch
https://pastebin.com/wScAwcxA
https://pastebin.com/veLVP8JY
https://pastebin.com/gp9ivT1n
https://pastebin.com/09pRUVcp
https://pastebin.com/KDpZcsSs
https://pastebin.com/qPuKxaGF
https://pastebin.com/Z1HRFRjF
https://pastebin.com/jR9E2zAk
https://pastebin.com/E42XsidQ
https://pastebin.com/vnpF0CrJ
https://pastebin.com/tPdeYkh9
https://pastebin.com/SvdMHSSw
https://pastebin.com/8vBeN0S8
https://pastebin.com/B6WRVRQ4
https://pastebin.com/zydaXiMd
https://pastebin.com/nsb4NEC3
https://pastebin.com/QxyaK9dt
https://pastebin.com/aztZVSES
https://pastebin.com/gq0Ugnzu
https://pastebin.com/WQKjeyU6
https://pastebin.com/JjqU9JHd
https://pastebin.com/m8x0g5jW
https://pastebin.com/5nbWUgFh
https://pastebin.com/Rzgpje7d
https://pastebin.com/K0wf5rAY
https://pastebin.com/ZDPfudPN
https://pastebin.com/RSxAxA0k
https://pastebin.com/WwvnWgmu
https://pastebin.com/pGpEm8MC
https://pastebin.com/yeGNby1Y
https://pastebin.com/G0i3MQkj
https://pastebin.com/te38JUac
https://pastebin.com/dDmpLYkT
https://pastebin.com/a6eywsqw
https://pastebin.com/u2aXcVQm
https://pastebin.com/ECmeMX9f
https://pastebin.com/VcR7W9zx
https://pastebin.com/XRU0XdJV
https://pastebin.com/vrr5hgAv
https://pastebin.com/fRf4Uz2n
https://pastebin.com/wNUGRHMQ
https://pastebin.com/yVnHymtb
https://pastebin.com/gQWJU5a2
https://pastebin.com/VfquXqXb
https://pastebin.com/k1bQrXjs
https://pastebin.com/2BRqX78a
https://pastebin.com/qhfE1Qni
https://pastebin.com/uxwXhuAJ
https://pastebin.com/Z68kDKtq
https://pastebin.com/DUsNuWn8
https://pastebin.com/ALf4SeRQ
https://pastebin.com/6922Wz0j
https://pastebin.com/GwpbvjZw
https://pastebin.com/psciSpxN
https://pastebin.com/3gZnEA2Q
https://pastebin.com/n0cwrgXU
https://pastebin.com/hq907uQR
https://pastebin.com/9VehTSWL
https://pastebin.com/8UE4KeVN