如何实现page页面的横竖屏切换

HarmonyOS

pfuchenlu

2024-07-22 12:30:20

浏览

回答 1

待解决

回答 1

按赞同

按时间

jshyb

使用setPreferredOrientation设置横竖屏切换：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(window.Orientation.PORTRAIT).then(() => { 
        console.log('setPreferredOrientation success') 
        this.portrait = !this.portrait 
      }).catch((error: ESObject) => { 
        console.log('setPreferredOrientation failure: ' + JSON.stringify(error)) 
      }) 
    } 
  } 
 
  build() { 
    Column() { 
      Text(this.message) 
        .id('Index19HelloWorld') 
        .fontSize(50) 
        .fontWeight(FontWeight.Bold) 
        .alignRules({ 
          center: { anchor: '__container__', align: VerticalAlign.Center }, 
          middle: { anchor: '__container__', align: HorizontalAlign.Center } 
        }) 
      Button('横竖屏切换') 
        .onClick(() => { 
          this.changeOrientation() 
        }) 
    } 
    .height('100%') 
    .width('100%') 
    .backgroundColor(Color.Green) 
  }}