HarmonyOS NEXT應用開發之深色模式適配

生活就是这么怪發表於2024-04-19
模式

介紹

本示例介紹在開發應用以適應深色模式時，對於深色和淺色模式的適配方案，採取了多種策略如下：

  1. 固定屬性適配：對於部分元件的顏色屬性，如背景色或字型顏色，若保持不變，可直接設定固定色值或引用固定的資原始檔。
  2. 雙資源目錄適配：在resources目錄下新增dark子目錄，用於存放深色模式下的特定顏色配置（color.json檔案）和圖片資源（media檔案）。在深色模式下，系統會自動載入此目錄中的顏色及圖片資源，確保與淺色模式下的UI元素色彩差異性。
  3. 利用系統分層引數：對於支援深淺模式切換的系統層級顏色資源，我們可以直接引用這些具有分層特性的引數，使得當切換裝置主題時，相關元件的顏色能根據系統當前顏色模式自動更新。
  4. 監聽當前顏色模式變化：透過註冊AbilityStage.onConfigurationUpdate事件監聽器，實時捕捉到裝置深淺顏色模式的變化，並據此動態調整UI佈局結構或邏輯處理，以適應不同模式下的最佳視覺體驗。

效果圖預覽

image

使用說明

  1. 在應用主頁點選“深色模式”案例，將應用切至後臺，系統顏色模式發生改變（如在系統設定中切換深淺色模式），當應用重新被啟用至前臺時，能夠立即檢測到系統顏色模式的變化，並自動更新為對應顏色主題的檢視介面。

實現思路

  1. 當UI元件的顏色屬性被設定為固定顏色值時，其在深色模式和淺色模式下的顯示顏色將保持不變。
// 將Text直接設定成'#000000'固定色值
Text("精品好禮")
 .opacity(0.6)
 .fontColor($r('app.color.black_font_color'))
 .margin({ left: $r('app.integer.text_margin_left') })
  1. 為了實現深色模式下的顏色適配，可以在resources目錄下新建'dark/element'的子目錄，並在此目錄中建立color.json檔案。為深色模式下的各個UI元件指定相應的顏色值，務必確保與淺色模式下同名顏色資源名稱一致，以確保系統能夠正確識別並切換。
// 用資源ID方式設定Column背景色。（淺色模式色值為'#FA5A3C'、深色模式色值為'#000000'）
.backgroundColor($r('app.color.column_bg_color'))
  1. 若UI元件的顏色屬性引用的是系統提供的具有層級引數的顏色資源，則當裝置在深色模式和淺色模式間切換時，這些顏色會自動調整至對應模式下的預設色值。
// 用系統提供的分層引數顏色資源方式設定色值 
Text(item.price)
 .fontSize($r('app.integer.goods_font'))
 .offset({ x: -3 })// 因為￥是中文字元，上面的是中文字元，佔的寬度不一樣，所以需要對齊，新增offset
 .fontColor($r('sys.color.ohos_id_color_foreground'))
  1. 對於PNG、WEBP或JPEG格式的圖片資源，若需支援深色模式，應在resources目錄下新增一個'dark/media'子目錄，將深色模式下對應的圖片放入此目錄，並確保圖片檔名與淺色模式下的圖片相同，以便系統根據當前模式載入合適的圖片資源。
// SVG格式圖片fillColor顏色資源ID方式設定（淺色模式色值為'#000000'、深色模式色值為'#FFFFFF'）
Image($r('app.media.view'))
 .fillColor($r('app.color.view_fill_color'))
 .width($r('app.integer.view_image_width'))
 .aspectRatio(1)
 .objectFit(ImageFit.Contain)
  1. 在存在深淺兩種模式下佈局結構或邏輯處理有所差異的情況時，開發者應當利用AbilityStage.onConfigurationUpdate監聽介面來實時感知系統主題的變化，並據此做出相應的佈局調整或邏輯處理，從而確保應用能夠在不同模式下呈現出理想的介面效果及功能體驗。
  • 第一步儲存全域性引數，並透過onConfigurationUpdate重新整理狀態列
// 獲取當前的顏色模式並儲存並在onConfigurationUpdate
AppStorage.setOrCreate('currentColorMode', this.context.config.colorMode);
// 儲存windowStage供fitfordarkmode的har包中FitForDarkPage.ets中setStatusBar方法修改狀態列顏色。
AppStorage.setOrCreate('windowStage', windowStage);

// 檢測當前的深淺模式是否發生變化，重新整理狀態列
onConfigurationUpdate(config: Configuration) {
 // 獲取最新的變更顏色並更新到AppStorage
 AppStorage.setOrCreate('currentColorMode', config.colorMode);
 logger.info(`onConfigurationUpdate, config: ${JSON.stringify(config)}`);
}
  • 第二步在FitForDarKMode.ets中獲取並監聽當前顏色模式
// @StorageProp + @Watch 獲取並監聽當前顏色模式
@StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number = 0;
// @Watch回撥函式，監聽顏色模式重新整理狀態變數
onColorModeChange(): void {
  if (this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {
    this.banner = $r("app.media.dark_mode_banner");
  } else {
    this.banner = $r("app.media.light_mode_banner");
  }
}
  • 第三步在FitForDarKMode.ets生命週期aboutToAppear中根據當前顏色模式重新整理banner狀態變數，切換不同的圖片。
// 在自定義元件生命週期aboutToAppear中，根據當前顏色模式重新整理banner狀態變數，切換不同的圖片。
aboutToAppear(): void {
  if (this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {
    this.banner = $r("app.media.dark_mode_banner");
} else {
    this.banner = $r("app.media.light_mode_banner");
    // 在當前為淺色模式中，確保介面美觀且顏色統一，設定導航欄的背景色。
    setStatusBar(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
  }
}
  • 第四步在FitForDarKMode.ets生命週期aboutToDisappear中，重置導航欄的背景色避免影響其它頁面的導航欄為紅色。
// 在自定義元件生命週期aboutToDisappear中，重置導航欄的背景色避免影響其它頁面的導航欄為紅色。
aboutToDisappear(): void {
  setStatusBar(this.currentMode)
}
  • 第五步在FitForDarKMode.ets生命週期aboutToDisappear中，重置導航欄的背景色避免影響其它頁面的導航欄為紅色。
// 呼叫setWindowSystemBarProperties()設定狀態列及導航欄的顏色
windowClass.setWindowSystemBarProperties(sysBarProps, (err) => {
  if (err.code) {
    logger.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err));
    return;
  }
  logger.info('Succeeded in setting the system bar properties.');
});

高效能知識點

不涉及

工程結構&模組型別

fitfordarkmode                                   // har型別
|---mock
|   |---GoodsMock.ets                            // 商品列表資料 
|---mode
|   |---GoodsModel.ets                           // 商品資料型別定義 
|---view
|   |---FitForDarkMode.ets                       // 深色模式適配主頁面 
|   |---GoodsList.ets                            // 商品列表自定義元件

模組依賴

本例項依賴common模組來實現資源的呼叫以及公共元件FunctionDescription的引用。 還需要依賴EntryAbility.ets模組。

參考資料

設定深色模式

@ohos.app.ability.ConfigurationConstant (ConfigurationConstant)

相關文章