首页 > 其他分享 >HarmonyOS解决顶部和底部沉浸式白边

HarmonyOS解决顶部和底部沉浸式白边

时间:2024-12-30 17:42:35浏览次数:1  
标签:沉浸 topRectHeight windowStage bottomRectHeight 白边 HarmonyOS window let data

全面屏时代的手机顶部都是状态栏,底部则是全面屏手势滑动起始区域

关于这上下两边都一般默认设置的白边,对于一些有颜色主题的页面来说就会略显生硬

以下代码可以解决顶部底部的白边问题,并且自适应padding收缩

onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err) => {
      // windowStage.getMainWindowSync().setWindowBackgroundColor('#ff0000')
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      
      // 以下是设置沉浸式,以及获取设备导航条、状态栏高度的代码
      windowStage.getMainWindow().then(w => {
        // 设置沉浸式 
        w.setWindowLayoutFullScreen(true)
        // 获取设备区域参数
        let avoidArea = w.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
        let bottomRectHeight = avoidArea.bottomRect.height; // 获取到导航条区域的高度
        AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight); // 存到本地存储
        let topRectHeight = avoidArea.topRect.height; // 获取状态栏区域高度
        AppStorage.setOrCreate('topRectHeight', topRectHeight); // 存到本地存储

        // 当区域发生改变(例如竖屏变横屏),重新获取一次再保存
        w.on('avoidAreaChange', (data) => {
          if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {
            let topRectHeight = data.area.topRect.height;
            AppStorage.setOrCreate('topRectHeight', topRectHeight);
          } else if (data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
            let bottomRectHeight = data.area.bottomRect.height;
            AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);
          }
        });
      })
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }

 

标签:沉浸,topRectHeight,windowStage,bottomRectHeight,白边,HarmonyOS,window,let,data
From: https://www.cnblogs.com/mlw1814011067/p/18641827

相关文章

  • 《HarmonyOS第一课》焕新升级,赋能开发者快速掌握鸿蒙应用开发
    随着HarmonyOSNEXT发布,鸿蒙生态日益壮大,广大开发者对于系统化学习平台和课程的需求愈发强烈。近日,华为精心打造的《HarmonyOS第一课》全新上线,集“学、练、考”于一体,凭借多维融合的教学模式与系统课程设置,助力开发者快速掌握HarmonyOS应用开发技能。四大课程模块:搭建HarmonyOS......
  • 高质量 HarmonyOS 权限管控流程
    高质量HarmonyOS权限管控流程在HarmonyOS应用开发过程中,往往会涉及到敏感数据和硬件资源的调动和访问,而这部分的调用就会涉及到管控这部分的知识和内容了。我们需要对它有所了解,才可以在应用开发中提高效率和避免踩坑。权限管控了什么权限管控,主要是管控数据和功能。数......
  • HarmonyOS 5.0 Next实战应用开发—‘我的家乡’【HarmonyOS Next华为公司完全自研的操
    HarmonyOS5.0NextHarmonyOSNEXT是鸿蒙抛弃Linux内核及安卓开放源代码项目(AOSP)等代码的首个大版本,该系统仅支持鸿蒙内核和鸿蒙系统的应用,不再兼容安卓应用。引入了“和谐美学”设计理念,通过先进的物理渲染引擎,细腻地还原了真实世界的光影色彩与时空力感,为用户呈现更加沉浸、多......
  • 基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
    HarmonyOSNEXT百川奔腾入海,千帆共进有为,鸿蒙与你共未来!鸿蒙生态千帆起HarmonyOSNEXT!全新HarmonyOSNEXT开发者预览版将在今年第一季度面向所有开发者开放。华为宣布将于2024年1月18日举行“鸿蒙生态千帆启航仪式”,揭秘鸿蒙生态和HarmonyOSNEXT进阶新篇章。2023年......
  • #端云一体化开发# #HarmonyOS Next#《说书人》鸿蒙原生基于角色的对话式文本编辑开发
    1、写在前面过去的一百年里,在“编程”的这个行业诞生之初,人们采用面向过程的方式进行开发,但是,伴随着程序规模的日益增大,程序的复杂度也随之增加,使用结构化编程方法来管理复杂的程序逻辑变得越来越困难。因此,开发者们引入了“面向对象”的概念,采用将数据和操作封装在“对象”中......
  • 二维、三维组件融合 720三维全景沉浸式实景体验
    本系统通过数字孪生技术,实现小区楼盘系统的可视化展示,整合楼盘内各个系统的数据源,将楼盘模型与房间模型、720三维全景图相结合,实现了从楼盘周边到室内布局的全方位展示,为购房者提供全方位的可视化信息。整个项目分为四个功能模块,分别为楼盘概览、楼盘规划、归家动线和户型鉴赏......
  • HarmonyOS NEXT开发实战:打造高效上拉刷新与下拉加载组件(一)空页面的设计与实现
    本文正在参加华为鸿蒙有奖征文征文活动前言:在鸿蒙开发的世界中,用户体验至关重要。我在网络上搜寻了一番,发现现有的上拉刷新和下拉加载组件要么功能不全,要么不够优雅。因此,我决定自己动手,打造一套既美观又实用的组件。本系列文章将深入解析如何使用鸿蒙系统组件封装出优秀的上拉......
  • HarmonyOS NEXT开发实战:实现高效下拉刷新与上拉加载组件(二)刷新核心逻辑与空页面集成
    前言:在上一篇文章中,我们深入探讨了如何在HarmonyOS中实现一个功能完备的空页面组件。现在,我们将进入下拉刷新和上拉加载功能的核心逻辑实现。这不仅仅是技术实现,更是对用户体验的深刻理解。本文将详细介绍如何将空页面与下拉刷新、上拉加载逻辑相结合,打造一个既高效又用户友好的......
  • HarmonyOs DevEco studio小技巧39--LazyForEach:性能优化与懒加载
    在鸿蒙系统的应用开发中,LazyForEach是一个极为重要的工具,它在处理列表数据展示等场景时展现出独特的性能优化和懒加载特性,为应用开发带来诸多显著优势。一、LazyForEach在鸿蒙中的优势(一)高效的内存管理在处理大量数据时,传统的组件渲染方式可能会一次性创建所有数据对应的......
  • 华为鸿蒙HarmonyOS Next基础开发教程
    华为鸿蒙HarmonyOSNext基础开发教程1.开发环境准备安装DevEcoStudioDevEcoStudio是华为为HarmonyOS应用开发提供的集成开发环境(IDE)。您可以从华为的官方网站下载并安装DevEcoStudio。配置开发环境确保您的计算机上安装了以下软件:JDK:Java开发工具包,用于支持Java语言开......