如何监听当前屏幕的横竖屏状态?如何实现页面跟随屏幕横竖屏自动旋转

如何监听当前屏幕的横竖屏状态?如何实现页面跟随屏幕横竖屏自动旋转

HarmonyOS
2024-03-17 14:50:33
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
sunshine_2000

应用可以通过diplay.on监听屏幕状态改变。

实现页面跟随屏幕横竖屏自动旋转的方法:

1、Abilty级别配置:在模块配置文件module.json5中将EntryAbility设置为"orientation"。

2、动态设置:使用window.setPreferredOrientation设置窗口方向。

import { window, display } from '@kit.ArkUI'; 
 
const TAG = 'foo' 
const ORIENTATION: Array<string> = ['垂直', '水平', '反向垂直', '反向水平'] 
 
@Entry 
@Component 
struct ScreenTest { 
  @State rotation: number = 0 
  @State message: string = ORIENTATION[this.rotation] 
 
  aboutToAppear() { 
    this.setOrientation() 
 
    let callback = async () => { 
      // ... 
    } 
    try { 
      display.on("change", callback); // 监听屏幕状态改变 
    } catch (exception) { 
      console.error(TAG, 'Failed to register callback. Code: ' + JSON.stringify(exception)); 
    } 
  } 
 
  setOrientation() { 
    try { 
      window.getLastWindow(getContext(this), (err, data) => { // 获取window实例 
        if (err.code) { 
          console.error(TAG, 'Failed to obtain the top window. Cause: ' + JSON.stringify(err)); 
          return; 
        } 
        let windowClass = data; 
        console.info(TAG, 'Succeeded in obtaining the top window. Data: ' + JSON.stringify(data)); 
 
        let orientation = window.Orientation.AUTO_ROTATION; // 设置窗口方向为传感器自动旋转模式。 
        try { 
          windowClass.setPreferredOrientation(orientation, (err) => { 
            if (err.code) { 
              console.error(TAG, 'Failed to set window orientation. Cause: ' + JSON.stringify(err)); 
              return; 
            } 
            console.info(TAG, 'Succeeded in setting window orientation.'); 
          }); 
        } catch (exception) { 
          console.error(TAG, 'Failed to set window orientation. Cause: ' + JSON.stringify(exception)); 
        } 
        ; 
      }); 
    } catch (exception) { 
      console.error(TAG, 'Failed to obtain the top window. Cause: ' + JSON.stringify(exception)); 
    } 
    ; 
  } 
 
  build() { 
    Row() { 
      Column() { 
        Text(`${this.rotation}`).fontSize(25) 
        Text(`${this.message}`).fontSize(25) 
      } 
      .width("100%") 
    } 
    .height("100%") 
  } 
}

参考链接

display.on设置窗口的显示方向属性

分享
微博
QQ
微信
回复
2024-03-18 20:31:53
相关问题
如何监听手机屏幕横竖切换?
433浏览 • 1回复 待解决
如何监听设备横竖切换状态
1686浏览 • 1回复 待解决
横竖旋转demo有哪些?
841浏览 • 1回复 待解决
如何实现page页面横竖切换
525浏览 • 1回复 待解决
页面横竖如何进行切换
441浏览 • 1回复 待解决
如何进行页面横竖切换
1989浏览 • 1回复 待解决
如何获取设备横竖状态变化通知
1951浏览 • 1回复 待解决
如何监听手机屏幕和亮
636浏览 • 1回复 待解决
如何实现应用屏幕自动旋转
2256浏览 • 1回复 待解决
鸿蒙横竖切换监听,需要这个功能
11363浏览 • 3回复 已解决
OpenHarmony 小型系统如何设置横竖
7950浏览 • 1回复 待解决
HarmonyOS如何设置应用跟随屏幕旋转
350浏览 • 1回复 待解决
求大佬告知如何切换横竖
2045浏览 • 1回复 待解决
鸿蒙JS 框架中如何主动切换横竖?
4809浏览 • 1回复 待解决