鸿蒙Next封装一个状态栏工具

52 阅读1分钟

 实现一个控制状态栏的工具,可以快捷设置安全区为黑色和白色状态文字

封装工具函数,可以创建一个utils目录,将该ets文件放在该目录下

  1. 封装一个StatusClass类

 2. 该类提供一个设置状态栏的通用方法,(示例代码中我对该方法进行private私有化,如有需要可以去掉,实现在外部访问setStatusBar该通用方法)

 3. 提供三个具体的方法 , 设置文字为白色 , 设置文字为黑色 ,设置文字为蓝色

  1. 实例化对象另导出  export const setStatusBar = new StatusClass()

5.如何使用

例如 设置为蓝色导航栏

Button('点击')

.onClick(() => {

setStatusBar.setBlueStatus()

})

转存失败,建议直接上传图片文件

转存失败,建议直接上传图片文件​编辑

示例代码

import { window } from "@kit.ArkUI";

class StatusClass {

/**

  • 深色

*/

setDarkStatus() {

this.setStatusBar({ statusBarContentColor: '#000000' })

}

/**

  • 蓝色

*/

setBlueStatus() {

this.setStatusBar({ statusBarContentColor: '#ff0055ff' })

}

/**

  • 浅色

*/

setLightStatus() {

this.setStatusBar({ statusBarContentColor: '#ffffff' })

}

private async setStatusBar(config: window.SystemBarProperties) {

try {

// 获取上下文

const context = getContext()

const win = await window.getLastWindow(context)

win.setWindowSystemBarProperties(config)

} catch (e) {

console.log('' + JSON.stringify(e))

}

}

}

export const setStatusBar = new StatusClass()

转存失败,建议直接上传图片文件

扩展: 我们可以使用onVisibleAreaChange,实现进入当前页,状态栏文字颜色设置白色,离开后文字颜色变回黑色

.onVisibleAreaChange([0, 1], (visible: boolean) => {

if (visible) {

setStatusBar.setLightStatus()

} else {

setStatusBar.setDarkStatus()

}

})

​ 适用HarmonyOS NEXT / API12或以上版本