一鍵置灰通常應(yīng)用于如下場(chǎng)景

1. 重大悼念活動(dòng)：

在國(guó)家發(fā)生重大災(zāi)難、事故或舉行悼念日等特殊時(shí)期，為了表達(dá)對(duì)逝者的尊重和哀悼，許多 APP 會(huì)將界面置灰。例如，在一些地震、空難等災(zāi)難事件發(fā)生后，以及全國(guó)性的哀悼日期間，大量 APP 會(huì)響應(yīng)號(hào)召進(jìn)行一鍵置灰。這不僅是一種情感上的表達(dá)，也是企業(yè)和平臺(tái)社會(huì)責(zé)任感的體現(xiàn)。

2. 特殊紀(jì)念日或主題活動(dòng)：

某些具有特殊意義的紀(jì)念日活動(dòng)，APP 可能會(huì)選擇置灰界面來(lái)營(yíng)造特定的氛圍。比如在反法西斯戰(zhàn)爭(zhēng)勝利紀(jì)念日等與歷史事件相關(guān)的日子，一些歷史文化類或相關(guān)主題的 APP 可能會(huì)通過(guò)置灰來(lái)引導(dǎo)用戶關(guān)注和銘記這些重要時(shí)刻。

3. 模擬特殊視覺(jué)效果或用戶體驗(yàn)場(chǎng)景：

在一些特定的應(yīng)用場(chǎng)景中，為了給用戶帶來(lái)獨(dú)特的視覺(jué)感受或模擬特定的情境，APP 會(huì)使用置灰功能。例如，在一些電影、電視劇的宣傳 APP 中，為了營(yíng)造出懷舊、復(fù)古或特定的劇情氛圍，可能會(huì)將界面一鍵置灰，讓用戶仿佛置身于特定的時(shí)代背景中；或者在一些游戲 APP 中，特定的關(guān)卡或場(chǎng)景可能需要將界面置灰，以增加游戲的神秘感、緊張感或突出特定的元素。

4. 系統(tǒng)或 APP 維護(hù)升級(jí)：

當(dāng) APP 進(jìn)行維護(hù)、升級(jí)或出現(xiàn)故障需要暫停使用時(shí)，為了向用戶明確提示當(dāng)前 APP 的不可用狀態(tài)，可能會(huì)將界面置灰，并顯示相關(guān)的維護(hù)提示信息。這樣可以避免用戶在不知情的情況下繼續(xù)操作，減少用戶的困惑和不滿，同時(shí)也方便開(kāi)發(fā)團(tuán)隊(duì)進(jìn)行維護(hù)工作。

實(shí)現(xiàn)方案

1. 組件通用屬性 grayscale

grayscale(value: number) 為組件添加灰度效果。
value，為當(dāng)前組件添加灰度效果。值定義為灰度轉(zhuǎn)換的比例，入?yún)?.0則完全轉(zhuǎn)為灰度圖像，入?yún)?.0則圖像無(wú)變化，入?yún)⒃?.0和1.0之間時(shí)，效果呈線性變化。（百分比)；默認(rèn)值：0.0；取值范圍：[0.0, 1.0]；說(shuō)明：設(shè)置小于0.0的值時(shí)，按值為0.0處理，設(shè)置大于1.0的值時(shí)，按值為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)

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

2、窗口屬性 setWindowGrayScale

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

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、使用工具庫(kù)harmony-utils

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

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

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

審核編輯 黃宇