鸿蒙：更改状态栏、导航栏颜色

前言：

最近在学习深色模式切换的时候，注意到状态栏颜色是可以自行设置的，在这里，我做下分享。

官方文档参考下方：

https://developer.huawei.com/consumer/cn/doc/architecture-guides/architecture-v1-3_2-ts_45-0000002378096446https://developer.huawei.com/consumer/cn/doc/architecture-guides/architecture-v1-3_2-ts_45-0000002378096446

【这里给大家提供两种方案】

方案一：

逻辑写在组件内部，运行效果和代码如下：

Index.ets

复制代码

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

@Entry
@Component
struct Index {

changeColor(){
  let windowClass: window.Window | undefined = undefined;
  window.getLastWindow(getContext(), (err: BusinessError, data) => {
    windowClass = data
    let SystemBarProperties: window.SystemBarProperties = {
      statusBarColor: '#2b2b2b',
      statusBarContentColor: '#fc5531'
    };
    try {
      let promise = windowClass.setWindowSystemBarProperties(SystemBarProperties);
      promise.then(() => {
        console.info('Succeeded in setting the system bar properties.');
      }).catch((err: BusinessError) => {
        console.error(`Failed to set the system bar properties. Cause code: ${err.code}, message: ${err.message}`);
      });
    } catch (exception) {
      console.error(`Failed to set the system bar properties. Cause code: ${exception.code}, message: ${exception.message}`);
    }
  })
}

  build() {
   Column(){
     Button("变更颜色")
       .onClick(()=>{
         this.changeColor()
       })
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

方案二：

逻辑抽离到一个工具类中，运行效果如下：

代码如下：

StatusBarManager.ets

复制代码

import { common } from "@kit.AbilityKit";
import { window } from "@kit.ArkUI";
import { BusinessError } from "@kit.BasicServicesKit";

export class StatusBarManager {
  static handleStatusBarAction(context: common.BaseContext, p: string): void {
    try {
      interface ParamsType {
        action: string;
        args: Array<string>;
      }

      const params: ParamsType = JSON.parse(p);
      const action: string = params.action;
      const args: Array<string> = params.args;

      let statusBarColor = '#007dff';

      if (action === 'backgroundColorByHexString') {
        statusBarColor = args[0] || statusBarColor;
      }

      const systemBarProperties: window.SystemBarProperties = {
        statusBarColor: statusBarColor,
        statusBarContentColor: '#F7CE00',
      };

      StatusBarManager.setStatusBarBgColor(context, systemBarProperties);
    } catch (error) {
      console.error('Failed to parse or handle status bar action. Error:');
    }
  }

  private static setStatusBarBgColor(context: common.BaseContext,
    systemBarProperties: window.SystemBarProperties): void {
    window.getLastWindow(context).then((windowClass: window.Window) => {
      try {
        windowClass.setWindowSystemBarProperties(systemBarProperties);
        console.info('Status bar color updated successfully.');
      } catch (exception) {
        console.error('Failed to set the system bar properties. Cause: ');
      }
    }).catch((error: BusinessError) => {
      console.error('Failed to get last window. Error: ');
    });
  }
}

Index.ets

复制代码

import window from '@ohos.window';
import { BusinessError } from '@kit.BasicServicesKit';
import { StatusBarManager } from './StatusBarManager';
import { common } from '@kit.AbilityKit';

@Entry
@Component
struct Index {

changeColor(){
  let windowClass: window.Window | undefined = undefined;
  window.getLastWindow(getContext(), (err: BusinessError, data) => {
    windowClass = data
    let SystemBarProperties: window.SystemBarProperties = {
      statusBarColor: '#2b2b2b',
      statusBarContentColor: '#fc5531'
    };
    try {
      let promise = windowClass.setWindowSystemBarProperties(SystemBarProperties);
      promise.then(() => {
        console.info('Succeeded in setting the system bar properties.');
      }).catch((err: BusinessError) => {
        console.error(`Failed to set the system bar properties. Cause code: ${err.code}, message: ${err.message}`);
      });
    } catch (exception) {
      console.error(`Failed to set the system bar properties. Cause code: ${exception.code}, message: ${exception.message}`);
    }
  })
}

  build() {
   Column(){
     Button("变更颜色")
       .onClick(()=>{
         StatusBarManager.handleStatusBarAction(this.getUIContext().getHostContext() as common.UIAbilityContext, '{}')

       })
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}