HarmonyOS ArkUI沉浸式状态栏

引导

先来看下创建一个默认工程时,状态栏与底部导航栏的样式:可以看到顶部状态是黑色背景颜色,白色文字,与第一个组件的红色背景色有明显分界;底部导航栏背景颜色为白色,按钮颜色为灰色,与最后一个组件的蓝色背景有明显分界。

全屏模式

然后我们先把window设置为全屏模式,先看下文档说明:需要先通过windowState.getMainWindow()获取到window对象,然后调用window.setWindowLayoutFullScreen(true)即可。此全屏模式是指把布局扩展到顶部状态与底部导航栏,而且此时状态栏与导航栏都是可见的。

typescript 复制代码
// 实现代码
onWindowStageCreate(windowStage: window.WindowStage) {
  windowStage.getMainWindow((err, mainWindow: window.Window) => {
    if (err.code) {
      hilog.error(0x0000, TAG, 'Failed to get main window. Cause: %{public}s', JSON.stringify(err) ?? '');
return
    }
    mainWindow.setWindowLayoutFullScreen(true);
  }
}

可以看到第一个组件已经延伸到状态栏里面了,但是这样还不完善,因为组件内容文字与状态栏文字重叠了。

获取状态栏、导航栏高度

一般情况下,如果没有特殊要求,都会给每个页面的根组件设置一个背景色,然后再设置一个padding-top,值为状态栏高度,arkUi中获取状态栏高度方法是通过window去获取。与上一步一样,获取到window对象后直接调用getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)方法即可,里面的topRect就是顶部状态的矩形框,topRect.height即为状态栏高度。

需要注意的是此时获取到的高度的单位为像素(px),在page中使用的话需要先转为vp,直接使用px2vp即可,如果在UIAbility中找不到此方法,看下Alility文件后缀是不是.ets,如果不是的话建议改一下文件后缀,在ets文件中可以直接使用此方法。

typescript 复制代码
// 实现代码
onWindowStageCreate(windowStage: window.WindowStage) {
  windowStage.getMainWindow((err, mainWindow: window.Window) => {
    if (err.code) {
      hilog.error(0x0000, TAG, 'Failed to get main window. Cause: %{public}s', JSON.stringify(err) ?? '');
return
    }
    mainWindow.setWindowLayoutFullScreen(true);
  
    let avoidArea: window.AvoidArea = mainWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
    let vpStatusBarHeight: number = px2vp(avoidArea.topRect.height)
    let vpNavigationBarHeight: number = px2vp(avoidArea.bottomRect.height)
    
    let targetSystemArea: SystemArea = {
      statusBarHeight: vpStatusBarHeight,
      navigationBarHeight: vpNavigationBarHeight
    }

    // 保存到工具类中
    WindowHelper.setSystemArea(targetSystemArea)
  }
}

可以把获取到的状态栏高度保存到ShardLocalStorage中,用的时候从@LocalStorageProp中取;也可以保存到工具类中,用的时候从工具类中取。根据业务决定怎么方便怎么用。

typescript 复制代码
Column() {
  // ...
}
.width('100%')
.justifyContent(FlexAlign.Start)
.backgroundColor(Color.Yellow)
.alignItems(HorizontalAlign.Start)
.padding({ top: WindowHelper.getStatusBarHeight() })

可以看到根组件的背景色显示出了状态栏高度的那一部分,正常业务调整背景色或者第一个组件的背景色都可以。

隐藏状态栏、导航栏

在全屏模式下,默认还是会显示状态栏与导航栏,如果需要完全的沉浸式体验,例如看视频或者打游戏,都需要隐藏状态栏与导航栏,此时可以调用window.setWindowSystemBarEnable实现。如果不需要显示,则传入一个空数组即可。如果需要显示哪个,就传入哪一个系统bar的名称即可,如status或navigation

typescript 复制代码
// 实现代码
onWindowStageCreate(windowStage: window.WindowStage) {
  windowStage.getMainWindow((err, mainWindow: window.Window) => {
    if (err.code) {
      hilog.error(0x0000, TAG, 'Failed to get main window. Cause: %{public}s', JSON.stringify(err) ?? '');
return
    }
    mainWindow.setWindowLayoutFullScreen(true);
    
    // 隐藏状态栏与导航栏
    mainWindow.setWindowSystemBarEnable([]);
    
    // 显示状态栏、隐藏导航栏
    // mainWindow.setWindowSystemBarEnable(["status"]);
    
    // 隐藏状态栏、显示导航栏
    // mainWindow.setWindowSystemBarEnable(["navigation"]);
    
    // 显示状态栏、显示导航栏
    // mainWindow.setWindowSystemBarEnable(["status", "navigation"]);
  }
}

设置状态栏颜色

typescript 复制代码
// 实现代码
onWindowStageCreate(windowStage: window.WindowStage) {
  windowStage.getMainWindow((err, mainWindow: window.Window) => {
    if (err.code) {
      hilog.error(0x0000, TAG, 'Failed to get main window. Cause: %{public}s', JSON.stringify(err) ?? '');
return
    }
    mainWindow.setWindowSystemBarProperties({
      statusBarColor: "#FFFF00",
      statusBarContentColor: "#0A59F7"
    })
  }
}

支持设置的系统栏颜色

以上实现基于HarmonyOS 3.1.0(API 9)(ArkTS 3.2.12.5),如有不对的地方,请多包容,感谢指正。

相关推荐
SuperHeroWu79 小时前
【HarmonyOS】元服务入门详解 (一)
华为·harmonyos·鸿蒙·元服务·卡片·免安装
Georgewu9 小时前
【HarmonyOS】ArkUI-X 跨平台框架入门详解(一)
harmonyos
SuperHeroWu79 小时前
【HarmonyOS】元服务概念详解
华为·harmonyos·鸿蒙·概念·元服务·详解
Georgewu9 小时前
【HarmonyOS】ArkUI-X一套代码跑多端的跨平台方案概念详解
harmonyos
zhanshuo14 小时前
HarmonyOS NEXT 智能场景识别实战:让设备主动思考的关键技术揭秘
harmonyos
zhanshuo18 小时前
HarmonyOS分布式能力全解析:手机一放下,音箱自动响起!
harmonyos
zhanshuo18 小时前
基于HarmonyOS的智能灯光控制系统设计:从定时触发到动作联动全流程实战
harmonyos
weixin_5412999419 小时前
鸿蒙应用开发: 鸿蒙项目中使用私有 npm 插件的完整流程
华为·npm·harmonyos·鸿蒙
Georgewu19 小时前
【HarmonyOS】元服务概念详解
harmonyos
Georgewu1 天前
【HarmonyOS】元服务入门详解 (一)
harmonyos