HarmonyOS Next 系列之沉浸式状态实现的多种方式(七)

系列文章目录

HarmonyOS Next 系列之省市区弹窗选择器实现(一)
HarmonyOS Next 系列之验证码输入组件实现(二)
HarmonyOS Next 系列之底部标签栏TabBar实现(三)
HarmonyOS Next 系列之HTTP请求封装和Token持久化存储(四)
HarmonyOS Next 系列之从手机选择图片或拍照上传功能实现(五)
HarmonyOS Next 系列之可移动悬浮按钮实现(六)
HarmonyOS Next 系列之沉浸式状态实现的多种方式(七)


前言

HarmonyOS Next(基于API11)沉浸式状态实现的多种方式


一、方法一

1、实现讲解

(1)首先设置setWindowLayoutFullScreen(true)(设置全屏布局)。

布局将从屏幕最顶部开始到最底部结束,此时状态栏和底部规避区域还在,且与页面重叠,所以还需要设置页面根容器顶部内边距为状态栏高度,底部内边距为规避区域高度,这样页面就不会重叠。

(2)页面隐藏(或销毁)周期函数内恢复非全屏布局设置setWindowLayoutFullScreen(false)

全屏布局设置是全局生效的,一旦设置跳转到其他页面同样生效,对于其他页面不需要沉浸式状态栏需要恢复原样。

ps:全屏布局非全屏显示,区别在于状态栏、规避区域还在,页面布局从屏幕最顶端开始

2、代码实现

Index.ets(页面)

javascript 复制代码
import { window } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  @State statusHeight: number = 0 //状态栏高度
  @State bottomAvoidAreaHeight: number = 0 //手机底部规避区域高度
  @State windowClass: window.Window | null = null //窗口管理器

  aboutToAppear() {
    this.init()
  }

  onPageShow(): void {
  //设置全屏布局
    this.windowClass?.setWindowLayoutFullScreen(true)
  }

  onPageHide(): void {
     //取消全屏布局
      this.windowClass?.setWindowLayoutFullScreen(false)
  }

  //初始化
  init() {
    window.getLastWindow(getContext(this), (err, windowClass) => {
      if (!err.code) {
         //保存窗口管理器
        this.windowClass = windowClass
        //获取状态栏高度
        this.statusHeight = px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height)
        //获取手机底部规避区域高度
        this.bottomAvoidAreaHeight = px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
          .bottomRect
          .height)
        windowClass.setWindowLayoutFullScreen(true)

      }
    })
  }

  build() {
    Column() {
      //页面区域
      Column() {
        Text('沉浸式状态栏').fontColor('#fff')
      }
      .height('100%')
      .width('100%')
      .border({
        width: 1,
        color: 'red'
      })
    }
    .height('100%')
    .width('100%')
    .backgroundImage(`https://img1.baidu.com/it/u=3138942692,3007703896&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500`)
    .backgroundImageSize({ height: '100%', width: '100%' })
    .padding({ top: this.statusHeight, bottom: this.bottomAvoidAreaHeight })
  }
}

运行效果:

ps:为了肉眼好区分,给页面区域加了红色边框

3、全局缓存窗口管理器

当项目内多个页面需要设置全屏布局时,每个页面要重新获取窗口管理器、状态栏高度、底部规避区域高度就比较麻烦,可以在entryabili内获取到上述属性值(对象)并存储在全局对象globalThis上

EntryAbility.ets

javascript 复制代码
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {

  }


  onWindowStageCreate(windowStage: window.WindowStage): void {

    //添加如下代码
    windowStage.getMainWindow((err, data) => {
      if (!err.code) {
        //全局变量添加窗口对象
        globalThis.windowClass = data;
        //全局变量添加状态栏高度单位vp
        globalThis.statusHeight = px2vp(data.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height)
        //全局添加底部规避区域高度单位vp
        globalThis.bottomAvoidAreaHeight = px2vp(data.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
          .bottomRect
          .height)
      }
    })
    //
    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        return;
      }
    });
  }


}

Index.ets(页面)

javascript 复制代码
import { window } from '@kit.ArkUI'

@Entry
@Component
struct Index {


  onPageShow(): void {
  //设置全屏布局
    globalThis.windowClass.setWindowLayoutFullScreen(true)
  }

  onPageHide(): void {
    //取消全屏布局
      globalThis.windowClass.setWindowLayoutFullScreen(false)
  }


  build() {
    Column() {
      //页面区域
      Column() {
        Text('沉浸式状态栏').fontColor('#fff')
      }
      .height('100%')
      .width('100%')
      .border({
        width: 1,
        color: 'red'
      })
    }
    .height('100%')
    .width('100%')
    .backgroundImage(`https://img1.baidu.com/it/u=3138942692,3007703896&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500`)
    .backgroundImageSize({ height: '100%', width: '100%' })
    .padding({ top: globalThis.statusHeight, bottom: globalThis.bottomAvoidAreaHeight })
  }
}

二、方法二

1、实现讲解

通过NavDestination作为页面根容器,并隐藏标题栏即可快速实现沉浸式状态,NavDestination从api 11开始默认支持安全区避让特性,所以关于页面重叠问题就不需要解决

2、代码实现

Index.ets(页面)

javascript 复制代码
@Entry
@Component
struct Index{
  build() {
    NavDestination(){
      //页面区域
      Column(){
        Text('沉浸式状态栏').fontColor('#fff')
      }.width('100%')
      .height('100%')
      .border({
        width:1,
        color:'red'
      })
    }
     .hideTitleBar(true)
    .backgroundImage(`https://img0.baidu.com/it/u=2299333132,3832906774&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500`)
    .backgroundImageSize({height:'100%',width:'100%'})
  }
}

运行效果:


最后补充

如果想修改状态栏文字颜色可通过:setWindowSystemBarProperties实现

javascript 复制代码
   window.getLastWindow(getContext(this), (err, windowClass) => {
      if (!err.code) {
        windowClass.setWindowSystemBarProperties({
          statusBarContentColor:"#ffffff"
        })
      }
    })
相关推荐
问道飞鱼4 分钟前
【移动端知识】移动端多 WebView 互访方案:Android、iOS 与鸿蒙实现
android·ios·harmonyos·多webview互访
周胡杰1 小时前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
脑子缺根弦2 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
迷曳11 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
呆呆的小鳄鱼15 小时前
牛客:HJ24 合唱队[华为机考][最长递增子集][动态规划]
算法·华为·动态规划
迷曳16 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
NoirSeeker16 小时前
在windows平台上基于OpenHarmony sdk编译三方库并暴露给ArkTS使用(详细)
c++·windows·arkts·鸿蒙·交叉编译
DC_BLOG17 小时前
OSPFv3中LSA参数
运维·服务器·华为·智能路由器·huawei
平谷一勺1 天前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
博睿谷IT99_1 天前
入门华为人工智能,HCIA/HCIP/HCIE该怎么选?
人工智能·华为·华为认证