HarmonyOS5 状态栏文字颜色设置工具封装解析~

一、工具类核心作用

本工具类通过封装鸿蒙窗口管理能力,提供状态栏文字颜色快速切换功能,支持深色(黑色)和浅色(白色)两种模式,适用于需要动态适配不同主题场景的鸿蒙应用开发。

浅色模式

深色模式

二、代码结构解析

javascript 复制代码
import { CONTEXT } from "../constants";
import { window } from "@kit.ArkUI";
class StatusBar {
  // 设置深色模式(黑色文字)
  setDarkBar() {
    this.setBar({ statusBarContentColor: '#000000' });
  }

  // 设置浅色模式(白色文字)
  setLightBar() {
    this.setBar({ statusBarContentColor: '#ffffff' });
  }

  // 核心设置方法
  async setBar(config: window.SystemBarProperties) {
    const ctx = AppStorage.get<Context>(CONTEXT);
    if (ctx) {
      const win = await window.getLastWindow(ctx);
      win.setWindowSystemBarProperties(config);
    }
  }
}

export const statusBar = new StatusBar();

1. 上下文获取

  • 通过AppStorage获取全局存储的Context对象
  • 需在应用启动时注入上下文(参考EntryAbility初始化):
javascript 复制代码
// EntryAbility.ets
onWindowStageCreate(windowStage: window.WindowStage) {
  AppStorage.setOrCreate(CONTEXT, this.context);
}

2. 窗口对象操作

  • 使用window.getLastWindow()获取当前窗口实例
  • 调用setWindowSystemBarProperties设置系统栏属性

3. 颜色配置参数

  • statusBarContentColor:控制状态栏文字/图标颜色
  • 支持HEX、RGB等颜色格式
  • 扩展能力:可配置其他系统栏属性(如背景色、透明度)

四、使用示例

less 复制代码
// 在页面生命周期中调用
@Entry
@Component
struct HomePage {
  aboutToAppear() {
    // 根据页面背景色动态切换
    statusBar.setLightBar(); // 白色文字
    // 或
    statusBar.setDarkBar();  // 黑色文字
  }

  build() {
    // 页面内容...
  }
}

五、注意事项

1. 上下文依赖

  • 必须确保CONTEXT在AppStorage中正确初始化
  • 建议在EntryAbility的onWindowStageCreate阶段注入

2. 异步处理

  • getLastWindow为异步操作,需使用async/await
  • 推荐在页面生命周期(如aboutToAppear)调用

3. 颜色适配建议

  • 深色模式建议搭配浅色状态栏背景
  • 浅色模式建议搭配深色状态栏背景
  • 可通过组合设置实现沉浸式状态栏:
php 复制代码
win.setWindowSystemBarProperties({
  statusBarContentColor: '#ffffff',
  statusBarColor: '#000000'
});

4. 兼容性说明

  • 适用于HarmonyOS 5.0.0+版本
  • 需在module.json5配置状态栏可见性:
json 复制代码
"abilities": [{
  "name": "EntryAbility",
  "visible": true,
  "window": {
    "statusBarVisibility": "visible"
  }
}]
该封装方案通过抽象系统API调用,简化了状态栏样式的管理复杂度,使开发者可以更专注于业务逻辑实现,同时保证了代码的可维护性和扩展性。
相关推荐
treasure1406 小时前
【复古】浅尝Django前后端不分离
前端·css·python·django·bootstrap·html·web
jay神7 小时前
基于 YOLOv8 的手势识别系统(Web 版)
前端·人工智能·python·深度学习·yolo·计算机视觉·计算机毕业设计
屏什么录7 小时前
长时间录屏中途崩溃:MP4 打不开的 6 种救回方案与参数设置
前端·音视频开发
code_Bo7 小时前
不只命令行:我把跨 Agent 会话同步做成了桌面应用
前端·javascript·后端
kyriewen8 小时前
AI 能把页面写出来,为什么改个需求就开始崩?
前端·javascript·人工智能
涛涛ing9 小时前
2026年最值得关注的前端变化,藏在“默认值”里
前端
亿元程序员11 小时前
太牛了!这AI做出来的游戏,居然还能变现!
前端
hellice11 小时前
闪传 FlashDrop 实战:我用 300 行 Node 代码做了个「4 位取件码」临时文件中转站
前端·产品
用户08297732600511 小时前
RTX 5500 MIG 踩坑记录:切分之后模型跑不起来,排错整整一下午
前端
Lank_M11 小时前
AI 放大后的图更清楚,但它不能当原图入库
前端