HarmonyOS 横屏状态下获取组件的宽高

前一个页面是竖屏, 下一个页面是横屏, 设置横屏使用的方式是：

aboutToAppear() {  
   window.getLastWindow(context, (err: BusinessError, win)=>{  
    try {  
      //设置全屏  
      win.setWindowLayoutFullScreen(true)  
      //设置横屏  
      win.setPreferredOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE)  
      //不显示导航栏、状态栏  
      win.setWindowSystemBarEnable([])  
    } catch {  
      trackD('requestFullScreen fail')  
    }  
  });  
}

获取组件尺寸的方式是:

.onAreaChange((oldValue: Area, newValue: Area) => {  
      this.videoWidth = new Number(newValue.width).valueOf()  
      this.videoHeight = new Number(newValue.height).valueOf()  
      this.adjustChatInit()  
    })

现在有两个问题:

1.设置横屏的方式目前采用的aboutToAppear中设置, 有点滞后, 页面级别横屏，有没有其他方式。

2.竖屏到横屏onAreaChange会走两次，第一次还是竖屏的尺寸。

HarmonyOS

Heiang

2024-10-21 10:37:48

浏览

回答 1

待解决

回答 1

按赞同

按时间

put_get

1. 您可以使用onPageShow、onPageHide来设置页面级别的横屏

onPageShow(): void {  
  // window.getLastWindow(getContext(this), (err, win) => {  
  //   win.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED)  
  // })  
}  
  
onPageHide(): void {  
  window.getLastWindow(getContext(this), (err, win) => {  
  win.setPreferredOrientation(window.Orientation.PORTRAIT)  
})

或者您在上一个界面跳转第二个界面的时候调用横屏，demo以下。

Button('界面跳转')  
  .onClick(()=>{  
    window.getLastWindow(getContext(this), (err, win) => {  
      win.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED)  
    })  
  
    router.pushUrl({  
      url:"pages/Index2"  
    })  
  })

2.onAreaChange 会在组件创建和布局变化时触发，从竖屏到横屏组件先创建后横屏改变布局，所以触发了两次。你可以在内部做一个判断。看看哪个时创建时触发的，哪个是布局变化时触发的。如下：

.onAreaChange((oldValue: Area, newValue: Area) => {  
  let videoWidth_OLD = new Number(oldValue.width).valueOf()// 如果videoWidth_OLD===0 则是创建  
  let videoWidth_NEW = new Number(newValue.width).valueOf()  
  
  console.log('videoWidth_OLD==='+videoWidth_OLD,'videoWidth_NEW==='+videoWidth_NEW);  
})

2024-10-21 16:55:36

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 横屏状态下获取组件的宽高

订阅鸿蒙技术特刊，精选内容抢先看