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

前言:

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

官方文档参考下方:

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%')
  }
}
相关推荐
fruge1 天前
提升 HarmonyOS 开发效率:DevEco Studio 6.0 热更新调试模式全指南
华为·harmonyos
2501_919749031 天前
鸿蒙:使用Image组件展示相册图片或rawfile图片
华为·harmonyos
2501_919749031 天前
鸿蒙:PersistenceV2页面间持久化存储数据
华为·harmonyos
yenggd1 天前
QoS之拥塞管理两种配置方法
网络·华为
一尘之中1 天前
操作系统内核架构深度解析:从单内核、微内核到鸿蒙分布式设计
架构·harmonyos·ai写作
咕噜企业签名分发-淼淼1 天前
App防止恶意截屏功能的方法:iOS、Android和鸿蒙系统的实现方案
android·ios·harmonyos
安卓开发者1 天前
鸿蒙NEXT NearLink Kit入门指南:重新定义短距无线通信
华为·harmonyos
科技风向标2 天前
2025 随身 WiFi 行业报告:格行 WiFi6 技术下放百元市场,中兴华为机型竞争力分析;五款机型芯片方案 / 网速 / 质保深度横评
网络·科技·物联网·华为·随身wifi·格行
想不明白的过度思考者2 天前
鸿蒙系统:不止于“手机OS”的全场景智能操作系统
华为·智能手机·harmonyos
IT WorryFree2 天前
华为光模块命名规则
华为