Flutter 如何禁止手机横屏【Flutter专题61】

简介: 问题引出群友发来问题:Flutter 怎么禁止横屏显示呀,网上说的几个方法 都没有效

问题引出

群友发来问题:

Flutter 怎么禁止横屏显示呀,网上说的几个方法 都没有效

网络异常,图片无法展示
|

群友遇到问题,就要群友去帮助,这样,这个群就有了存在的意义。

正文

在一些特定的 App 里,我们不希望手机横屏的时候,App 发生旋转,在 main 函数里,像下面这样设定,就可以做到全局禁用横屏模式了。

代码

import 'package:flutter/services.dart';
void main() async => {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setPreferredOrientations(
    [
      DeviceOrientation.portraitUp,   // 竖屏 Portrait 模式
      DeviceOrientation.portraitDown, 
      // DeviceOrientation.landscapeLeft, // 横屏 Landscape 模式
      // DeviceOrientation.landscapeRight,
    ],
  );
  runApp(MyApp());
};
复制代码

看你咋写

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
    .then((_) {
      runApp(new MyApp());
    });
}
复制代码

不过,在部分需求里,并不是彻底禁用了横屏模式,比如打开网页,也就是在WebView 的场景下,是可以横屏的,但是在其他界面下不可以横屏。这要怎么设置呢?

@override
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
  }
  @override
  void dispose() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
    super.dispose();
  }
复制代码

像这样,设置到一个 StatefulWidget 的 initStatedispose 里面就可以了。比如在我的代码里,我把 WebView 专门封装了一个页面,叫 WebPage,这样设定后,当用户进入网页的时候,可以横屏,但是退回后,就会强制恢复竖屏。

最后如果不起作用,可以分别做如下设置

IOS:

网络异常,图片无法展示
|

安卓:

android/app/src/main/AndroidManifest.xml`如下所示:

网络异常,图片无法展示
|

另外pub.dev上有个

插件orientation

pub.flutter-io.cn/packages/or…

可以去试一下,我在这儿就不做解释了。

大家觉得帮到你的话,关注一下哦!

当然对于生活这段代码来说,不会按照你的想法来执行,充满了太多的未知和异常,稍不留神就是报错,遇到问题就必须处理,DeBug的过程虽然很难很痛苦,但成功解决完之后又是另一番美景。坚果加油

\


相关文章
|
4月前
|
存储 Windows
基于flutter3.22+getx手机端os系统管理FlutterOSX
flutter3-osx原创研发手机桌面式OA管理系统新解决方案模式。
76 5
|
Android开发 iOS开发
Flutter 如何禁止手机横屏[Flutter专题62]
正文 在一些特定的 App 里,我们不希望手机横屏的时候,App 发生旋转,在 main 函数里,像下面这样设定,就可以做到全局禁用横屏模式了。
266 0
Flutter 如何禁止手机横屏[Flutter专题62]
|
传感器 移动开发 前端开发
【Flutter】手机应用类型 ( Android | iOS | Native 应用 | Web 应用 | Hybrid 应用 | ReactNative 应用 | Flutter 应用 )
【Flutter】手机应用类型 ( Android | iOS | Native 应用 | Web 应用 | Hybrid 应用 | ReactNative 应用 | Flutter 应用 )
218 0
|
4月前
|
开发框架 前端开发 测试技术
Flutter开发常见问题解答
Flutter开发常见问题解答
|
4天前
|
开发框架 移动开发 Android开发
安卓与iOS开发中的跨平台解决方案:Flutter入门
【9月更文挑战第30天】在移动应用开发的广阔舞台上,安卓和iOS两大操作系统各自占据半壁江山。开发者们常常面临着选择:是专注于单一平台深耕细作,还是寻找一种能够横跨两大系统的开发方案?Flutter,作为一种新兴的跨平台UI工具包,正以其现代、响应式的特点赢得开发者的青睐。本文将带你一探究竟,从Flutter的基础概念到实战应用,深入浅出地介绍这一技术的魅力所在。
21 7
|
5月前
|
前端开发 C++ 容器
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
|
22天前
|
JSON Dart Java
flutter开发多端平台应用的探索
flutter开发多端平台应用的探索
27 6
|
22天前
|
JSON Dart Java
flutter开发多端平台应用的探索 下 (跨模块、跨语言通信之平台通道)
flutter开发多端平台应用的探索 下 (跨模块、跨语言通信之平台通道)
|
25天前
|
安全 Android开发 开发者
探索安卓开发的未来:Kotlin的崛起与Flutter的挑战
在移动开发的广阔天地中,安卓平台始终占据着举足轻重的地位。随着技术的不断进步和开发者需求的多样化,Kotlin和Flutter成为了改变游戏规则的新玩家。本文将深入探讨Kotlin如何以其现代化的特性赢得开发者的青睐,以及Flutter凭借跨平台的能力如何挑战传统的安卓开发模式。通过实际案例分析,我们将揭示这两种技术如何塑造未来的安卓应用开发。
52 6
|
2月前
|
开发框架 Android开发 iOS开发
Flutter相关痛点解决问题之淘特选择桌面端开发框架如何解决
Flutter相关痛点解决问题之淘特选择桌面端开发框架如何解决
下一篇
无影云桌面