评论

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

鸿蒙

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





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



1. 封装一个StatusClass类



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



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



4. 实例化对象另导出  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或以上版本


点赞 0
收藏
评论
登录 后发表内容