文章目录

获取当前屏幕的方向
实时监听屏幕方向的改变
锁定屏幕方向
- 锁定方向，禁止App随着设备的方向改变
- 锁定启动图的方向
- - 默认效果
  - Android配置
  - IOS配置
- 动态改变Flutter的屏幕方向
- - 竖屏-垂直头部朝下
  - 竖屏-垂直头部朝上
  - 横屏-头部显示右边
  - 横屏-头部显示左边

获取当前屏幕的方向

使用MediaQuery.of(context).orientation

示例：

print("当前屏幕方向：${MediaQuery.of(context).orientation}");

实时监听屏幕方向的改变

使用OrientationBuilder包裹MaterialApp，实现对整个Flutter App的屏幕旋转监听。用法类似于LayoutBuilder。

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return OrientationBuilder(builder: (BuildContext context, Orientation orientation) {print("当前屏幕的方向是：$orientation");return MaterialApp(title: 'Flutter Demo',home: MyHomePage(title: 'Flutter Demo Home Page'),);},);}
}

注意：

只有当屏幕由垂直变为水平，或者水平变为垂直，此builder才会触发。

锁定屏幕方向

使用SystemChrome.setPreferredOrientations(List<DeviceOrientation> orientations);

锁定方向，禁止App随着设备的方向改变

锁定App的方向为垂直，禁止横屏。

为了防止出现以下异常信息，需要在main方法的第一行加上WidgetsFlutterBinding.ensureInitialized()。

E/flutter (12370): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: ServicesBinding.defaultBinaryMessenger was accessed before the binding was initialized.
E/flutter (12370): If you're running an application and need to access the binary messenger before `runApp()` has been called (for example, during plugin initialization), then you need to explicitly call the `WidgetsFlutterBinding.ensureInitialized()` first.
E/flutter (12370): If you're running a test, you can call the `TestWidgetsFlutterBinding.ensureInitialized()` as the first line in your test's `main()` method to initialize the binding.

示例：

void main() {WidgetsFlutterBinding.ensureInitialized();SystemChrome.setPreferredOrientations([DeviceOrientation.portraitDown, DeviceOrientation.portraitUp]).then((value) => runApp(MyApp()));
}

锁定启动图的方向

在Flutter中指定方向，只能将Flutter启动后内容固定。但是原生端(Android/IOS)的首屏(也叫启动图)还是会根据设备的方向来自适应。

默认效果

默认情况下，Android和IOS都没有开启方向锁定。
当手机处于水平时，如果只是在Flutter中锁定了竖屏，此时启动Flutter App会出现以下效果。

IOS启动效果

Android启动效果

Android配置

打开android/app/src/main目录下的AndroidManifest.xml
在activity标签中添加属性android:screenOrientation，值为portrait。
这样就将Flutter的宿主Activity锁定为了垂直显示。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"package="com.surecall.fusion_pro"xmlns:tools="http://schemas.android.com/tools"><applicationandroid:label="Flutter App"android:icon="@mipmap/ic_launcher"><activityandroid:name=".MainActivity"android:launchMode="singleTop"android:theme="@style/LaunchTheme"android:screenOrientation="portrait"...></activity>...</application>
</manifest>

重新编译运行，查看效果

IOS配置

打开ios/Runner目录下的Info.plist文件.
找到属性UISupportedInterfaceOrientations，它的值是一个array(数组),默认情况下有4个值，代表支持4个方向，也就是上下左右。

UIInterfaceOrientationPortrait：垂直头部朝下
UIInterfaceOrientationPortraitUpsideDown：垂直头部朝上
UIInterfaceOrientationLandscapeLeft：横屏头部在左
UIInterfaceOrientationLandscapeRight：横屏头部在右

另外如果想配置ipad，需要修改属性UISupportedInterfaceOrientations~ipad的值，同上。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>....<!--iphone的屏幕方向设置--><key>UISupportedInterfaceOrientations</key><array><string>UIInterfaceOrientationPortrait</string><!--<string>UIInterfaceOrientationPortraitUpsideDown</string><string>UIInterfaceOrientationLandscapeLeft</string><string>UIInterfaceOrientationLandscapeRight</string>--></array><!--ipad的屏幕方向设置--><key>UISupportedInterfaceOrientations~ipad</key><array><string>UIInterfaceOrientationPortrait</string><string>UIInterfaceOrientationPortraitUpsideDown</string><string>UIInterfaceOrientationLandscapeLeft</string><string>UIInterfaceOrientationLandscapeRight</string></array><key>UIViewControllerBasedStatusBarAppearance</key><false/>
</dict>
</plist>

重新编译运行，效果如下

动态改变Flutter的屏幕方向

DeviceOrientation是一个枚举，有4个值portraitUp、portraitDown、landscapeLeft、landscapeRight。

竖屏-垂直头部朝下

SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);

竖屏-垂直头部朝上

如果在IOS中在plist中没有配置UIInterfaceOrientationPortraitUpsideDown,则不会生效。

SystemChrome.setPreferredOrientations([DeviceOrientation.portraitDown]);

横屏-头部显示右边

如果在IOS中在plist中没有配置UIInterfaceOrientationLandscapeRight,则不会生效。

SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeRight]);

横屏-头部显示左边

如果在IOS中在plist中没有配置UIInterfaceOrientationLandscapeLeft,则不会生效。

SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);

Flutter中获取监听屏幕方向、锁定屏幕方向相关推荐

Flutter 中获取地理位置[Flutter专题61]
大家好,我是坚果,公众号"坚果前端" Flutter 中获取地理位置如今,发现用户位置是移动应用程序非常常见且功能强大的用例.如果您曾经尝试过在 Android 中实现位置,您就 ...
监听手指是否离开屏幕android_Flutter事件监听
一. 事件监听在大前端的开发中,必然存在各种各样和用户交互的情况:比如手指点击.手指滑动.双击.长按等等. 所有内容首发于公众号:coderwhy 在Flutter中,手势有两个不同的层次: 第一层 ...
【转】第01课：生活中的监听模式——一坑爹的热水器
用程序来模拟生活从剧情中思考监听模式监听模式监听模式的模型抽象代码框架类图基于框架的实现模型说明设计要点推模型和拉模型应用场景 [故事剧情] 刚刚大学毕业的 Tony 只身来到北京 ...
安卓传感器全解：注册、注销传感器、监听传感器，距离传感器、方向传感器、陀螺仪、加速计、磁场、气压传感器
全栈工程师开发手册 (作者:栾鹏) 安卓教程全解安卓传感器全解:注册.注销传感器.监听传感器.距离传感器.方向传感器.陀螺仪.加速计.磁场.气压传感器. 注册.注销.监听传感器 1.自定义传感器监听 ...
小程序组件中的监听事件
小程序组件中的监听事件需求: 微信小程序中,如果进行使用了component级的组件的话,在一些情况下,父组件中使页面中的数据进行变化,子组件中的数据不会一起变化,由此可以使用该方法方法: 使用 ...
第01课：生活中的监听模式——一坑爹的热水器
用程序来模拟生活从剧情中思考监听模式监听模式监听模式的模型抽象代码框架类图基于框架的实现模型说明设计要点推模型和拉模型应用场景 [故事剧情] 刚刚大学毕业的 Tony 只身来到北京 ...
Java中事件监听机制
Java中事件监听机制一.事件监听机制的定义要想了解Java中的事件监听机制,首先就要去了解一下在Java中事件是怎样去定义的呢!在使用Java编写好一个界面后,我们就会对界面进行一些操作,比如, ...
Android 关于ListView中按钮监听的优化问题（方法二）
关于ListView中按钮监听的优化问题(方法一)地址: http://www.cnblogs.com/steffen/p/3951901.html 之前的方法一,虽然能够解决position的传递, ...
[react] React中如何监听state的变化？
[react] React中如何监听state的变化? 16.x 之前使用componentWillReveiveProps componentWillReceiveProps (nextProps) ...

Flutter中获取监听屏幕方向、锁定屏幕方向