首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >纯血鸿蒙APP实战开发——适配挖孔屏案例

纯血鸿蒙APP实战开发——适配挖孔屏案例

原创
作者头像
小帅聊鸿蒙
发布2025-01-03 16:27:52
发布2025-01-03 16:27:52
1710
举报
文章被收录于专栏:鸿蒙开发笔记鸿蒙开发笔记

介绍

本示例介绍使用屏幕属性 getDefaultDisplaySync、getCutoutInfo 接口实现适配挖孔屏。该场景多用于沉浸式场景下。

效果图预览

使用说明

  1. 加载完成后顶部状态栏时间和电量显示位置规避了不可用区域。

实现思路

  1. 通过setWindowLayoutFullScreen、setWindowSystemBarEnable将窗口设置为全屏,并且隐藏顶部状态栏。
代码语言:ts
复制
// 获取窗口实例
window.getLastWindow(this.context, (err, data) => {
  if (err) {
    logger.error('DiggingHoleScreen', 'getLastWindow failed. error is:', JSON.stringify(err));
    return;
  }
  // 设置窗口为全屏显示状态
  data.setWindowLayoutFullScreen(true);
  // 设置顶部状态栏为隐藏状态
  data.setWindowSystemBarEnable(['navigation']);
  });
  1. 通过getDefaultDisplaySync、getCutoutInfo获取窗口display对象和不可用区域的边界、宽高。
代码语言:ts
复制
this.displayClass = display.getDefaultDisplaySync();
this.displayClass.getCutoutInfo((err, data) => {
  if (err) {
    logger.error('DiggingHoleScreen', 'getCutoutInfo failed. error is:', JSON.stringify(err));
    return;
  }
  this.boundingRect = data.boundingRects;
  this.topTextMargin = this.getBoundingRectPosition();
  });
DD一下:鸿蒙开发各类文档,可关注公Z号<程序猿百晓生>霍取。
代码语言:erlang
复制
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题(含参考答案) 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......
  1. 使用获取到的信息进行计算偏移量实现对不可用区域的适配。
代码语言:ts
复制
getBoundingRectPosition(): TextMargin {
  if (this.boundingRect !== null && this.displayClass !== null && this.boundingRect[0] !== undefined) {
    // 不可用区域右侧到屏幕右边界的距离:屏幕宽度减去左侧宽度和不可用区域宽度
    let boundingRectRight: number = this.displayClass.width - (this.boundingRect[0].left + this.boundingRect[0].width);
    // 不可用区域左侧到屏幕左边界的距离:getCutoutInfo接口可以直接获取
    let boundingRectLeft: number = this.boundingRect[0].left;
    // 部分设备不可用区域在中间时存在左右距离会有10像素以内的差距,获取到的左右距离差值绝对值小于10都按照不可用区域位于中间处理
    if (Math.abs(boundingRectLeft - boundingRectRight) <= 10) {
      return { left: 0, right: 0 };
    }
    if (boundingRectLeft > boundingRectRight) {
      // 不可用区域在右边
      return { left: 0, right: this.displayClass.width - boundingRectLeft };
    } else if (boundingRectLeft < boundingRectRight) {
      // 不可用区域在左边
      return { left: this.boundingRect[0].left + this.boundingRect[0].width, right: 0 };
    }
  }
  return { left: 0, right: 0 };
}
高性能知识点

不涉及

工程结构&模块类型

代码语言:shell
复制
   functionalscenes                                // har类型(默认使用har类型,如果使用hsp类型请说明原因)
   |---mainpage
   |   |---DigginHoleScreen.ets                    // 挖孔屏适配页面

写在最后

如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:

  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力;
  • 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识;
  • 想要获取更多完整鸿蒙最新学习知识点,可关注B站:码牛课堂;

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 介绍
  • 效果图预览
  • 实现思路
    • DD一下:鸿蒙开发各类文档,可关注公Z号<程序猿百晓生>霍取。
    • 高性能知识点
  • 工程结构&模块类型
  • 写在最后
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档