Flutter禁止手機橫屏的簡單實現方法

Posted on by

在一些特定的 App 裡，我們不希望手機橫屏的時候，App 發生旋轉，比如微信，企業微信都是這樣的。

代碼可以這樣設定：

import 'package:flutter/services.dart';
void main() async => {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setPreferredOrientations(
    [
      DeviceOrientation.portraitUp,   // 豎屏 Portrait 模式
      DeviceOrientation.portraitDown, 
      // DeviceOrientation.landscapeLeft, // 橫屏 Landscape 模式
      // DeviceOrientation.landscapeRight,
    ],
  );
  runApp(MainApp());
};

在 main 函數裡，像上面那樣設定，就可以做到全局禁用橫屏模式瞭。

不過，在企業微信裡，我發現，並不是徹底禁用瞭橫屏模式，如果我在企業微信內部打開瞭一個網頁，這種場景下，就是可以橫屏過來用的。也就是，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 的 initState 和 dispose 裡面就可以瞭。比如在我的代碼裡，我把 WebView 專門封裝瞭一個頁面，叫 WebPage，這樣設定後，當用戶進入網頁的時候，可以橫屏，但是退回後，就會強制恢復豎屏。

參考：http://kmanong.top/kmn/qxw/form/article?id=2735&cate=93

參考：https://stackoverflow.com/questions/49418332/flutter-how-to-prevent-device-orientation-changes-and-force-portrait

總結

到此這篇關於Flutter禁止手機橫屏的文章就介紹到這瞭,更多相關Flutter禁止手機橫屏內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：