HamronyOS开发5.0【ArkUI沉浸式状态栏】

最新推荐文章于 2024-09-24 14:59:40 发布

鸿蒙系统小能手Mr.Li

最新推荐文章于 2024-09-24 14:59:40 发布

阅读量1k

点赞数 27

分类专栏：鸿蒙开发文章标签： openharmony harmonyos 鸿蒙鸿蒙系统程序员 ArkUI UI

本文链接：https://blog.csdn.net/2401_82772199/article/details/141266035

版权

鸿蒙开发专栏收录该内容

264 篇文章 3 订阅

订阅专栏

引导

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

全屏模式

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

// 实现代码
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文件中可以直接使用此方法。

// 实现代码
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中取；也可以保存到工具类中，用的时候从工具类中取。根据业务决定怎么方便怎么用。

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

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

隐藏状态栏、导航栏

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

// 实现代码
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"]);
  }
}

设置状态栏颜色

// 实现代码
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"
    })
  }
}

支持设置的系统栏颜色

最后呢，很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。