获取当前屏幕的方向
使用MediaQuery.of(context).orientation
示例:
print("当前屏幕方向:${MediaQuery.of(context).orientation}");
实时监听屏幕方向的改变
使用OrientationBuilder
包裹MaterialApp
,实现对整个Flutter App的屏幕旋转监听。用法类似于LayoutBuilder
。
class MyApp extends StatelessWidget { @override Widget 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"> <application android:label="Flutter App" android:icon="@mipmap/ic_launcher"> <activity android: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]);