Flutter 真正可以监听屏幕旋转的插件

Posted 2023-03-24

参考技术A 看到这篇文章的你是幸运的，因为不必再去搜索各种伪监听的文章，也不用去寻找android、ios实现监听的方法，也不用去解决竖屏锁定后仍然能回调的问题。

本插件实现的功能：
在手机开启允许屏幕旋转、或者关闭竖屏锁定的情况下，可以实时的监听用户旋转手机的动作，获取当前屏幕的朝向：上下左右。

Android屏幕旋转使用传感器+读取系统是否允许旋转的配置实现监听。
IOS使用UIDeviceOrientationDidChangeNotification通知进行监听。

不多说了，github地址：
https://github.com/515445681/flutter_screen_orientation

JS 如何获取和监听屏幕方向的改变？

大概写一下：

方法一：用触发手机的横屏和竖屏之间的切换的事件

代码如下：

window.addEventListener("orientationchange", function()

// 宣布新方向的数值

alert(window.orientation);

, false);

方法二：监听调整大小的改变

代码如下:

window.addEventListener("resize", function()

// 得到屏幕尺寸 (内部/外部宽度，内部/外部高度)

, false);

css判断横竖屏幕

代码如下:

@media screen and (orientation:portrait)

/* portrait-specific styles */



/* landscape */

@media screen and (orientation:landscape)

/* landscape-specific styles */



本地window.matchMedia方法允许实时媒体查询。我们可以利用以上媒体查询找到我们是处于直立或水平视角：

代码如下:

var mql = window.matchMedia("(orientation: portrait)");

// 如果有匹配，则我们处于垂直视角

if(mql.matches)

// 直立方向

alert("1")

else

//水平方向

alert("2")



// 添加一个媒体查询改变监听者

mql.addListener(function(m)

if(m.matches)

// 改变到直立方向

document.getElementById("test").innerHTML="改变到直立方向";



else

document.getElementById("test").innerHTML="改变到水平方向";

// 改变到水平方向



); 参考技术A 大概写一下：

方法一：用触发手机的横屏和竖屏之间的切换的事件

代码如下：

window.addEventListener("orientationchange", function()

// 宣布新方向的数值

alert(window.orientation);

, false);

方法二：监听调整大小的改变

代码如下:

window.addEventListener("resize", function()

// 得到屏幕尺寸 (内部/外部宽度，内部/外部高度)

, false);

css判断横竖屏幕

代码如下:

@media screen and (orientation:portrait)

/* portrait-specific styles */



/* landscape */

@media screen and (orientation:landscape)

/* landscape-specific styles */



本地window.matchMedia方法允许实时媒体查询。我们可以利用以上媒体查询找到我们是处于直立或水平视角：

代码如下:

var mql = window.matchMedia("(orientation: portrait)");

// 如果有匹配，则我们处于垂直视角

if(mql.matches)

// 直立方向

alert("1")

else

//水平方向

alert("2")



// 添加一个媒体查询改变监听者

mql.addListener(function(m)

if(m.matches)

// 改变到直立方向

document.getElementById("test").innerHTML="改变到直立方向";



else

document.getElementById("test").innerHTML="改变到水平方向";

// 改变到水平方向



);