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

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

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
相关问题
如何监听手机屏幕横竖切换?
39浏览 • 1回复 待解决
如何监听设备横竖切换状态
681浏览 • 1回复 待解决
如何实现page页面横竖切换
40浏览 • 1回复 待解决
横竖旋转demo有哪些?
413浏览 • 1回复 待解决
如何获取设备横竖状态变化通知
896浏览 • 1回复 待解决
页面横竖如何进行切换
32浏览 • 0回复 待解决
如何进行页面横竖切换
952浏览 • 1回复 待解决
如何实现应用屏幕自动旋转
1036浏览 • 1回复 待解决
如何监听手机屏幕和亮
35浏览 • 1回复 待解决
鸿蒙横竖切换监听,需要这个功能
10243浏览 • 3回复 已解决
求大佬告知如何切换横竖
902浏览 • 1回复 待解决
OpenHarmony 小型系统如何设置横竖
6730浏览 • 1回复 待解决
鸿蒙JS 框架中如何主动切换横竖?
3721浏览 • 1回复 待解决
有谁知道如何监听屏幕旋转
874浏览 • 1回复 待解决
如何横竖切换更自然一些
226浏览 • 1回复 待解决
屏幕自动旋转示例有哪些?
71浏览 • 1回复 待解决
如何设置屏幕方向为横
489浏览 • 1回复 待解决
Open Harmony 3.1版本支持横竖切换吗?
3902浏览 • 1回复 待解决
如何获取当前是横还是竖啊?
3701浏览 • 1回复 待解决