鸿蒙开发中如何实现page页面的横竖屏切换？

Question

鸿蒙开发中如何实现page页面的横竖屏切换？

Answer 1

方法一：使用 setPreferredOrientation 设置横竖屏切换。参考代码如下：

import { window } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  private portrait: boolean = true

  changeOrientation = () => {
    // 获取当前页面
    let context = getContext(this)
    window.getLastWindow(context).then((mainWindow) => {
      this.changeOrientationInternal(mainWindow)
    }).catch((error: ESObject) => {
      console.log('getMainWindow error: ' JSON.stringify(error))
    })
  }

  changeOrientationInternal(lastWindow: window.Window) {
    if (this.portrait) {
      // 切换成横屏
      lastWindow.setPreferredOrientation(window.Orientation.LANDSCAPE).then(() => {
        console.log('setPreferredOrientation success')
        this.portrait =!this.portrait
      }).catch((error: ESObject) => {
        console.log('setPreferredOrientation failure' + JSON.stringify(error))
      })
    } else {
      // 切换成竖屏
      lastWindow.
    }
  }
}

方法二：设置方法：setPreferredOrientation(orientation: Orientation, callback: AsyncCallback<void>): void，Orientation 取值为 AUTO_ROTATION，表示传感器自动旋转模式。参考代码如下：

let orientation = window.Orientation.AUTO_ROTATION;  
try{  
 windowClass.setPreferredOrientation(orientation, (err) => {  
 if(err.code){  
 console.error('Failed to set window orientation. Cause: ' JSON.stringify(err));  
 return;  
 }  
 console.info('Succeeded in setting window orientation.');  
 });  
}catch (exception) {  
 console.error('Failed to set window orientation. Cause: ' JSON.stringify(exception));  
}

方法三：如果想要开发的 app 具备横竖屏切换能力，可以在 module.json5 中设置"orientation"属性值为"auto_rotation"，应用即具备横竖屏切换能力。若需要横竖屏切换受系统控制（打开自动旋转生效，关闭失效），可以赋值为"auto_rotation_restricted"，示例代码：

"abilities": [  
 {  
 //...  
 "orientation": "auto_rotation"  
 }  
]