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

news2025/1/8 5:11:01

【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) // 去注册回调