一、混合架构的适用场景

Flutter并非万能药。在已有大规模iOS原生应用的团队中，引入Flutter意味着"增量引入"而非"整体重写"。明确混合架构的边界，是成功的第一步。

适合Flutter承载的场景

  • 独立功能模块：营销活动页、Feed流、列表页等业务相对独立的功能
  • 快速试错功能：需要快速上线验证的业务idea
  • 多端复用模块：iOS/Android同时需要且UI差异小的功能
  • UI定制化要求低：Flutter的像素级一致性在不同平台反而是优势

1.1 混合架构的三种模式

模式特点适用场景
Flutter页面嵌入（FlutterViewController）原生导航栏包裹Flutter页面独立功能模块
原生页面嵌入（FlutterView）Flutter嵌入到原生页面特定区域局部UI复用（如IM气泡、地图）
微前端模式（Flutter Fragment）Flutter完全接管页面路由新开发功能全Flutter化

二、Flutter模块集成到iOS项目

2.1 模块化方案选择

iOS项目集成Flutter有两条路：Flutter混合工程（Flutter Integration）和Flutter Module。前者是Apple官方推荐的方式：

# 步骤1：创建Flutter模块（项目外）
flutter create --org com.example --project-name my_flutter_module my_flutter_module
cd my_flutter_module

# 步骤2：添加iOS平台支持
flutter create --platforms=ios .

# 步骤3：在已有iOS项目中添加Flutter依赖
# 在Podfile中添加：
# flutter_application_path = '../my_flutter_module'
# load_relative_from = ['.ruby_version', 'Gemfile']
# eval(File.read(File.join(flutter_app_path, '.ios', 'Flutter', 'podhelper.rb'))

# 步骤4：运行pod install
pod install

2.2 FlutterViewController 的两种方式

// 方式A：独立路由模式（推荐）
// Flutter完全管理自己的路由栈，嵌入时通过MethodChannel通信

class MyFlutterViewController: FlutterViewController {
    private var methodChannel: FlutterMethodChannel?

    override func viewDidLoad() {
        super.viewDidLoad()
        setupMethodChannel()
    }

    private func setupMethodChannel() {
        methodChannel = FlutterMethodChannel(
            name: "com.example/native_bridge",
            binaryMessenger: self.binaryMessenger
        )

        methodChannel?.setMethodCallHandler { [weak self] call, result in
            switch call.method {
            case "getUserToken":
                // 原生获取Token后传递给Flutter
                let token = UserDefaults.standard.string(forKey: "token")
                result(token)

            case "navigateToNativePage":
                // Flutter请求跳转原生页面
                self?.navigateToNativePage(call.arguments as? [String: Any])
                result(nil)

            default:
                result(FlutterMethodNotImplemented)
            }
        }
    }
}

// Flutter端调用
class NativeBridge {
    static const platform = MethodChannel('com.example/native_bridge');

    static Future getUserToken() async {
        return await platform.invokeMethod('getUserToken');
    }

    static Future navigateToNativePage(Map args) async {
        await platform.invokeMethod('navigateToNativePage', args);
    }
}

三、Platform Channel 双向通信

3.1 MethodChannel（方法调用）

MethodChannel是最常用的双向通信方式，用于请求-响应式的交互：

// iOS端：定义MethodChannel
// NativeBridge.swift
import Flutter

class NativeBridgePlugin: NSObject, FlutterPlugin {
    static func register(with registrar: FlutterPluginRegistrar) {
        let channel = FlutterMethodChannel(
            name: "app.native.bridge",
            binaryMessenger: registrar.messenger()
        )
        let instance = NativeBridgePlugin()
        registrar.addMethodCallDelegate(instance, channel: channel)
    }

    func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
        switch call.method {
        case "getDeviceId":
            result(UIDevice.current.identifierForVendor?.uuidString)

        case "getNativeConfig":
            result(NativeConfigProvider.shared.config)

        case "reportAnalytics":
            guard let args = call.arguments as? [String: Any] else {
                result(FlutterError(code: "INVALID_ARGS", message: nil, details: nil))
                return
            }
            AnalyticsService.shared.track(args)
            result(nil)

        case "showNativeAlert":
            showAlert(args: args, result: result)

        default:
            result(FlutterMethodNotImplemented)
        }
    }
}

// Flutter端：调用Native方法
class NativeBridge {
    static const _channel = MethodChannel('app.native.bridge');

    static Future getDeviceId() async {
        return await _channel.invokeMethod('getDeviceId');
    }

    static Future getConfig() async {
        final result = await _channel.invokeMethod('getNativeConfig');
        return NativeConfig.fromMap(result);
    }
}

3.2 EventChannel（事件流）

EventChannel用于原生向Flutter推送持续性数据流：

// iOS端：实现EventChannel
// 场景：原生推送网络状态变化、位置更新、推送消息

class NetworkStatusStreamHandler: NSObject, FlutterStreamHandler {
    private var eventSink: FlutterEventSink?

    func onListen(withArguments arguments: Any?,
                  eventSink events: @escaping FlutterEventSink) -> FlutterError? {
        self.eventSink = events
        // 监听网络变化
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(networkChanged),
            name: .networkReachabilityChanged,
            object: nil
        )
        return nil
    }

    func onCancel(withArguments arguments: Any?) -> FlutterError? {
        NotificationCenter.default.removeObserver(self)
        eventSink = nil
        return nil
    }

    @objc private func networkChanged(_ notification: Notification) {
        let status = NetworkMonitor.shared.currentStatus
        // 推送到Flutter
        eventSink?(["type": "network", "status": status])
    }
}

// Flutter端：监听事件流
class NetworkStatusListener {
    static const _channel = EventChannel('app.network.status');

    static Stream get statusStream {
        return _channel.receiveBroadcastStream().map((event) => event as Map);
    }
}

// 使用
NetworkStatusListener.statusStream.listen((data) {
    if (data['type'] == 'network') {
        _isOffline = data['status'] == 'offline';
    }
});

四、性能优化与调试

4.1 Flutter视图嵌入原生页面的布局约束

FlutterView嵌入原生视图时，需要设置明确的尺寸约束：

// iOS端：正确设置FlutterView的约束
// 在UIViewController中使用 FlutterView 时，需要设置 frame
let flutterView = FlutterView()
flutterView.frame = CGRect(x: 0, y: 0, width: view.bounds.width, height: 400)
view.addSubview(flutterView)

// 或者使用Auto Layout
flutterView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    flutterView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
    flutterView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    flutterView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    flutterView.heightAnchor.constraint(equalToConstant: 400),
])

// 注意：Flutter无法使用frame = .zero或size = .zero
// 否则Engine初始化会失败

4.2 内存管理与生命周期同步

  • FlutterViewController：与原生VC生命周期一致，可直接使用
  • 独立FlutterView：需要显式调用 lifecycleBinding() 绑定原生生命周期
  • FlutterEngine 复用：多个Flutter页面共享同一个FlutterEngine，避免重复初始化开销

4.3 DevTools 性能调试

// Flutter DevTools 性能分析
// 在Flutter端启用性能覆盖层：
// - Flutter DevTools → Performance
// - 显示UI线程和Raster线程的帧率

// 常用调试命令：
flutter doctor              // 检查环境
flutter clean && flutter pub get  // 清理缓存重新拉取
flutter run --release        // 发布模式性能测试
// 注意：Debug模式性能显著差于Release模式

五、Flutter与iOS原生模块的选择策略

5.1 性能关键场景的原生保留原则

建议保持iOS原生的场景

  • 相机/AR：AVFoundation深度集成，Metal渲染AR内容
  • 复杂手势：多指触控、压力感应、3D Touch
  • 后台处理：Background Modes（音乐、定位、VoIP）
  • 支付/生物识别：Face ID、Touch ID、IAP集成
  • 复杂动画：Core Animation、UIViewPropertyAnimator
  • 复杂列表：UITableView的预估高度、cell复用已达极限的场景

5.2 混合架构的测试策略

  • Flutter部分：Flutter Widget Test + Integration Test（flutter_driver）
  • iOS原生部分：XCTest + UI Test
  • 集成测试：MethodChannel接口的Mock测试，防止接口变更导致Flutter崩溃