鸿蒙OS ArkUI 沉浸式导航栏动态获取高度 -- 小白篇_ar

鸿蒙os arkui 沉浸式导航栏动态获取高度 -- 小白篇

下面展示一些 内联代码片。
这是一个沉浸式的样式工具类，这个没什么可说的，copy过去用就可以了

import window from '@ohos.window';

export class immersiveutils {
  public static immersive(windowstage: window.windowstage, config: {
    barcolor: string,
    contentcolor: string,
    navigationcolor: string,
    navigatorcolor: string
  }) {
    windowstage.getmainwindow()
      .then(win => {
        win.setwindowsystembarproperties({
          statusbarcolor: config.barcolor,
          statusbarcontentcolor: config.contentcolor,
          navigationbarcolor: config.navigationcolor,
          navigationbarcontentcolor: config.navigatorcolor
        });
      })
  }
}

下面展示一些 主体代码。
首先在你的entryability或者是你的主入口uiability都可以
在onwindowstagecreate里去实现你的沉浸式导航高度获取和存储

  onwindowstagecreate(windowstage: window.windowstage) {
    // 设置沉浸式代码
    globalthis.windowstage = windowstage;
    // 获取主窗口实例 参考api 9
    windowstage.getmainwindow()
      .then(win => {
        // 设置窗口的布局是否为全屏显示状态
        win.setwindowlayoutfullscreen(true);
        // 获取导航条高度 参考api 9
        // 这个方法为返回的是px像素，需要使用px2vp方法转换一下 参考api 9
        let navheight:number = win.getwindowavoidarea(window.avoidareatype.type_cutout).toprect.height
        // 存储高度信息 参考api 9
        persistentstorage.persistprop('systembarheight', navheight)
      })
  }

这里是在你的.ets ui页面里去实现的

// 引入工具类方法
import {immersiveutils} from '../utils/immersiveutils'
@entry
@component
struct login {
// 获取存储的数据信息
// px2vp 这个方法是.ets后缀文件才有的方法 .ts后缀是没有这个方法的
// 为什么使用这个方法上边的代码块有说明，感兴趣的也可以去查查官方的api文档
  @storagelink('systembarheight') systembarheight: number = 0;
  build() {
    column(){
      text('顶部title')
        .fontsize(18)
        .fontweight(fontweight.bold)
    }.padding({top:px2vp(this.systembarheight)}).height('100%').width('100%')
  }
  //设置你的顶部导航栏样式
  onpageshow(){
    immersiveutils.immersive(globalthis.windowstage, {
      barcolor: "#00286098",
      contentcolor: "#ffffff",
      navigationcolor: "#005d99d6",
      navigatorcolor: "#ffffff"
    });
  }
}