Flutter如何支持原生View

news2025/6/7 6:51:57

在 Flutter 中集成原生 View（如 Android 的 SurfaceView、iOS 的 WKWebView）是通过平台视图（Platform View）实现的。这一机制允许在 Flutter UI 中嵌入原生组件，解决了某些场景下 Flutter 自身渲染能力的不足（如高性能视频播放、3D 渲染、复杂地图等）。以下是详细介绍：

一、平台视图的两种实现方式

1. 虚拟平台视图（Virtual Platform Views）

特性：Flutter 直接渲染原生 View，性能较高，支持混合渲染。
适用场景：Android 8.0+（API level 26）和 iOS。
实现方式：使用 AndroidView（Android）或 UiKitView（iOS）。

2. 混合平台视图（Hybrid Composition）

特性：原生 View 独立于 Flutter 渲染树，性能略低但兼容性更好。
适用场景：Android 7.0 及以下版本，或需要与复杂原生组件集成。
实现方式：在 AndroidView 或 UiKitView 中设置 platformViewType 并启用混合模式。

二、基本实现步骤

1. Android 端集成（以 WebView 为例）

// Flutter 代码
import 'package:flutter/material.dart';

class NativeWebView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    if (Theme.of(context).platform == TargetPlatform.android) {
      return AndroidView(
        viewType: 'webview', // 与原生端注册的类型名一致
        creationParams: {'url': 'https://example.com'},
        creationParamsCodec: const StandardMessageCodec(),
      );
    } else if (Theme.of(context).platform == TargetPlatform.iOS) {
      return UiKitView(
        viewType: 'webview',
        creationParams: {'url': 'https://example.com'},
        creationParamsCodec: const StandardMessageCodec(),
      );
    }
    return Text('不支持的平台');
  }
}

// Android 原生代码（Kotlin）
class MainActivity : FlutterActivity() {
  override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
    super.configureFlutterEngine(flutterEngine)
    
    // 注册平台视图工厂
    flutterEngine.platformViewsController.registry
      .registerViewFactory("webview", WebViewFactory())
  }
}

class WebViewFactory : PlatformViewFactory(StandardMessageCodec.INSTANCE) {
  override fun create(context: Context, viewId: Int, args: Any?): PlatformView {
    val creationParams = args as Map<String, Any>?
    return WebViewPlatformView(context, viewId, creationParams)
  }
}

class WebViewPlatformView(
  private val context: Context,
  viewId: Int,
  params: Map<String, Any>?
) : PlatformView {
  private val webView: WebView = WebView(context)
  
  init {
    val url = params?.get("url") as? String ?: "https://example.com"
    webView.settings.javaScriptEnabled = true
    webView.loadUrl(url)
  }
  
  override fun getView(): View = webView
  
  override fun dispose() {
    webView.destroy()
  }
}

2. iOS 端集成（Swift）

// iOS 原生代码（Swift）
import Flutter
import WebKit

class WebViewFactory: NSObject, FlutterPlatformViewFactory {
  private let messenger: FlutterBinaryMessenger
  
  init(messenger: FlutterBinaryMessenger) {
    self.messenger = messenger
    super.init()
  }
  
  func create(withFrame frame: CGRect, viewIdentifier viewId: Int64, arguments args: Any?) -> FlutterPlatformView {
    let params = args as? [String: Any]
    return WebViewPlatformView(frame: frame, viewId: viewId, params: params, messenger: messenger)
  }
  
  func createArgsCodec() -> FlutterMessageCodec & NSObjectProtocol {
    return FlutterStandardMessageCodec.sharedInstance()
  }
}

class WebViewPlatformView: NSObject, FlutterPlatformView {
  private let webView: WKWebView
  
  init(frame: CGRect, viewId: Int64, params: [String: Any]?, messenger: FlutterBinaryMessenger) {
    let config = WKWebViewConfiguration()
    webView = WKWebView(frame: frame, configuration: config)
    
    super.init()
    
    if let urlString = params?["url"] as? String, let url = URL(string: urlString) {
      webView.load(URLRequest(url: url))
    }
  }
  
  func view() -> UIView {
    return webView
  }
}

// 在 AppDelegate 中注册
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    let registrar = self.registrar(forPlugin: "WebViewPlugin")
    registrar?.register(WebViewFactory(messenger: registrar!.messenger()), withId: "webview")
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

三、性能优化与注意事项

1. 性能优化

优先使用虚拟平台视图：在支持的设备上（Android 8.0+、iOS），默认使用 AndroidView/UiKitView，避免混合渲染的开销。
减少重绘：原生 View 的重绘成本较高，避免频繁刷新。
懒加载：在需要显示时才创建，使用后及时释放资源。

2. 注意事项

混合渲染限制：混合平台视图不支持 Flutter 的一些特性（如透明度、变换动画）。
平台差异：同一功能在 Android 和 iOS 上的实现可能不同，需分别处理。
内存管理：确保在组件销毁时释放原生资源（如 dispose() 方法）。

四、常见应用场景

视频播放：集成原生视频播放器（如 Android 的 ExoPlayer、iOS 的 AVPlayer）。
地图组件：嵌入 Google Maps、高德地图等复杂地图控件。
3D 渲染：集成 OpenGL 或 AR 场景。
遗留系统集成：复用已有原生组件，避免重复开发。