HarmonyOS项目开发经历——开启沉浸式模式

沉浸式模式

首先我们得先知道什么是沉浸式模式。

在手机系统中,由于有安全区域的限制,因此我们在开发应用时并不能全屏显示,例如下图,注意顶部状态栏:

开启沉浸式模式后,再注意顶部状态栏:

那么如何实现这种效果呢,我们就需要突破手机自带的顶部的安全区域,达到沉浸式全屏显示的效果。

一、直接在index主页开启沉浸式模式(一进应用页面就开启):

ts 复制代码
aboutToAppear() {
   this.enableFullScreen()
}
​
async enableFullScreen() {
    const win = await window.getLastWindow(getContext()) //使用window这个API的getLastWindow方法获取页面
    win.setWindowLayoutFullScreen(true) //使用setWindowLayoutFullScreen设置true开启沉浸式模式
    const area = await win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM) //使用getWindowAvoidArea方法获取到安全区域的高度
    let vpHeight = px2vp(area.topRect.height)
    AppStorage.setOrCreate('topHeight', vpHeight) //将高度转成vp,存到AppStorage中方便其它页面获取高度
  }

1、解释一下为什么要一进应用就开启? 因为在最新鸿蒙当中,使用API在开启沉浸式模式后会有小bug,就是一旦开启沉浸式模式,当我们切换到别的页面也会开启。所以我们统一在index主页开启,也就是一进入应用就开启。

2、为什么要获取安全区域高度? 因为我们在index主页中开启了沉浸式模式,我们所有页面都会进入沉浸式,在我们不需要全屏显示的页面就可以通过拿到这个高度来调整顶部高度,间接等于关闭了沉浸式模式。

二、设置顶部安全区域状态栏的字体颜色(看项目界面的需求,按UI设计稿来)

ts 复制代码
   async settingStatusBarLight() {
    const win = await window.getLastWindow(getContext())
    win.setWindowSystemBarProperties({ statusBarContentColor: '#FFFFFF' }) //设置安全区字体颜色为白色
  }
​
  async settingStatusBarDark() {
    const win = await window.getLastWindow(getContext())
    win.setWindowSystemBarProperties({ statusBarContentColor: '#000000' }) //设置安全区字体颜色为白色
  }

效果图(注意顶部系统状态栏的颜色由黑色变成了白色):

三、封装沉浸式模式的代码(便于复用)

完整代码

ts 复制代码
import { window } from '@kit.ArkUI'
​
export class windowManager {
  //开启沉浸式全屏模式
  static async enableFullScreen() {
    const win = await window.getLastWindow(getContext()) //使用window这个API的getLastWindow方法获取页面
    win.setWindowLayoutFullScreen(true) //使用setWindowLayoutFullScreen设置true开启沉浸式模式
    const area = await win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM) //使用getWindowAvoidArea方法获取到安全区域的高度
    let vpHeight = px2vp(area.topRect.height)
    AppStorage.setOrCreate('topHeight', vpHeight) //将高度转成vp,存到AppStorage中方便其它页面获取高度
  }
​
  //关闭沉浸式模式
  static async disableFullScreen() {
    const win = await window.getLastWindow(getContext()) //使用window这个API的getLastWindow方法获取页面
    win.setWindowLayoutFullScreen(false) //使用setWindowLayoutFullScreen设置false关闭沉浸式模式
    AppStorage.setOrCreate('topHeight', 0) //将高度重置为零
  }
​
  static async settingStatusBarLight() {
    const win = await window.getLastWindow(getContext())
    win.setWindowSystemBarProperties({ statusBarContentColor: '#FFFFFF' }) //设置安全区字体颜色为白色
  }
​
  static async settingStatusBarDark() {
    const win = await window.getLastWindow(getContext())
    win.setWindowSystemBarProperties({ statusBarContentColor: '#000000' }) //设置安全区字体颜色为白色
  }
}

四、页面中调用封装好的代码

1、其他的页面需要调整顶部距离(通过设置顶部padding关闭全屏显示)

ts 复制代码
  @StorageProp('topHeight') topHeight: number = 0 //获取安全区域高度,通过padding设置顶部距离
  
  @Entry
@Component
struct SettingPage {
  @StorageProp('topHeight') topHeight: number = 0
    
  build() {
    Navigation() {
​
    }.title('返回')
    .titleMode(NavigationTitleMode.Mini)
    .padding(this.topHeight)   // 通过调整顶部高度实现关闭沉浸式显示
​
  }
}

2、需要换状态栏字体颜色的页面

ts 复制代码
  aboutToAppear() {
    windowManager.settingStatusBarLight()
  }
​
  aboutToDisappear() {
    windowManager.settingStatusBarDark()
  }
相关推荐
爱笑的眼睛111 天前
深入剖析 HarmonyOS ArkUI 声明式开发:状态管理艺术与最佳实践
华为·harmonyos
安卓开发者1 天前
鸿蒙NEXT交互机制解析:从输入设备到手势响应的全面指南
microsoft·交互·harmonyos
奶糖不太甜。1 天前
鸿蒙分布式数据同步失败全解
分布式·华为·harmonyos·数据同步
小小小小小星2 天前
鸿蒙权限相关问题之应用访问网络、文件等功能时崩溃或无响应,日志提示'权限被拒绝'
harmonyos
leon_teacher2 天前
ArkUI核心功能组件使用
android·java·开发语言·javascript·harmonyos·鸿蒙
lisir92 天前
鸿蒙手势实战解析+手势冲突解决策略总结
harmonyos
安卓开发者2 天前
鸿蒙Next图形绘制指南:从基础几何图形到复杂UI设计
ui·华为·harmonyos
开发小能手嗨啊3 天前
鸿蒙开发进阶(HarmonyOS)
harmonyos·鸿蒙·鸿蒙开发·开发教程·纯血鸿蒙·南向开发·北向开发
大土豆的bug记录3 天前
鸿蒙总改变字体大小设置
华为·harmonyos
我爱学习_zwj3 天前
【鸿蒙面试题-6】LazyForEach 懒加载
华为·harmonyos