当前位置： 首页 > news >正文

鸿蒙5.0实战案例：基于原生能力的横竖屏旋转适配

news 来源：原创 2025/5/15 22:24:05

往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）

✏️ 鸿蒙（HarmonyOS）北向开发知识点记录~

✏️ 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~

✏️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

✏️ 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

✏️ 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

✏️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

✏️ 记录一场鸿蒙开发岗位面试经历~

✏️ 持续更新中……

场景描述

目前很多应用和场景需要用到横竖屏旋转，下面列举一些目前遇到的高频问题：

  • 场景一：我们如何通过传感器自己感知方向，自己设置旋转；(使用sensor感知设备是不关心设备是否启用系统自带的旋转锁定)
  • 场景二：在一个应用内，不同的页面有不同的旋转策略；如：首页仅竖屏，详情页面允许横竖屏切换；

概念说明：

本文的旋转策略是：旋转策略是指当前页面支持的设备旋转方向。

页面方向是：页面方向是手机的页面当前的显示方向。

场景一：

我们如何通过传感器自己感知方向，自己设置旋转；(使用sensor感知设备是不关心设备是否启用系统自带的旋转锁定)

效果图：

关键步骤：

第一步：感知方向；使用sensor感知设备的真实朝向。

// 1 原始数据（3维度）
sensor.on(sensor.SensorId.GRAVITY, (data: sensor.GravityResponse) => {
let degree: number = -1;
let rotation: string = 'INVALID';
// 2 将三维的角度变二维
degree = CalDegree(data.x, data.y, data.z)
// 3 将角度转化到方向
if (degree >= 0 && (degree <= 30 || degree >= 330)) {
rotation = "ROTATION_0";
} else if (degree >= 60 && degree <= 120) { // Use ROTATION_90 when degree range is [60, 120]
rotation = "ROTATION_90";
} else if (degree >= 150 && degree <= 210) { // Use ROTATION_180 when degree range is [150, 210]
rotation = "ROTATION_180";
} else if (degree >= 240 && degree <= 300) { // Use ROTATION_270 when degree range is [240, 300]
rotation = "ROTATION_270";
}

第二步：设置旋转；

相关接口：setPreferredOrientation;设置窗口的显示方向属性

indow(getContext(this)).then((data) => {
          data.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED)
        })

设置方向：

相关接口：

调用窗口的Orientation设置方向即可，具体的设置窗口的显示方向，属性设置参考下表；

UNSPECIFIED表示未定义方向模式，由系统判定。
PORTRAIT表示竖屏显示模式。
LANDSCAPE表示横屏显示模式。
PORTRAIT_INVERTED表示反向竖屏显示模式。
LANDSCAPE_INVERTED表示反向横屏显示模式。

场景二：

竖屏，允许横竖屏，仅竖屏，仅横屏；首页竖屏，进去就横屏。支持切换竖屏；给最外层组件设置旋转；

在一个应用内，不同的页面有不同的旋转策略；如，首页仅竖屏，详情页面允许横竖屏切换；

从横屏跳竖屏；两个页面不同的跳转；

效果图：

关键步骤：

第一步：在应用统一的位置注册无感监听；

第二步：建立页面与旋转方向的映射表；

第三步：结合全局埋点的能力，实现不同页面的旋转适配

说明：该映射表开发者可以根据实际的诉求使用从本地配置文件更新或者直接使用全局状态变量实现动态修改。

let pageOrientations: Record<string, window.Orientation> = {
  "Logon": window.Orientation.PORTRAIT,
  "Detail": window.Orientation.LANDSCAPE,
  "Page2": window.Orientation.PORTRAIT_INVERTED,
  "Page3": window.Orientation.LANDSCAPE_INVERTED,
}

第三步：根据映射表在无感监听的回调里控制旋转策略；

//判断是否为空 mainWindow
if (!windowName || windowName == 'mainWindow') {
  windowName = 'mainWindow'
}
let name = windowName as string
windows[name] = curWindow;

let myObserve = curWindow.getUIContext().getUIObserver();
mypagestack[name] = new Stack<pageTracking>();

// mypagestack.push <windowName, Stack<pageTracking>>
//监听navDestination组件生命周期变化
myObserve.on('navDestinationUpdate', (info) => {
  //映射成mypage
  let mypage = new MyPage
  mypage.id = info.navDestinationId
  mypage.name = info.name
  mypage.path = info.param?.toString()
  mypage.type = 'NavDestination'
  mypage.lifeCricle = info.state
  //
  tracking(mypage, name)

})
//监听page生命周期变化
myObserve.on('routerPageUpdate', (info) => {... })
}

//使用mypage埋点  存生命周期信息
function tracking(mypage: MyPage, windowname: string) {
  let stack: Stack<pageTracking> = mypagestack[windowname]
  // 1.存页面信息(abouttoappear)，同时打印当前所有路径 打印当前栈的顺序
  // 如果当前栈元素为一个且当前元素为navd页面，仅修改对应页面的类型
  // 不入栈 ，而是将对应的栈顶元素的page类型改为navPage
  if (mypage.lifeCricle == 2) {...}
  // 2.更新页面信息 ：onshown(刷新开始时间)
  else if (mypage.lifeCricle == 0) {
    // 改变方向：
    windows[windowname].setPreferredOrientation(pageOrientations[mypage.name as string])
  }
  // 3.更新页面信息 ：onhidden(累计值 刷新停留时间)
  else if (mypage.lifeCricle == 1) {...}

  // 4.输出页面信息 abouttodistoappear 删除页面信息
  else if (mypage.lifeCricle == 3) {...}

}

场景三：

某些页面会存在设置临时方向，如视频竖屏转横屏；视屏播放临时方向的设置

接口：USER_ROTATION_LANDSCAPE；表示临时横屏后受开关控制和系统判定的自动旋转模式。

window.getLastWindow(getContext(this), (err, win) => {
  win.setPreferredOrientation(window.Orientation.USER_ROTATION_LANDSCAPE)
})

视频播放的过程中，用户可能在竖屏状态下，通过点击最大化按钮将视频变为横屏播放。该场景下要求手机的整体策略不变。

接口：USER_ROTATION_LANDSCAPE；表示临时横屏后受开关控制和系统判定的自动旋转模式。

window.getLastWindow(getContext(this), (err, win) => {
  win.setPreferredOrientation(window.Orientation.USER_ROTATION_LANDSCAPE)
})

视频播放的过程中，用户可能在竖屏状态下，通过点击最大化按钮将视频变为横屏播放。该场景下要求手机的整体策略不变。

其他常见问题：

Q1：如何感知系统的自动旋转开关：如果是开的，app页面内适配？

A：监听方法sensor模块 、seting info（单独get）

//1.传感器的监听方法sensor模块 (对应的回调一直触发，建议仅在需要的页面开启)
// 1 原始数据（3维度）
sensor.on(sensor.SensorId.GRAVITY, (data: sensor.GravityResponse) => {
  let degree: number = -1;
  let rotation: string = 'INVALID';
  // 2 3wei bian erwei
  degree = CalDegree(data.x, data.y, data.z)
  // 3 角度=》方向
  if (degree >= 0 && (degree <= 30 || degree >= 330)) {
    rotation = "ROTATION_0";
  } else if (degree >= 60 && degree <= 120) { // Use ROTATION_90 when degree range is [60, 120]
    rotation = "ROTATION_90";
  } else if (degree >= 150 && degree <= 210) { // Use ROTATION_180 when degree range is [150, 210]
    rotation = "ROTATION_180";
  } else if (degree >= 240 && degree <= 300) { // Use ROTATION_270 when degree range is [240, 300]
    rotation = "ROTATION_270";
  }
  // 4 设置方向
  // setxxxx
  console.log("QH- sensor.on" + rotation)
});
2.setings 模块只能获取不能监听
// 获取 控制中心的 自动旋转开关：值为1，表示启用；值为0，表示不启用。
settings.getValueSync(getContext(), settings.general.ACCELEROMETER_ROTATION_STATUS, '-1')

// 自动旋转关闭时，获取当前设备的方向：值为0，表示屏幕旋转0度；值为1，表示屏幕旋转90度；值为2，表示屏幕旋转180度；值为3，表示屏幕旋转270度
orientation = settings.getValueSync(getContext(), settings.display.DEFAULT_SCREEN_ROTATION, '-1')
console.log("QH- settings.getValueSync" + orientation)

相关文章：

  • 【安装及调试旧版Chrome + 多版本环境测试全攻略】
  • 学习路程四 向量数据库Milvus安装与连接
  • 【Vue.js 和 React.js 的主要区别是什么？】
  • 官方文档学习TArray容器
  • Nginx代理ElasticSearch
  • 【聊天室后端服务器开发】功能设计-框架与微服务
  • Linux编辑器
  • 如何让传统制造企业从0到1实现数字化突破？
  • PHP 使用 Redis
  • Websock Demo（一）前端代码
  • 四步彻底卸载IDEA！！！
  • 小白爬虫——selenium入门超详细教程
  • 实验3 知识表示与推理
  • LabVIEW电能质量分析软件
  • 【学习笔记】Google的Lyra项目：基于神经网络的超低比特率语音编解码技术
  • MFC笔记：本专栏课件
  • 详解Tomcat下载安装以及IDEA配置Tomcat（2023最新）
  • 【NLP 24、实践 ⑤ 计算Bert模型中的参数数量】
  • stack,queue,priority_queue学习知识点
  • 《深度剖析Linux 系统 Shell 核心用法与原理_666》
  • 夜读丨母亲为燕子打开家门
  • 秘鲁总理辞职
  • 杭州钱塘区3宗涉宅用地均以底价成交，共计成交金额25.73亿元
  • 观察｜“双雄”格局下电池制造商如何生存：加码不同技术、抢滩新赛道
  • SIFF动画单元公布首批片单：《燃比娃》《凡尔赛玫瑰》等
  • 这一次，又被南昌“秀”到了