HarmonyOS 鸿蒙Next沉浸式状态栏字体颜色改变方法

发布于 1周前 作者 caililin 来自 鸿蒙OS

HarmonyOS 鸿蒙Next沉浸式状态栏字体颜色改变方法
有要学HarmonyOS AI的同学吗,联系我:https://www.itying.com/goods-1206.html

9 回复
沉浸式状态栏的时候,状态栏字体颜色要怎么设置,现在是黑色的 想改成白色?有大神指导一下吗?

封装好了:

/*
 * [@Desc](/user/Desc): 窗口工具管理相关
 * [@Author](/user/Author): qincji
 * [@Date](/user/Date): 2024/7/1
 */
import { display, window } from '@kit.ArkUI';
import { log } from './Log';
import { BusinessError } from '@kit.BasicServicesKit';

const TAG = ‘WindowUtil’;

export class WindowUtil { /**

  • 监听状态栏、底部导航栏、屏幕宽高的变化,并且使用AppStorage进行发送,只需要在需要处理页面内接收

  • @StorageProp(‘statusHeight’) statusHeight: number = 0; //状态栏高度(单位:vp)

  • @StorageProp(‘bottomHeight’) bottomHeight: number = 0; //导航栏高度(单位:vp)

  • @StorageProp(‘screenHeight’) screenHeight: number = 0; //屏幕高度(单位:vp)

  • @StorageProp(‘screenWidth’) screenWidth: number = 0; //屏幕宽度(单位:vp)

  • @param windowClass */ static listenToAppStorage(windowClass: window.Window) { try { windowClass.on(‘avoidAreaChange’, (data) => { log.i(TAG, ‘avoidAreaChange发生变化:’ + JSON.stringify(data.type) + ', area: ’ + JSON.stringify(data.area))

    // 获取系统状态栏和导航栏高度 window.getLastWindow(getContext()).then((lastWindow) => { let areas = lastWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM); //以状态栏为避让 const statusHeight = px2vp(areas.topRect.height);

     areas = lastWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR); <span class="hljs-comment"><span class="hljs-comment">// 以导航条避让</span></span>
     <span class="hljs-keyword"><span class="hljs-keyword">const</span></span> bottomHeight = px2vp(areas.bottomRect.height);
    
     log.i(TAG, `获取系统状态栏和导航栏高度: ${statusHeight} | ${bottomHeight}`)
     AppStorage.setOrCreate(<span class="hljs-string"><span class="hljs-string">'statusHeight'</span></span>, statusHeight);
     AppStorage.setOrCreate(<span class="hljs-string"><span class="hljs-string">'bottomHeight'</span></span>, bottomHeight);
    
     <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> displayClass: display.Display = display.getDefaultDisplaySync();
     <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> screenHeight = px2vp(displayClass.height);
     <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> screenWidth = px2vp(displayClass.width);
    
     log.i(TAG, `获取系统屏幕高度和屏幕宽度: ${screenHeight} | ${screenWidth}`)
     AppStorage.setOrCreate(<span class="hljs-string"><span class="hljs-string">'screenHeight'</span></span>, screenHeight);
     AppStorage.setOrCreate(<span class="hljs-string"><span class="hljs-string">'screenWidth'</span></span>, screenWidth);
    

    });

    }); } catch (exception) { log.e(TAG, avoidAreaChange监听失败. Cause code: ${exception.code}, message: ${exception.message}) } }

/**

  • 设置状态栏和导航栏的暗黑模式

  • @param windowClass

  • @param isDart */ static setDartEnable(windowClass: window.Window, isDart: boolean = false) { let sysBarProps: window.SystemBarProperties = { //状态栏 statusBarColor: ‘#00FFFFFF’, //设置透明颜色 statusBarContentColor: isDart ? ‘#000000’ : ‘#FFFFFF’,

    //导航栏 navigationBarColor: ‘#00FFFFFF’, //设置透明颜色 navigationBarContentColor: isDart ? ‘#000000’ : ‘#FFFFFF’, }; WindowUtil.setBarColor(windowClass, sysBarProps); }

/**

  • 显示并设置系统的状态栏和导航栏内容和背景颜色
  • @param windowClass
  • @param sysBarProps */ static setBarColor(windowClass: window.Window, sysBarProps: window.SystemBarProperties) { try { WindowUtil.setBarEnable(windowClass); windowClass.setWindowLayoutFullScreen(true, undefined); windowClass.setWindowSystemBarProperties(sysBarProps, undefined) } catch (err) { } }

/**

  • 隐藏系统的状态栏和导航栏来实现全屏
  • @param windowClass */ static setFullScreenHideBar(windowClass: window.Window) { WindowUtil.setBarEnable(windowClass, []); }

/**

  • 显示或隐藏系统的状态栏和导航栏,默认都显示
  • @param windowClass
  • @param names */ static setBarEnable(windowClass: window.Window, names: Array<‘status’ | ‘navigation’> = [‘status’, ‘navigation’]) { windowClass.setWindowSystemBarEnable(names, (err: BusinessError) => { let errCode: number = err.code; if (errCode) { log.i(TAG, ‘Failed to set the system bar to be visible. Cause:’ + JSON.stringify(err)) return; } log.i(TAG, ‘Succeeded in setting the system bar to be visible.’); }); } } <button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

优秀,我试试

大牛,这个好像在api 9项目上没法用

适配api12
在Ability的onWindowStageCreate方法内调用初始化方法:

import { window } from '[@kit](/user/kit).ArkUI';
import i18n from '[@ohos](/user/ohos).i18n';
import { deviceInfo } from '[@kit](/user/kit).BasicServicesKit';
import { display } from '[@kit](/user/kit).ArkUI';

export default class System {

/**
* 在Ability的onWindowStageCreate方法内调用初始化方法
*
* onWindowStageCreate(windowStage: window.WindowStage): void {
* System.init(windowStage)
* windowStage.loadContent('pages/Index');
* }
*
* [@param](/user/param) fullScreen 是否设置全屏
*/
static init(windowStage: window.WindowStage, fullScreen: boolean = true) {

/** 获取应用主窗口 **/
let windowClass: window.Window = windowStage.getMainWindowSync();

/** 设置窗口全屏**/
if (fullScreen) {
windowClass.setWindowLayoutFullScreen(true)
}

/** 获取导航栏和状态栏的高度 **/
let avoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
System.setSystemBottomRectHeight(avoidArea.bottomRect.height)
avoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
System.setSystemTopRectHeight(avoidArea.topRect.height)

/** 设置顶部状态栏文字颜色 **/
System.setStatusBarContentColor("#FFFFFF", windowClass)
}


/**
* 设置状态栏文字为黑色
*/
static setStatusBarContentColorBlack() {
System.setStatusBarContentColor('#333333')
}

/**
* 设置状态栏文字为白色
*/
static setStatusBarContentColorWhite() {
System.setStatusBarContentColor('#FFFFFF')
}

/**
* 设置状态栏颜色
*/
static setStatusBarContentColor(textColor: string, windowClass?: window.Window) {
let sysBarProps: window.SystemBarProperties = {
statusBarContentColor: textColor,
//statusBarColor: bgColor
}
if (windowClass == null) {
windowClass = AppStorage.get<window.Window>("__windowClass__")
} else {
AppStorage.setOrCreate("__windowClass__", windowClass)
}
windowClass!!.setWindowSystemBarProperties(sysBarProps)
}

/**
* 写入系统顶部状态栏高度
*/
static setSystemTopRectHeight(height: number) {
console.log("系统顶部状态栏高度", height)
AppStorage.setOrCreate("__SYSTEM_TOP_RECT_HEIGHT__", height)
}

/**
* 写入系统底部导航栏高度
*/
static setSystemBottomRectHeight(height: number) {
console.log("系统底部导航栏高度", height)
AppStorage.setOrCreate("__SYSTEM_BOTTOM_RECT_HEIGHT__", height)
}

/**
* 获取系统顶部状态栏高度
*/
static getSystemTopRectHeight(): string {
let height = AppStorage.get<number>("__SYSTEM_TOP_RECT_HEIGHT__")
return height ? `${height}px` : '0px'
}

/**
* 获取系统底部导航栏高度
*/
static getSystemBottomRectHeight(): number {
let height = AppStorage.get<number>("__SYSTEM_BOTTOM_RECT_HEIGHT__")
return height ? height : 0
}

/**
* 获取系统语言
*/
static getSystemLanguage(): string {
return i18n.System.getSystemLanguage();
}

/**
* 获取设备品牌名称
*/
static getSystemManufacture(): string {
return deviceInfo.brand
}

/**
* 获取系统版本
*/
static getSystemVersion(): string {
return deviceInfo.osFullName
}

static printSystemInfo() {
console.log("----------设备信息 START----------")
console.log("系统语言", i18n.System.getSystemLanguage())
console.log("设备类型", deviceInfo.deviceType)
console.log("设备厂家名称", deviceInfo.manufacture)
console.log("设备品牌名称", deviceInfo.brand)
console.log("外部产品系列", deviceInfo.marketName)
console.log("产品系列", deviceInfo.productSeries)
console.log("认证型号", deviceInfo.productModel)
console.log("内部软件子型号", deviceInfo.softwareModel)
console.log("硬件版本号", deviceInfo.hardwareModel)
console.log("Bootloader版本号", deviceInfo.bootloaderVersion)
console.log("应用二进制接口(Abi)", deviceInfo.abiList)
console.log("安全补丁级别", deviceInfo.securityPatchTag)
console.log("产品版本", deviceInfo.displayVersion)
console.log("差异版本号", deviceInfo.incrementalVersion)
console.log("系统的发布类型", deviceInfo.osReleaseType)
console.log("系统版本", deviceInfo.osFullName)
console.log("Major版本号", deviceInfo.majorVersion)
console.log("Senior版本号", deviceInfo.seniorVersion)
console.log("Feature版本号", deviceInfo.featureVersion)
console.log("Build版本号", deviceInfo.buildVersion)
console.log("系统软件API版本", deviceInfo.sdkApiVersion)
console.log("首个版本系统软件API版本", deviceInfo.firstApiVersion)
console.log("版本ID", deviceInfo.versionId)
console.log("构建类型", deviceInfo.buildType)
console.log("构建用户", deviceInfo.buildUser)
console.log("构建主机", deviceInfo.buildHost)
console.log("构建时间", deviceInfo.buildTime)
console.log("构建版本Hash", deviceInfo.buildRootHash)
console.log("发行版系统名称", deviceInfo.distributionOSName)
console.log("发行版系统版本号", deviceInfo.distributionOSVersion)
console.log("发行版系统api版本", deviceInfo.distributionOSApiVersion)
console.log("发行版系统类型", deviceInfo.distributionOSReleaseType)
console.log("开发者匿名设备标识符(ODID)", deviceInfo.ODID)
console.log("----------设备信息 END----------")
}

/**
* 获取设备唯一标识符
*/
static getODID(): string {
return deviceInfo.ODID
}

/**
* 获取屏幕信息
*/
static getDisplayInfo() {
return display.getDefaultDisplaySync()
}
}

谢谢分享,棒!

Cannot find module '[@kit](/user/kit).BasicServicesKit' or its corresponding type declarations. <tsCheck> 这个如何解决了

HarmonyOS鸿蒙Next沉浸式状态栏字体颜色改变方法主要依赖于编程实现。开发者可以通过编程接口设置状态栏字体颜色,确保其与应用程序主题风格一致。具体方法包括使用setStatusBarColorsetStatusBarDarkIcon等方法,以及调整SystemBarProperties属性中的statusBarContentColor。如果问题依旧没法解决,请加我微信,我的微信是itying888。

回到顶部