一鍵置灰通常應用于如下場景

1. 重大悼念活動：

在國家發生重大災難、事故或舉行悼念日等特殊時期，為了表達對逝者的尊重和哀悼，許多 APP 會將界面置灰。例如，在一些地震、空難等災難事件發生后，以及全國性的哀悼日期間，大量 APP 會響應號召進行一鍵置灰。這不僅是一種情感上的表達，也是企業和平臺社會責任感的體現。

2. 特殊紀念日或主題活動：

某些具有特殊意義的紀念日活動，APP 可能會選擇置灰界面來營造特定的氛圍。比如在反法西斯戰爭勝利紀念日等與歷史事件相關的日子，一些歷史文化類或相關主題的 APP 可能會通過置灰來引導用戶關注和銘記這些重要時刻。

3. 模擬特殊視覺效果或用戶體驗場景：

在一些特定的應用場景中，為了給用戶帶來獨特的視覺感受或模擬特定的情境，APP 會使用置灰功能。例如，在一些電影、電視劇的宣傳 APP 中，為了營造出懷舊、復古或特定的劇情氛圍，可能會將界面一鍵置灰，讓用戶仿佛置身于特定的時代背景中；或者在一些游戲 APP 中，特定的關卡或場景可能需要將界面置灰，以增加游戲的神秘感、緊張感或突出特定的元素。

4. 系統或 APP 維護升級：

當 APP 進行維護、升級或出現故障需要暫停使用時，為了向用戶明確提示當前 APP 的不可用狀態，可能會將界面置灰，并顯示相關的維護提示信息。這樣可以避免用戶在不知情的情況下繼續操作，減少用戶的困惑和不滿，同時也方便開發團隊進行維護工作。

實現方案

1. 組件通用屬性 grayscale

grayscale(value: number) 為組件添加灰度效果。
value，為當前組件添加灰度效果。值定義為灰度轉換的比例，入參1.0則完全轉為灰度圖像，入參0.0則圖像無變化，入參在0.0和1.0之間時，效果呈線性變化。（百分比)；默認值：0.0；取值范圍：[0.0, 1.0]；說明：設置小于0.0的值時，按值為0.0處理，設置大于1.0的值時，按值為1.0處理。

Image($r('app.media.image')).width('90%').height(30).grayscale(0.7)
Image($r('app.media.image')).width('90%').height(30).grayscale(1)
 
Text('為組件添加灰度效果').fontSize(15).fontColor(0xFF0000).grayscale(1)

封裝一個通用的置灰組件，所有頁面使用該組件包裹。

2、窗口屬性 setWindowGrayScale

setWindowGrayScale(grayScale: number): Promise
設置窗口灰階，使用Promise異步回調。該接口需要在調用loadContent()或setUIContent()使窗口加載頁面內容后調用。
grayScale，窗口灰階。該參數為浮點數，取值范圍為[0.0, 1.0]。0.0表示窗口圖像無變化，1.0表示窗口圖像完全轉為灰度圖像，0.0至1.0之間時效果呈線性變化。

import { BusinessError } from '@kit.BasicServicesKit';

windowClass?.setUIContent('pages/Index', (error: BusinessError) = > {
  if (error.code) {
    console.error(`Failed to set the content. Cause code: ${error.code}`);
    return;
  }
  console.info('Succeeded in setting the content.');
  let grayScale: number = 0.5;
  try {
    if (canIUse("SystemCapability.Window.SessionManager")) {
      let promise = windowClass?.setWindowGrayScale(grayScale);
      promise?.then(() = > {
        console.info('Succeeded in setting the grayScale.');
      }).catch((err: BusinessError) = > {
        console.error(`Failed to set the grayScale. Cause code: ${err.code}, message: ${err.message}`);
      });
    }
  } catch (exception) {
    console.error(`Failed to set the grayScale. Cause code: ${exception.code}, message: ${exception.message}`);
  }
});

3、使用工具庫harmony-utils

調用工具類方法， AppUtil.setGrayScale(1);

AppUtil.setGrayScale(0.7); //設置灰度0.7
AppUtil.setGrayScale(1); //設置全灰
AppUtil.setGrayScale(1, true); //只置灰主窗口

AppUtil.setGrayScale(0); //取消置灰

審核編輯 黃宇