Flutter - 轻松搞定屏幕旋转功能 😎

一、概述

在常规的纯 Flutter 项目中，我们只需要通过 SystemChrome.setPreferredOrientations 方法就可以轻松驾驭屏幕旋转的需求，但相信很多还在整混编项目的老铁在 iOS 上碰了壁，因为一般情况下，原生项目里都会把方向选项全部去掉，只保留 Portrait，如下图所示

如果你原来就是一位 iOS 开发者，那自然是小问题，通过 MethodChannel 与原生进行通信，然后一顿代码输出就搞定了，但如果你不是 iOS 开发者呢，那就有点无从下手了。

今天就跟大家分享一个我自己做的 Flutter 屏幕旋转插件，只需几步即可轻松搞定这个功能。

等等，为啥不说安卓？那是因为 SystemChrome.setPreferredOrientations 不管是纯 Flutter 还是混编，对安卓一直都有效~

好吧，接下来就是手把手教学时刻。

二、集成

大胆的将 switch_orientation 添加到你的 pubspec.yaml 文件中

dependencies:
  switch_orientation: latest_version

具体版本大家到 pub.dev 上复制粘贴最新的吧，附上链接：pub.dev/packages/sw…

三、配置

安卓不需要配置，仅 iOS 需要

Swift 项目

如果你的原生项目是 Swift 项目，那是最好了。

打开 AppDelegate.swift 文件

• 导入 LXFProtocolTool
• 重写 supportedInterfaceOrientationsForWindow 方法，并返回 UIApplication.shared.lxf.currentVcOrientationMask

具体代码如下所示

import LXFProtocolTool

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  ...
  
  override func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
    return UIApplication.shared.lxf.currentVcOrientationMask
  }
}

OC 项目

如果你的原生项目是 OC 项目，则需要按如下步骤创建相应文件与添加代码

选择 New File...

选择 Swift File，点击 Next

文件名看你自己的用途，我这里是用来存储对 AppDelegate 的拓展，所以命名为 AppDelegate+Extension.swift，点击 Create

接下来这一步很关键，一定要点击 Create Bridging Header 来创建桥头文件，它的命名规则为 项目名-Bridging-Header.h。

当然，如果你的项目之前创建过桥头文件，它就不会有该提示了，跳过这一步即可~

在 AppDelegate+Extension.swift 文件中添加如下代码，供 OC 访问。

import Foundation
import LXFProtocolTool

extension AppDelegate {
    @objc func lxf_supportedInterfaceOrientations() -> UIInterfaceOrientationMask {
        UIApplication.shared.lxf.currentVcOrientationMask
    }
}

在桥接文件 项目名-Bridging-Header.h 中添加如下代码

其作用就是让 Swift 文件可以访问指定的 OC 文件里的代码。

#import "AppDelegate.h"

回到 AppDelegate.m 文件

• 导入 项目名-Swift.h，这样就可以在 OC 中访问 Swift 代码
• 在 supportedInterfaceOrientationsForWindow 方法中调用 lxf_supportedInterfaceOrientations 并将结果返回

具体代码如下所示

#import "AppDelegate.h"
#import "LXFOCProject-Swift.h"

@interface AppDelegate ()
@end

@implementation AppDelegate
...

- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
  return [self lxf_supportedInterfaceOrientations];
}

@end

OK，大功告成，接下来就可以愉快地去使用了~

四、使用

跟 SystemChrome.setPreferredOrientations 的使用方式一模一样，只要将 SystemChrome 替换成 SwitchOrientation 即可。

仅竖屏

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

仅横屏

SwitchOrientation.setPreferredOrientations([
  DeviceOrientation.landscapeLeft,
  DeviceOrientation.landscapeRight,
]);

横竖屏

SwitchOrientation.setPreferredOrientations([
  DeviceOrientation.portraitUp,
  DeviceOrientation.portraitDown,
  DeviceOrientation.landscapeLeft,
  DeviceOrientation.landscapeRight,
]);

五、最后

我已将上述的 Flutter 屏幕旋转插件发布至 GitHub: github.com/LinXunFeng/…

另外，如果你的原生项目有全屏旋转的需要，也可以继续使用我的原生库: github.com/LinXunFeng/…，功能强大且简单易用。

好了，开源不易，如果你也觉得这个库好用，请不吝给个 Star 👍

本篇到此结束，感谢大家的支持，我们下次再见！ 👋