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

已于 2024-07-18 21:45:18 修改
阅读量1.2k 收藏 10
点赞数 20
分类专栏： HarmonyOs 文章标签： harmonyos 华为 鸿蒙
于 2024-06-21 09:17:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sd1sd2/article/details/139843150
版权

系列文章目录

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(页面)

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

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(页面)

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(页面)


@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%'})
  }
}

运行效果：

在这里插入图片描述

三、方法三

1、实现讲解

通过expandSafeArea属性支持组件不改变布局情况下扩展其绘制区域至安全区外

2、代码实现

@Entry
@Component
struct Index {
  build() {
    Stack() {
      Image('https://img0.baidu.com/it/u=356163033,4214949602&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083')
        .height('100%').width('100%').expandSafeArea()
      //页面区域
      Column() {
        Text('沉浸式状态栏').fontColor('#fff')
      }
      .height('100%')
      .width('100%')
      .border({
        width: 1,
        color: 'red'
      })

    }.height('100%')
    .width('100%')

  }
}

运行效果：

在这里插入图片描述

如果只需要头部区域沉浸
在这里插入图片描述
实现代码：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Column() {
        Text('沉浸式状态栏').fontColor('#fff')
      }.height(100).width('100%').backgroundColor('#0A7EE6').expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

    }.height('100%')
    .width('100%')

  }
}

最后补充

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

   window.getLastWindow(getContext(this), (err, windowClass) => {
      if (!err.code) {
        windowClass.setWindowSystemBarProperties({
          statusBarContentColor:"#ffffff"
        })
      }
    })

在这里插入图片描述

pixle0
关注
  • 20
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS NEXT 应用高级认证知识考点
07-11
HarmonyOS NEXT应用高级认证的知识考点近日得到了全面的更新，这次更新不仅增加了题库的难度，更在知识点的覆盖上做到了细致入微。对于那些希望深入了解和掌握HarmonyOS的专业人士来说，这无疑是一次重要的挑战和...
HarmonyOS应用开发者基础认证考试题目及答案
12-17
HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目...
HarmonyOS角落里的知识：“开发应用沉浸式效果”
m0_64422261的博客
06-24 1198
典型应用全屏窗口UI元素包括状态栏
Harmony Next -- 通用标题栏：高度自定义，可设置沉浸式状态，正常状态下为：左侧返回、居中标题，左中右均可自定义视图。
qq_41374940的博客
07-24 1035
一款通用标题栏，支持高度自定义，可设置沉浸式状态，正常状态下为：左侧返回、居中标题，左中右均可自定义视图。
【HarmonyOS NEXT】TabContent架构下实现沉浸式，设置 .expandSafeArea不生效
Mayism123的博客
06-05 369
2、采用组件安全区方案，即不设置窗口全屏，这种场景下，针对底部的页签部分，Navigation组件和Tabs组件默认实现了页签的延伸处理，开发者只需要保证Navigation和Tabs组件的底部边界和底部导航条重合即可。请确认是否设置了窗口全屏，若未设置窗口全屏，采用组件安全区方案，针对底部的页签部分，Tabs组件默认实现了页签的延伸处理。TabContent / 开发应用沉浸式效果 / 设置 .expandSafeArea / 窗口全屏布局 / 组件安全区。1、窗口全屏布局方案。
HarmonyOS 沉浸式状态栏实现
weixin_45966674的博客
01-28 732
我们要操作的是 onWindowStageCreate 当应用窗口创建完成时 触发的生命周期。我们如下图所示 找到这个 EntryAbility.ts。但是 我们真机运行一下 会发现 我们顶部还是空出了一条黑的。那么 如果设计要求将这个地方填满 请问阁下又该如何应对？你预览器上看着确实是没什么问题。它的生命周期 都是应用全局的。这样一个沉浸式状态栏就实现了。比如说 我们代码是这样的。然后 我们再次启动项目。
HarmonyOS App 开发，取消标题栏和状态栏及实现沉浸式状态栏
DJq_007的博客
05-07 732
取消标题栏 "metaData": { "customizeData":[ { "name": "hwc-theme", "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar" } ] }, 取消状态栏 import ohos.agp.window.service.WindowManager; super.getWindow().addFlags(WindowManage
HarmonyOS 鸿蒙手机APP开发 全屏沉浸式封装
weixin_66372126的博客
05-29 662
const xx = await window.getLastWindow(getContext()) // Index页面窗口。const xx = await window.getLastWindow(getContext()) // Index页面窗口。const xx = await window.getLastWindow(getContext()) // Index页面窗口。// 页面窗口怎么获取 => window.getLastWindow()// 利用xx继续获取安全区的高度。
harmonyOS开发技巧（二）——沉浸式以及状态栏高
斗师——Ace
12-09 1605
2. 获取状态栏的高：win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)以及win.on('avoidAreaChange', (data) => {})。1. 设置沉浸式：win.setWindowLayoutFullScreen(true);
鸿蒙设置沉浸式状态栏、全屏、获取导航栏高度
m0_38047544的博客
02-02 3358
鸿蒙设置沉浸式状态栏、全屏、获取导航栏高度
黑马HarmonyOS-NEXT星河版实战-课程网盘链接提取码下载 .txt
06-03
"黑马HarmonyOS-NEXT星河版实战"课程旨在帮助学员深入了解HarmonyOS-NEXT星河版操作系统的开发和实际应用。学员将学习操作系统原理、应用开发技巧和界面设计，通过实战项目提升技能。课程注重实践与理论相结合，为...
HarmonyOS应用开发者基础题库
12-29
1. **DevEco Studio**：它是华为提供的开发HarmonyOS应用的一站式集成开发环境，支持创建、调试和发布HarmonyOS应用。主要功能包括代码编辑、构建管理、模拟器调试等，方便开发者高效开发。 2. **页面配置**：`main...
HarmonyOS NEXT-表单智能自动填充
最新发布
07-25
本示例展示了使用智能填充服务提供场景化的输入建议，实现复杂表单一键填充，帮助用户轻松地完成表单填写。
【鸿蒙开发教程】详解HarmonyOS Next UI开发技巧
HarmonyOS_001的博客
06-17 1432
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。随着鸿蒙的不断发展以及国家的大力支持,未来鸿蒙职位肯定会迎来一个大的爆发,只有积极应对变化，不断学习和提升自己，我们才能在这个变革的时代中立于不败之地。
关于沉浸式状态栏位置顶上去一部分的问题解决
Xiemarc的博客
03-25 2723
项目中我使用 toolsbar  然后 沉浸式状态栏， 刚开始出现问题以为是toolbar设置的高度的问题，但是仔细检查下，是忘了在布局文件的根布局中设置 android:fitsSystemWindows="true" 至此，完美解决这个问题。再出现类似相关问题，会继续在这个博客下更新
【鸿蒙应用ArkTS开发系列】- 沉浸式状态栏实现
枫的专栏
12-25 4571
在应用开发中，页面跟状态栏的默认显示效果一般是如下：但是产品UI设计的时候，一般是会设计一个沉浸式状态的页面效果，如下：那在鸿蒙应用开发中，应该怎么实现这个沉浸式状态栏的效果呢？下面我们来创建一个Demo工程进行讲解。
HarmonyOS ArkTS应用沉浸式状态栏
weixin_43807186的博客
01-05 858
【鸿蒙应用ArkTS开发系列】- 沉浸式状态栏实现
【无标题】
csdndevpress0028的博客
06-09 502
2环境搭建3代码结构解读4登录界面实现沉浸式5创建验证码校验子窗口6验证成功跳转到首页7总结介绍本篇Codelab基于窗口能力，实现验证码登录的场景，主要完成以下功能：登录页面主窗口实现沉浸式。输入用户名和密码后，拉起验证码校验子窗口。验证码校验成功后，主窗口跳转到应用首页。
三段式和二段式一段式状态机verilog实现
05-27
Verilog是一种硬件描述语言，可以用于实现状态机。下面是三段式、二段式和一段式状态机的Verilog实现示例： ## 三段式状态机 ```verilog module Three_State_Machine ( input clk, // 时钟信号 input reset, // 复位信号 input event, // 事件信号 output reg state_out // 输出状态信号 ); // 定义状态枚举类型 typedef enum logic [1:0] { STATE_IDLE, STATE_WAIT_EVENT, STATE_PROCESS_EVENT } state_type; // 定义状态变量和状态转移条件 reg [1:0] state, next_state; always @(*) begin case (state) STATE_IDLE: begin if (event) next_state = STATE_WAIT_EVENT; else next_state = STATE_IDLE; end STATE_WAIT_EVENT: begin next_state = STATE_PROCESS_EVENT; end STATE_PROCESS_EVENT: begin next_state = STATE_IDLE; end default: next_state = STATE_IDLE; endcase end // 状态机状态寄存器 always @(posedge clk, posedge reset) begin if (reset) state <= STATE_IDLE; else state <= next_state; end // 输出状态信号 always @(*) begin case (state) STATE_IDLE: state_out = 1'b0; STATE_WAIT_EVENT: state_out = 1'b1; STATE_PROCESS_EVENT: state_out = 1'b0; default: state_out = 1'b0; endcase end endmodule ``` ## 二段式状态机 ```verilog module Two_State_Machine ( input clk, // 时钟信号 input reset, // 复位信号 input event, // 事件信号 output reg state_out // 输出状态信号 ); // 定义状态枚举类型 typedef enum logic [0:0] { STATE_IDLE, STATE_PROCESS_EVENT } state_type; // 定义状态变量和状态转移条件 reg [0:0] state, next_state; always @(*) begin case (state) STATE_IDLE: begin if (event) next_state = STATE_PROCESS_EVENT; else next_state = STATE_IDLE; end STATE_PROCESS_EVENT: begin next_state = STATE_IDLE; end default: next_state = STATE_IDLE; endcase end // 状态机状态寄存器 always @(posedge clk, posedge reset) begin if (reset) state <= STATE_IDLE; else state <= next_state; end // 输出状态信号 always @(*) begin case (state) STATE_IDLE: state_out = 1'b0; STATE_PROCESS_EVENT: state_out = 1'b1; default: state_out = 1'b0; endcase end endmodule ``` ## 一段式状态机 ```verilog module One_State_Machine ( input clk, // 时钟信号 input reset, // 复位信号 input event, // 事件信号 output reg state_out // 输出状态信号 ); // 定义状态枚举类型 typedef enum logic [0:0] { STATE_IDLE } state_type; // 定义状态变量和状态转移条件 reg [0:0] state, next_state; always @(*) begin next_state = STATE_IDLE; end // 状态机状态寄存器 always @(posedge clk, posedge reset) begin if (reset) state <= STATE_IDLE; else state <= next_state; end // 输出状态信号 always @(*) begin case (state) STATE_IDLE: state_out = 1'b0; default: state_out = 1'b0; endcase end endmodule ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值