当前位置：首页 > news >正文

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

news 2025/9/9 8:41:24

前言：

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

官方文档参考下方：

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 = datalet 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 = datalet 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%')}
}