Flutter 特定頁面切換螢幕方向/iOS強制橫屏/SystemChrome.setPreferredOrientations不起作用看這裡!

Wos發表於2019-02-17

轉載請標明出處： juejin.im/post/5c68da…
本文出自：Wos的主頁

我此刻的Flutter版本:

Flutter 1.2.0 • channel dev • github.com/flutter/flu…
Framework • revision 06b979c4d5 (3 weeks ago) • 2019-01-25 14:27:35 -0500
Engine • revision 36acd02c94
Tools • Dart 2.1.1 (build 2.1.1-dev.3.2 f4afaee422)

特定頁面旋轉螢幕很簡單:

SystemChrome.setPreferredOrientations([
  ...
]);
複製程式碼

陣列中是您要支援的螢幕方向.

如果想在特定頁面固定橫屏, 您可以這樣寫:

@override
void initState() {
  super.initState();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeRight,
    DeviceOrientation.landscapeRight,
  ]);
}
複製程式碼

並且在dispose時更改回豎屏

@override
void dispose() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]);
  super.dispose();
}
複製程式碼

但是!!! 不要走開本文重點在下面

在Android裝置上, 呼叫此方法可以強制改變螢幕方向. 但在iOS上卻不是這樣

對於iOS, 這個方法表示設定應用支援的螢幕方向, 只有在物理方向改變時才會改變螢幕方向

現在看起來, 這應該是一個Flutter的一個Bug. 有待官方解決

您可關注 issue #13238 追蹤Flutter官方的最新更新

強制改變佈局方向

2019-03-15 更新:

發現已經有大佬將下面的方法封裝成了package (點此跳轉到orientation).

我沒有嘗試過, 大家可以優先嚐試一下這個庫.

既然 Flutter 提供的方法不能強制改變螢幕方向, 那麼我們可以通過外掛的形式, 橋接到iOS原生程式碼中, 通過原生方式改變螢幕方向.

設定應用支援的佈局方向

通過Xcode開啟Flutter專案中的iOS工程, 根據下圖找到Device Orientation 這一項勾選需要支援的佈局方向, 通過這一步, 預設你現在的應用已經會根據裝置的方向轉變佈局了

編寫外掛

展開 Runner/Runner資料夾右鍵->New File 新增兩個新的OC檔案 FlutterIOSDevicePlugin.m 和 FlutterIOSDevicePlugin.h (叫什麼都沒關係) 建立方式看下圖:

FlutterIOSDevicePlugin.h的內容:

#import <Flutter/Flutter.h>

@interface FlutterIOSDevicePlugin : NSObject<FlutterPlugin>
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar flutterViewController:(FlutterViewController*) controller;
- (instancetype)newInstance:(NSObject<FlutterPluginRegistrar>*)registrar flutterViewController:(FlutterViewController*) controller;
@end
複製程式碼

FlutterIOSDevicePlugin.m的內容:

#import "FlutterIOSDevicePlugin.h"

@interface FlutterIOSDevicePlugin () {
    NSObject<FlutterPluginRegistrar> *_registrar;
    FlutterViewController *_controller;
}
@end

static NSString* const CHANNEL_NAME = @"flutter_ios_device";
static NSString* const METHOD_CHANGE_ORIENTATION = @"change_screen_orientation";
static NSString* const ORIENTATION_PORTRAIT_UP = @"portraitUp";
static NSString* const ORIENTATION_PORTRAIT_DOWN = @"portraitDown";
static NSString* const ORIENTATION_LANDSCAPE_LEFT = @"landscapeLeft";
static NSString* const ORIENTATION_LANDSCAPE_RIGHT = @"landscapeRight";

@implementation FlutterIOSDevicePlugin
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
    FlutterMethodChannel* channel = [FlutterMethodChannel
                                     methodChannelWithName:CHANNEL_NAME
                                     binaryMessenger:[registrar messenger]];
    FlutterIOSDevicePlugin* instance = [[FlutterIOSDevicePlugin alloc] newInstance:registrar flutterViewController:nil];
    [registrar addMethodCallDelegate:instance channel:channel];
}

+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar flutterViewController:(FlutterViewController*) controller {
    FlutterMethodChannel* channel = [FlutterMethodChannel
                                     methodChannelWithName:CHANNEL_NAME
                                     binaryMessenger:[registrar messenger]];
    FlutterIOSDevicePlugin* instance = [[FlutterIOSDevicePlugin alloc] newInstance:registrar flutterViewController:controller];
    [registrar addMethodCallDelegate:instance channel:channel];
}

- (instancetype)newInstance:(NSObject<FlutterPluginRegistrar>*)registrar flutterViewController:(FlutterViewController*) controller{
    _registrar = registrar;
    _controller = controller;
    return self;
}

- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
    if ([METHOD_CHANGE_ORIENTATION isEqualToString:call.method]) {
        NSArray *arguments = call.arguments;
        NSString *orientation = arguments[0];
        NSInteger iOSOrientation;
        if ([orientation isEqualToString:ORIENTATION_LANDSCAPE_LEFT]){
            iOSOrientation = UIDeviceOrientationLandscapeLeft;
        }else if([orientation isEqualToString:ORIENTATION_LANDSCAPE_RIGHT]){
            iOSOrientation = UIDeviceOrientationLandscapeRight;
        }else if ([orientation isEqualToString:ORIENTATION_PORTRAIT_DOWN]){
            iOSOrientation = UIDeviceOrientationPortraitUpsideDown;
        }else{
            iOSOrientation = UIDeviceOrientationPortrait;
        }
        [[UIDevice currentDevice] setValue:@(iOSOrientation) forKey:@"orientation"];
        result(nil);
    } else {
        result(FlutterMethodNotImplemented);
    }
}
@end
複製程式碼

註冊外掛

開啟AppDelegate.m 在 didFinishLaunchingWithOptions 方法中註冊外掛

#include "FlutterIOSDevicePlugin.h"

...

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];
    ...
    
    // flutter: Device Plugin
    [FlutterIOSDevicePlugin registerWithRegistrar:[self registrarForPlugin:@"FlutterIOSDevicePlugin"] flutterViewController:controller];
}
複製程式碼

使用外掛

import 'package:flutter/services.dart';

MethodChannel _channel = const MethodChannel('flutter_ios_device');

@override
void initState() {
  super.initState();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]).then((_) {
    if (Platform.isIOS) {
      iOSDevicePlugin.changeScreenOrientation(DeviceOrientation.landscapeLeft);
    }
  });
}

@override
void dispose() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]).then((_) {
    if (Platform.isIOS) {
      iOSDevicePlugin.changeScreenOrientation(DeviceOrientation.portraitUp);
    }
  });
  super.dispose();
}

Future<void> changeScreenOrientation(DeviceOrientation orientation) {
  String o;
  switch (orientation) {
    case DeviceOrientation.portraitUp:
      o = 'portraitUp';
      break;
    case DeviceOrientation.portraitDown:
      o = 'portraitDown';
      break;
    case DeviceOrientation.landscapeLeft:
      o = 'landscapeLeft';
      break;
    case DeviceOrientation.landscapeRight:
      o = 'landscapeRight';
      break;
  }
  return _channel.invokeMethod('change_screen_orientation', [o]);
}
複製程式碼

到此, 我們的工作基本完成. 可以強制某些特定頁面改變佈局方向.

還沒有結束

在實踐中, 我發現上面這樣的做法會導致一個問題.

如果只想讓特定的頁面可以改變方向(橫屏), 其它頁面一直保持豎屏該怎麼辦?

"圖一" 中, 我們設定了 iOS 的 Device Orientation 只要裝置方向改變了, 佈局就會改變.

現在, 根據圖一的步驟將 Device Orientation 改為僅 Portrait

修改 AppDelegate.h, 加入 isLandscape 這個屬性

@interface AppDelegate : FlutterAppDelegate
@property (nonatomic,assign)BOOL isLandscape;
@end
複製程式碼

在 AppDelegate.m 中加入下列方法

// 是否允許橫屏
- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(nullable UIWindow *)window{
    if (self.isLandscape) {
        return UIInterfaceOrientationMaskAllButUpsideDown;
    }
    return UIInterfaceOrientationMaskPortrait;
}
複製程式碼

修改 FlutterIOSDevicePlugin.m

#import "AppDelegate.h"

- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
    ...
        if ([orientation isEqualToString:ORIENTATION_LANDSCAPE_LEFT]){
            iOSOrientation = UIDeviceOrientationLandscapeLeft;
            ((AppDelegate *)[UIApplication sharedApplication].delegate).isLandscape = YES;
        }else if([orientation isEqualToString:ORIENTATION_LANDSCAPE_RIGHT]){
            iOSOrientation = UIDeviceOrientationLandscapeRight;
            ((AppDelegate *)[UIApplication sharedApplication].delegate).isLandscape = YES;
        }else if ([orientation isEqualToString:ORIENTATION_PORTRAIT_DOWN]){
            iOSOrientation = UIDeviceOrientationPortraitUpsideDown;
            ((AppDelegate *)[UIApplication sharedApplication].delegate).isLandscape = NO;
        }else{
            iOSOrientation = UIDeviceOrientationPortrait;
            ((AppDelegate *)[UIApplication sharedApplication].delegate).isLandscape = NO;
        }
    ...
}
複製程式碼

完成

參考:

SystemChrome.setPreferredOrientations does not force the device to the given orientations until the device is physically rotated #13238
iOS關於橫屏的有關問題
 ios啟動頁強制豎屏（進入App後允許橫屏與豎屏）

我對iOS知之甚少, 以上解決方案全憑網上的資料彙總, 暫時沒有能力提供 flutter plugin 供大家快速接入. 如有高手寫了相關庫請告知我, 我會將它放到這篇文章中. 感謝

Flutter中如何強制某個頁面橫屏
2019-03-13
Flutter
iOS 橫豎屏切換
2017-02-07
iOS
android轉屏，切換螢幕，橫豎屏（onConfigurationChanged）會重新 OnCreate 的解決方案
2012-09-02
Android
電腦螢幕橫過來了怎麼恢復電腦螢幕橫屏了怎麼轉換
2022-06-25
[iOS]終極橫豎屏切換解決方案
2019-03-04
iOS
Android橫豎屏切換
2017-08-16
Android
強制頁面顯示在框架裡
2008-11-26
框架
[貝聊科技] iOS 終極橫豎屏切換解決方案
2017-07-23
iOS
Activity橫豎屏切換生命週期
2019-03-24
win10電腦螢幕橫過來了怎麼復原_win10螢幕橫屏了怎麼轉換回來
2019-12-09
Win10
Flutter之支援不同的螢幕尺寸和方向
2019-01-21
Flutter
iOS實現超酷頁面切換動畫特效
2014-12-13
iOS動畫特效
iOS支援螢幕方向問題說明
2017-12-22
iOS
橫屏和豎屏切換介面不重新整理
2015-10-15
iOS開發詳解強制螢幕旋轉的方法
2016-11-14
iOS
flutter實戰6：TAB頁面切換免重繪
2018-10-03
Flutter
H5單頁面手勢滑屏切換原理
2024-04-19
H5
直播系統搭建，判斷螢幕橫豎屏狀態
2023-04-13
iOS 封裝頁數控制，點選NavigationTabBar切換頁面
2018-04-18
iOS封裝NavigationtabBar
iOS橫豎屏
2018-02-26
iOS
mui 子頁面切換父頁面底部導航
2017-07-06
UI
flutter好用的輪子推薦十八-flutter液體效果的頁面切換元件
2019-11-25
Flutter元件
直播電商平臺開發，橫豎屏切換的方法
2023-04-23
dialog橫豎屏切換時消失的解決方法
2013-09-16
ios橫屏設定
2016-07-25
iOS
4、[ iOS ] 禁止橫屏
2016-02-19
iOS
從[] == ![] 看隱式強制轉換機制
2017-08-19
mui 控制旋轉螢幕方向
2018-07-03
UI
Flutter螢幕適配
2020-06-03
Flutter
關於iPad應用強制橫豎屏問題
2016-09-26
iPad
Android在橫豎屏切換時到底發生了什麼？
2015-01-30
Android
橫豎屏切換中的介面設計與體驗提升
2012-08-20
電腦如何切換螢幕_電腦怎麼切換另一個介面快捷鍵
2020-08-12
線上直播系統原始碼，強制應用全域性橫屏或豎屏
2021-11-30
原始碼
關於Android中使用BottomNavigationView切換橫屏導致返回主頁的問題
2019-04-20
AndroidNavigationView
iwatch2換屏高能蘋果收購這個螢幕到底是什麼？
2016-06-29
蘋果
電腦螢幕時間長短在哪裡設定電腦螢幕息屏時間設定
2022-07-09
你還在問android橫豎屏切換的生命週期？
2013-09-16
Android

Flutter 特定頁面切換螢幕方向/iOS強制橫屏/SystemChrome.setPreferredOrientations不起作用 看這裡!