【鸿蒙开发实战 Beta5.0】基于原生能力的横竖屏旋转适配

最新推荐文章于 2025-03-24 10:38:26 发布

太空人_喜之郎

最新推荐文章于 2025-03-24 10:38:26 发布

阅读量840

点赞数 12

CC 4.0 BY-SA版权

分类专栏： OpenHarmony HarmonyOS 鸿蒙文章标签： harmonyos 华为前端鸿蒙移动开发鸿蒙开发 OpenHarmony

本文链接：https://blog.csdn.net/2401_84917132/article/details/141649583

概念说明：

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

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

场景一：

我们如何通过传感器自己感知方向，自己设置旋转；(使用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)
        })复制

设置方向：