flutter 取消iOS横竖屏动画

原创

mob64ca12e41d46 2025-02-13 04:58:08 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e41d46的原创作品，请联系作者获取转载授权，否则将追究法律责任

Flutter 取消 iOS 横竖屏动画的实现指南

在 Flutter 中，我们有时可能希望在变换设备方向时，取消默认的屏幕旋转动画。这通常是为了提高用户体验，避免视觉上的突兀。本文将通过一系列清晰的步骤来指导你如何实现这一点。

实现流程概览

步骤	描述
步骤 1	在 Flutter 项目中创建 iOS 特性文件
步骤 2	修改 iOS 配置文件的设置
步骤 3	重写横竖屏转换的方法
步骤 4	运行应用并验证效果

步骤详解

步骤 1：创建 iOS 特性文件

首先，确保你在 Flutter 项目根目录下。进入 ios 目录并找到 Runner.xcworkspace 文件。

步骤 2：修改 iOS 配置文件的设置

打开 Info.plist 文件，并添加以下行：

<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

这个设置将允许应用程序在状态栏外观上进行更大的控制，从而减少屏幕旋转动画。

步骤 3：重写横竖屏转换的方法

在 ios/Runner/AppDelegate.swift 文件中，你需要添加一段代码来取消动画。修改 AppDelegate 类如下：

import UIKit
import Flutter

@UIApplicationMain
class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        // 取消屏幕方向转动的动画
        // 配置支持的方向为纵向或横向，取决于你的需求
        UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
        UINavigationBar.appearance().shadowImage = UIImage()
        UINavigationBar.appearance().isTranslucent = true
            
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }

    override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
        return .all // 或者 .portrait 取决于你的需求
    }
}

代码说明：

UINavigationBar.appearance() 允许我们自定义导航栏外观，取消其动画效果。

在 supportedInterfaceOrientations 方法中，您可以根据需求返回不同的方向，这会影响整个应用。

步骤 4：运行应用并验证效果

现在，你可以回到 Flutter 项目根目录，并在终端中运行以下命令：

flutter run

运行后，你应该会看到应用在手机中旋转时不会出现任何动画效果，转换会更加平滑。

状态图

stateDiagram
    [*] --> 进入 iOS 特性文件创建
    进入 iOS 特性文件创建 --> 修改 iOS 配置文件
    修改 iOS 配置文件 --> 重写横竖屏转换的方法
    重写横竖屏转换的方法 --> 运行应用并验证效果
    运行应用并验证效果 --> [*]