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

【HarmonyOS】鸿蒙应用如何进行页面横竖屏切换以及注意事项，自动切换横竖屏，监听横竖屏

news 2025/7/13 23:32:00

【HarmonyOS】鸿蒙应用如何进行页面横竖屏切换以及注意事项，自动切换横竖屏，监听横竖屏

一、鸿蒙应用如何进行页面横竖屏调用API手动切换

1.首先要在EntryAbility 中获取主窗口对象
EntryAbility.ets

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';export default class EntryAbility extends UIAbility {onWindowStageCreate(windowStage: window.WindowStage): void {// 挂载globalThis上，可以当全局对象使用。当然此处实现方式因人而异，你可以放在单例里，或者localstore中等等globalThis.windowClass = windowStage.getMainWindowSync();windowStage.loadContent('pages/RotationTestPage', (err) => {if (err.code) {return;}});}
}

之后在需要调用横竖屏切换的页面或者逻辑中调用，我这里用按钮触发举例：
RotationTestPage.ets

import { BusinessError } from '@kit.BasicServicesKit';
import { window } from '@kit.ArkUI';@Entry
@Component
struct RotationTestPage {private TAG: string = "RotationTestPage";onClickRotation = ()=>{// 设置横竖屏状态let orientation = window.Orientation.LANDSCAPE;try{globalThis.windowClass.setPreferredOrientation(orientation, (err: BusinessError) => {if(err.code){console.error(this.TAG, 'Failed to set window orientation. Cause: ' + JSON.stringify(err));return;}console.info(this.TAG,'Succeeded in setting window orientation.');});}catch (exception) {console.error(this.TAG,'Failed to set window orientation. Cause: ' + JSON.stringify(exception));}}build() {RelativeContainer() {Text("点击切换为横屏").id('RotationTestPageHelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }}).onClick(this.onClickRotation)}.height('100%').width('100%')}
}

window.Orientation具体数值，参见以下网址

注意：
设置主窗口的显示方向属性。仅在支持跟随sensor旋转的设备上生效，子窗口调用后不生效。

二、如何实现应用的屏幕自动旋转

在module.json5添加属性"orientation": “auto_rotation”。

"abilities": [ { "name": "EntryAbility", "srcEntry": "./ets/entryability/EntryAbility.ets", "description": "$string:EntryAbility_desc", "icon": "$media:icon", "label": "$string:EntryAbility_label", "startWindowIcon": "$media:startIcon", "startWindowBackground": "$color:start_window_background", "exported": true, "skills": [ { "entities": [ "entity.system.home" ], "actions": [ "action.system.home" ] } ], "orientation": "auto_rotation", // 随传感器旋转 } 
]

注意：
auto_rotation随传感器旋转需要在系统下滑菜单中，放开自动锁定状态才可生效。

三、如何监听屏幕旋转

使用媒体查询接口监听屏幕旋转

import { mediaquery } from '@kit.ArkUI'; 
let listener = mediaquery.matchMediaSync('(orientation: landscape)'); // 监听横屏事件 
function onPortrait(mediaQueryResult: mediaquery.MediaQueryResult) { if (mediaQueryResult.matches) { // do something here } else { // do something here } 
} 
listener.on('change', onPortrait) // 注册回调 
listener.off('change', onPortrait) // 去注册回调