FSA全栈行动 FSA全栈行动
首页
  • 移动端文章

    • Android
    • iOS
    • Flutter
  • 学习笔记

    • 《Kotlin快速入门进阶》笔记
    • 《Flutter从入门到实战》笔记
    • 《Flutter复习》笔记
前端
后端
  • 学习笔记

    • 《深入浅出设计模式Java版》笔记
  • 逆向
  • 分类
  • 标签
  • 归档
  • LinXunFeng
  • GitLqr

公众号:FSA全栈行动

记录学习过程中的知识
首页
  • 移动端文章

    • Android
    • iOS
    • Flutter
  • 学习笔记

    • 《Kotlin快速入门进阶》笔记
    • 《Flutter从入门到实战》笔记
    • 《Flutter复习》笔记
前端
后端
  • 学习笔记

    • 《深入浅出设计模式Java版》笔记
  • 逆向
  • 分类
  • 标签
  • 归档
  • LinXunFeng
  • GitLqr
  • AndroidUI

  • Android第三方SDK

  • Android混淆

  • Android仓库

  • Android新闻

  • Android系统开发

  • Android源码

  • Android注解AOP

  • Android脚本

  • AndroidTv开发

  • AndroidNDK

  • Android音视频

  • Android热修复

  • Android性能优化

  • Android云游戏

  • Android插件化

  • iOSUI

  • iOS工具

  • iOS底层原理与应用

  • iOS组件化

  • iOS音视频

  • iOS疑难杂症

  • iOS之Swift

  • iOS之RxSwift

  • iOS开源项目

  • iOS逆向

  • Flutter开发

    • Dart - 抽象类的实例化
    • Flutter - 打印好用的Debug日志
    • Flutter - 混合开发
    • Flutter - 解决混合开发iOS脚本打包遇到的问题
    • Flutter - 低版本在iOS14上遇到的问题与解决方案
    • Flutter - 解决原生弹窗的触摸事件被Flutter响应的问题
    • Flutter - 实现列表上下拉切换header
    • Flutter - 获取ListView当前正在显示的Widget信息
    • Flutter - 列表滚动定位超强辅助库,墙裂推荐!🔥
    • Flutter - 快速实现聊天会话列表的效果,完美💯
    • Flutter - 聊天输入框更新文本时的必备优化点🔖
    • Flutter - 我给官方提PR,解决run命令卡住问题 😃
    • Flutter - 探索run命令到底做了什么 🤔
    • Flutter - 引擎调试(iOS篇)🛠
    • Flutter - 引擎调试bug到提交PR实战 🐞
    • Flutter - 船新升级😱支持观察第三方构建的滚动视图💪
    • Flutter - 瀑布流交替播放视频 🎞
    • Flutter - IM保持消息位置大升级(支持ChatGPT生成式消息) 🤖
    • Flutter - 滚动视图中的表单防遮挡 🗒
    • Flutter - 秒杀1/2曝光统计 📊
    • 一天内加入 Flutter 和 FlutterCandies 两大组织是什么体验 🧐
    • Flutter - 如何快速搓一个微信通讯录列表(azlist) 📓
    • Flutter - 混编项目集成Shorebird热更新🐦(安卓篇)
    • Flutter - 混编项目集成Shorebird热更新🐦(iOS篇)
    • Flutter - 解决返回原生页面时dispose方法未被触发的问题 🐞
    • Flutter - 升级3.19之后页面多次rebuild?🤨
    • Flutter - 热更新 Shorebird 1.0 正式版来了 🐦
    • Flutter - 使用Pigeon实现视频缓存插件 🐌
    • Flutter - 轻松搞定屏幕旋转功能 😎
      • 一、概述
      • 二、集成
      • 三、配置
        • Swift 项目
        • OC 项目
      • 四、使用
      • 五、最后
    • Flutter - 解决Connection closed before full header was received
    • Flutter - 实现聊天键盘与功能面板的丝滑切换 🍻
    • Flutter - 支持观察NestedScrollView,兼容性更强 😈
    • Flutter - 聊天键盘与面板丝滑切换的强势升级 🍻
    • Flutter - 升级到3.24后页面还会多次rebuild吗?🧐
    • Flutter - 轻松实现PageView卡片偏移效果
    • Flutter - 轻松搞定炫酷视差(Parallax)效果
    • Flutter - 危!3.24版本苹果审核被拒!
    • Flutter - 子部件任意位置观察滚动数据
    • Flutter - iOS编译加速
    • Flutter - Xcode16 还原编译速度
  • 移动端
  • Flutter开发
LinXunFeng
2024-06-02
目录

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

欢迎关注微信公众号:[FSA全栈行动 👋]

# 一、概述

在常规的纯 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 👍

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

#Dart#Flutter#屏幕旋转
Flutter - 使用Pigeon实现视频缓存插件 🐌
Flutter - 解决Connection closed before full header was received

← Flutter - 使用Pigeon实现视频缓存插件 🐌 Flutter - 解决Connection closed before full header was received→

最近更新
01
Flutter - Xcode16 还原编译速度
04-05
02
AI - 免费的 Cursor 平替方案
03-30
03
Android - 2025年安卓真的闭源了吗
03-28
更多文章>
Theme by Vdoing | Copyright © 2020-2025 FSA全栈行动
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×