HarmonyOS 鸿蒙Next沉浸式状态栏字体颜色改变方法
HarmonyOS 鸿蒙Next沉浸式状态栏字体颜色改变方法
有要学HarmonyOS AI的同学吗,联系我:https://www.itying.com/goods-1206.html
封装好了:
/*
* [@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()
}
}
谢谢分享,棒!
HarmonyOS鸿蒙Next沉浸式状态栏字体颜色改变方法主要依赖于编程实现。开发者可以通过编程接口设置状态栏字体颜色,确保其与应用程序主题风格一致。具体方法包括使用setStatusBarColor
和setStatusBarDarkIcon
等方法,以及调整SystemBarProperties
属性中的statusBarContentColor
。如果问题依旧没法解决,请加我微信,我的微信是itying888。