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

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

HarmonyOS
2024-07-22 12:30:20
浏览
收藏 0
回答 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) 
  }}
分享
微博
QQ
微信
回复
2024-07-22 20:13:20
相关问题
页面横竖如何进行切换
364浏览 • 1回复 待解决
如何进行页面横竖切换
1908浏览 • 1回复 待解决
求大佬告知如何切换横竖
1971浏览 • 1回复 待解决
如何监听设备横竖切换状态呢
1614浏览 • 1回复 待解决
如何监听手机屏幕的横竖切换
354浏览 • 1回复 待解决
鸿蒙JS 框架中如何主动切换横竖?
4731浏览 • 1回复 待解决
如何横竖切换更自然一些
512浏览 • 1回复 待解决
鸿蒙横竖切换监听,需要这个功能
11275浏览 • 3回复 已解决
Open Harmony 3.1版本支持横竖切换吗?
5001浏览 • 1回复 待解决
如何实现page面的预渲染?
204浏览 • 1回复 待解决
page页面如何设置为横显示
1607浏览 • 1回复 待解决
OpenHarmony 小型系统如何设置横竖
7855浏览 • 1回复 待解决
HarmonyOS 如何实现页面?
177浏览 • 1回复 待解决