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



相关文章
|
20天前
|
容器
Flutter 解决宽度或高度不足而导致的屏幕溢出显示问题
Flutter 解决宽度或高度不足而导致的屏幕溢出显示问题
130 1
|
2月前
|
容器
深入理解 Flutter 鸿蒙版的 Stack 布局:适配屏幕与层叠样式布局
Flutter 的 Stack 布局组件允许你将多个子组件层叠在一起,实现复杂的界面效果。本文介绍了 Stack 的基本用法、核心概念(如子组件层叠、Positioned 组件和对齐属性),以及如何使用 MediaQuery 和 LayoutBuilder 实现响应式设计。通过示例展示了照片展示与文字描述、动态调整层叠布局等高级用法,帮助你构建更加精美和实用的 Flutter 应用。
150 2
|
Android开发 iOS开发
Flutter应用开发,系统样式改不了?SystemChrome 状态栏、导航栏、屏幕方向……想改就改
Flutter应用开发,系统样式改不了?SystemChrome 状态栏、导航栏、屏幕方向……想改就改
|
编解码 Dart
Flutter如何获取屏幕的分辨率和实际画布的分辨率
Flutter如何获取屏幕的分辨率和实际画布的分辨率
Flutter 获取屏幕宽高
Flutter 获取屏幕宽高
198 0
|
3月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
|
2月前
|
开发框架 Dart 前端开发
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。本文从 Flutter 简介、特点、开发环境搭建、应用架构、组件详解、路由管理、状态管理、与原生代码交互、性能优化、应用发布与部署及未来趋势等方面,全面解析 Flutter 技术,助你掌握这一前沿开发工具。
69 8
|
2月前
|
存储 JavaScript 前端开发
在Flutter开发中,状态管理至关重要。随着应用复杂度的提升,有效管理状态成为挑战
在Flutter开发中,状态管理至关重要。随着应用复杂度的提升,有效管理状态成为挑战。本文介绍了几种常用的状态管理框架,如Provider和Redux,分析了它们的基本原理、优缺点及适用场景,并提供了选择框架的建议和使用实例,旨在帮助开发者提高开发效率和应用性能。
42 4
|
2月前
|
传感器 前端开发 Android开发
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求。本文深入探讨了插件开发的基本概念、流程、集成方法、常见类型及开发实例,如相机插件的开发步骤,同时强调了版本兼容性、性能优化等注意事项,并展望了插件开发的未来趋势。
46 2
|
3月前
|
开发者
鸿蒙Flutter实战:07-混合开发
鸿蒙Flutter混合开发支持两种模式:1) 基于har包,便于主项目开发者无需关心Flutter细节,但不支持热重载;2) 基于源码依赖,利于代码维护与热重载,需配置Flutter环境。项目结构包括AppScope、flutter_module等目录,适用于不同开发需求。
127 3