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

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

获取当前屏幕的方向

使用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个值portraitUpportraitDownlandscapeLeftlandscapeRight

竖屏-垂直头部朝下

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]);



相关文章
|
4月前
|
XML Java Android开发
Android Studio App开发之捕获屏幕的变更事件实战(包括竖屏与横屏切换,回到桌面与切换到任务列表)
Android Studio App开发之捕获屏幕的变更事件实战(包括竖屏与横屏切换,回到桌面与切换到任务列表)
148 0
|
1月前
锁屏组件新能力实现问题之在Activity中锁屏状态下显示悬浮窗的实现如何解决
锁屏组件新能力实现问题之在Activity中锁屏状态下显示悬浮窗的实现如何解决
17 0
|
4月前
|
XML Java Android开发
Android系统 添加动态控制屏幕方向、强制APP横竖屏方向
Android系统 添加动态控制屏幕方向、强制APP横竖屏方向
484 1
|
4月前
|
Android开发
Android获取横竖屏状态及监听
Android获取横竖屏状态及监听
54 0
|
Android开发
Android 修改系统屏幕亮度及监听
Android 修改系统屏幕亮度及监听
643 0
Android 修改系统屏幕亮度及监听
|
安全 Java Android开发
开发时遇到监听的事件处理机制和SoundPool播放音效解决方法以及外部类的使用【Android】
开发时遇到监听的事件处理机制和SoundPool播放音效解决方法以及外部类的使用【Android】
157 0
开发时遇到监听的事件处理机制和SoundPool播放音效解决方法以及外部类的使用【Android】
|
iOS开发
IOS锁定屏幕旋转
IOS锁定屏幕旋转
94 0
|
iOS开发
ios 锁定 屏幕旋转
ios 锁定 屏幕旋转
44 0
|
Android开发 数据安全/隐私保护
安卓系统home键监听及系统锁屏状态监听___Android提高篇
安卓系统home键监听及系统锁屏状态监听___Android提高篇
462 0