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的过程虽然很难很痛苦,但成功解决完之后又是另一番美景。坚果加油

\


相关文章
|
2月前
|
存储 Windows
基于flutter3.22+getx手机端os系统管理FlutterOSX
flutter3-osx原创研发手机桌面式OA管理系统新解决方案模式。
56 5
|
Android开发 iOS开发
Flutter 如何禁止手机横屏[Flutter专题62]
正文 在一些特定的 App 里,我们不希望手机横屏的时候,App 发生旋转,在 main 函数里,像下面这样设定,就可以做到全局禁用横屏模式了。
256 0
Flutter 如何禁止手机横屏[Flutter专题62]
|
传感器 移动开发 前端开发
【Flutter】手机应用类型 ( Android | iOS | Native 应用 | Web 应用 | Hybrid 应用 | ReactNative 应用 | Flutter 应用 )
【Flutter】手机应用类型 ( Android | iOS | Native 应用 | Web 应用 | Hybrid 应用 | ReactNative 应用 | Flutter 应用 )
213 0
|
3月前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
156 0
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
|
2月前
|
开发框架 前端开发 测试技术
Flutter开发常见问题解答
Flutter开发常见问题解答
|
3月前
|
前端开发 C++ 容器
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
|
8天前
|
移动开发 前端开发 JavaScript
"跨界大战!React Native、Weex、Flutter:三大混合开发王者正面交锋,揭秘谁才是你移动应用开发的终极利器?"
【8月更文挑战第12天】随着移动应用开发的需求日益增长,高效构建跨平台应用成为关键。React Native、Weex与Flutter作为主流混合开发框架各具特色。React Native依托Facebook的强大支持,以接近原生的性能和丰富的组件库著称;Weex由阿里巴巴开发,性能优越尤其在大数据处理上表现突出;Flutter则凭借Google的支持及独特的Dart语言和Skia渲染引擎,提供出色的定制能力和开发效率。选择时需考量项目特性、团队技能及生态系统的成熟度。希望本文对比能助你做出最佳决策。
29 1
|
2月前
|
开发框架 移动开发 Android开发
构建高效移动应用:探索Flutter开发框架
【6月更文挑战第28天】随着移动设备的普及,用户对移动应用的需求日益增长。开发者面临着在众多平台间提供无缝体验的挑战。本文深入探讨了Flutter框架如何通过其跨平台特性、热重载功能以及丰富的组件库简化移动应用的开发流程,同时确保高性能和优雅的用户界面设计。
39 2
|
3月前
|
Dart 安全
简化代码、提高效率:Dart和Flutter开发小技巧
在日常开发中,我们常常会使用一些常用的技巧或语法糖,以简化代码、提高开发效率。本文将分享一些在Dart和Flutter中常用的小贴士,帮助你更轻松地编写优雅高效的代码。
简化代码、提高效率:Dart和Flutter开发小技巧
|
2月前
|
Dart 监控 测试技术
在Flutter开发中,注重代码质量与重构实践显得尤为重要
【6月更文挑战第11天】随着Flutter在跨平台开发的普及,保持高质量代码成为开发者关注的重点。良好的代码质量关乎应用性能、稳定性和开发效率。为提升Flutter代码质量,开发者应遵循最佳实践,编写可读性高的代码,实施代码审查和自动化测试。重构实践在应对代码复杂性时也至关重要,包括识别重构时机、制定计划、逐步操作及利用重构工具。注重代码质量和重构是Flutter开发成功的关键。
48 3