Flutter - 轻松搞定屏幕旋转功能 😎
# 一、概述
在常规的纯 Flutter
项目中,我们只需要通过 SystemChrome.setPreferredOrientations
方法就可以轻松驾驭屏幕旋转的需求,但相信很多还在整混编项目的老铁在 iOS
上碰了壁,因为一般情况下,原生项目里都会把方向选项全部去掉,只保留 Portrait
,如下图所示
如果你原来就是一位 iOS
开发者,那自然是小问题,通过 MethodChannel
与原生进行通信,然后一顿代码输出就搞定了,但如果你不是 iOS
开发者呢,那就有点无从下手了。
今天就跟大家分享一个我自己做的 Flutter
屏幕旋转插件,只需几步即可轻松搞定这个功能。
等等,为啥不说安卓?那是因为 SystemChrome.setPreferredOrientations
不管是纯 Flutter
还是混编,对安卓一直都有效~
好吧,接下来就是手把手教学时刻。
# 二、集成
大胆的将 switch_orientation
添加到你的 pubspec.yaml
文件中
dependencies:
switch_orientation: latest_version
具体版本大家到 pub.dev
上复制粘贴最新的吧,附上链接:https://pub.dev/packages/switch_orientation (opens new window)
# 三、配置
安卓不需要配置,仅
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
: https://github.com/LinXunFeng/flutter_switch_orientation (opens new window)
另外,如果你的原生项目有全屏旋转的需要,也可以继续使用我的原生库: https://github.com/LinXunFeng/LXFProtocolTool (opens new window),功能强大且简单易用。
好了,开源不易,如果你也觉得这个库好用,请不吝给个 Star
👍
本篇到此结束,感谢大家的支持,我们下次再见! 👋
![](https://cdn.jsdelivr.net/gh/FullStackAction/PicBed@resource/image/FSA_QR_bottom.png)
- 01
- Flutter - 升级到3.24后页面还会多次rebuild吗?🧐08-11
- 02
- Flutter - 聊天键盘与面板丝滑切换的强势升级 🍻08-04
- 03
- Android - 云游戏本地悬浮输入框实现07-07