Question

我想以横向模式在Flutter应用程序中显示单个页面。其他所有屏幕均应以纵向模式显示。

我找到了以下代码段：

在我的main.dart中

SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]).then((_) {
    runApp(new IHGApp());
  });

这将以纵向模式启动该应用程序。所以我有要在横向模式下显示的屏幕，这是我在那里使用的代码：

@override
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
    ]);
  }


  @override
  void dispose() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
    super.dispose();
  }

这适用于Android。

在iOS上，似乎无法对单个页面强制使用横向模式。

https://github.com/flutter/flutter/issues/13238

在本文中，我找到了此问题的问题。鲁rod的提到了如何解决这个问题。

“我解决了创建一个小型平台通道的问题，该通道调用此代码以在调用setPreferredOrientations之前立即切换到肖像：”

[[UIDevice currentDevice] setValue:@(UIInterfaceOrientationPortrait) forKey:@"orientation"];

以及用于切换到横向的对应代码

[[UIDevice currentDevice] setValue:@(UIInterfaceOrientationLandscapeLeft) forKey:@"orientation"];

如何在我的应用程序中实现呢？

Answer 1

我对其中一个应用程序有完全相同的要求。幸运的您-整个项目都是开源的！让我们完成它：

在ios/Runner/AppDelegate.m-https://github.com/vintage/party_flutter/blob/27b11fc46755d8901f02c3b439b294ca9005277a/ios/Runner/AppDelegate.m#L8-L23

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    FlutterViewController* controller = (FlutterViewController*)self.window.rootViewController;

    FlutterMethodChannel* rotationChannel = [FlutterMethodChannel
                                             methodChannelWithName:@"zgadula/orientation"
                                             binaryMessenger:controller];

    [rotationChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
        if ([@"setLandscape" isEqualToString:call.method]) {
            [[UIDevice currentDevice] setValue:@(UIInterfaceOrientationLandscapeRight) forKey:@"orientation"];
        }
        else if ([@"setPortrait" isEqualToString:call.method]) {
            [[UIDevice currentDevice] setValue:@(UIInterfaceOrientationPortrait) forKey:@"orientation"];
        }
        else {
            result(FlutterMethodNotImplemented);
        }
    }];

    [GeneratedPluginRegistrant registerWithRegistry:self];
    // Override point for customization after application launch.
    return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

在应横向放置的小部件/屏幕中，定义MethodChannel-https://github.com/vintage/party_flutter/blob/master/lib/ui/screens/game_play.dart#L34

static const _rotationChannel = const MethodChannel('zgadula/orientation');

3。initState应该触发旋转到横向-https://github.com/vintage/party_flutter/blob/master/lib/ui/screens/game_play.dart#L71-L78

SystemChrome.setPreferredOrientations([
  DeviceOrientation.landscapeRight,
]);
// TODO: Remove it when fixed in Flutter
// https://github.com/flutter/flutter/issues/13238
try {
  _rotationChannel.invokeMethod('setLandscape');
} catch (error) {}

try-catch用于处理Android部分（没有此类通道，因为没有它，它可以按预期工作）。

处置时-旋转回到纵向模式-https://github.com/vintage/party_flutter/blob/master/lib/ui/screens/game_play.dart#L111-L122


SystemChrome.setPreferredOrientations([
  DeviceOrientation.portraitUp,
]);

// TODO: Remove it when fixed in Flutter
// https://github.com/flutter/flutter/issues/13238
try {
  _rotationChannel.invokeMethod('setPortrait');
} catch (error) {}

if (_rotateSubscription != null) {
  _rotateSubscription.cancel();
}

随时将zgadula/orientation更改为更适合您的项目的内容：）

Answer 2

就我而言，我是在没有频道的情况下制作的。只有 Flutter 代码。

第一步。在 Xcode 中更改可能的设备方向

第二步。在您的应用程序的根小部件中添加默认方向列表。通常，它位于 Material 应用小部件之前。

@override
  void initState() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
    ]);
    super.initState();
  }

所以，现在，我们的应用只有一个方向。

第三步。在应该有其他方向的屏幕上（例如，在我的情况下，全屏视频）添加

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

iOS上单页的Flutter设备方向

2 个答案: