浅析 Flutter 与 iOS 的视图桥梁

flutter create --template=plugin -i objc -a java platform_view

import 'package:flutter/material.dart';import 'package:flutter/services.dart';
const String singleColor = "singleColor";
class ColorView extends StatefulWidget { @override _ColorViewState createState() => _ColorViewState();}
class _ColorViewState extends State<ColorView> { /// 平台通道,消息使用平台通道在客户端（UI）和宿主（平台）之间传递 MethodChannel _channel;
 @override Widget build(BuildContext context) { return UiKitView( // 视图类型，作为唯一标识符 viewType: singleColor, // 创建参数：将会传递给 iOS 端侧, 可以传递任意类型参数 creationParams: "yellow", // 用于将creationParams编码后再发送到平台端。 // 这里使用Flutter标准二进制编码 creationParamsCodec: StandardMessageCodec(), // 原生视图创建回调 onPlatformViewCreated: _onPlatformViewCreated, ); }
 /// 原生视图创建回调操作 /// id 是原生视图唯一标识符 void _onPlatformViewCreated(int id) { // 每个 id 对应创建唯一的平台通道 _channel = MethodChannel('singleColor_$id'); // 设置平台通道的响应函数 _channel.setMethodCallHandler(_handleMethod); }
 /// 平台通道的响应函数 Future<void> _handleMethod(MethodCall call) async { /// 视图没被装载的情况不响应操作 if (!mounted) { return Future.value(); } switch (call.method) { default: throw UnsupportedError("Unrecognized method"); } }}

cd platform_view/example; flutter build ios --debug --no-codesign

Pods/Development Pods/platform_view/../../example/ios/.symlinks/plugins/platform_view/ios/Classes

#import "PlatformViewPlugin.h"#import "PlatfromViewFactory.h"
@implementation PlatformViewPlugin
/// 注册插件/// @param registrar 提供应用程序上下文和注册回调的方法+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar { // 注册视图工厂 // 绑定工厂唯一标识符这里与 Flutter UIKitView 所使用 viewType 一致 [registrar registerViewFactory:[[PlatfromViewFactory alloc] initWithMessenger:[registrar messenger]] withId:@"singleColor"];}
@end

#import <Foundation/Foundation.h>#import <Flutter/Flutter.h>
NS_ASSUME_NONNULL_BEGIN
@interface PlatfromViewFactory : NSObject<FlutterPlatformViewFactory>
/// 初始化视图工厂/// @param messager 用于与 Flutter 传输二进制消息通信- (instancetype)initWithMessenger:(NSObject<FlutterBinaryMessenger> *)messager;
@end
NS_ASSUME_NONNULL_END

#import "PlatfromViewFactory.h"#import "PlatformView.h"
@interface PlatfromViewFactory ()
/// 用于与 Flutter 传输二进制消息通信@property (nonatomic, strong) NSObject<FlutterBinaryMessenger> *messenger;
@end
@implementation PlatfromViewFactory
- (instancetype)initWithMessenger:(NSObject<FlutterBinaryMessenger> *)messager { self = [super init]; if (self) { self.messenger = messager; } return self;}
#pragma mark - FlutterPlatformViewFactory
/// 创建一个“FlutterPlatformView”/// 由iOS代码实现，该代码公开了一个用于嵌入Flutter应用程序的“UIView”。/// 这个方法的实现应该创建一个新的“UIView”并返回它。/// @param frame Flutter通过其布局widget来计算得来/// @param viewId 视图的唯一标识符，创建一个 UIKitView 该值会+1/// @param args 对应Flutter 端UIKitView的creationParams参数- (nonnull NSObject<FlutterPlatformView> *)createWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id _Nullable)args { PlatformView *platformView = [[PlatformView alloc] initWithWithFrame:frame viewIdentifier:viewId arguments:args binaryMessenger:self.messenger]; return platformView;}
/// 使用Flutter标准二进制编码- (NSObject<FlutterMessageCodec> *)createArgsCodec { return [FlutterStandardMessageCodec sharedInstance];}
@end

#import <Foundation/Foundation.h>#import <Flutter/Flutter.h>
NS_ASSUME_NONNULL_BEGIN
@interface PlatformView : NSObject<FlutterPlatformView>
- (instancetype)initWithWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id _Nullable)args binaryMessenger:(NSObject<FlutterBinaryMessenger>*)messenger;
@end
NS_ASSUME_NONNULL_END

#import "PlatformView.h"
@interface PlatformView ()
/// 视图@property (nonatomic, strong) UIView *yellowView;
/// 平台通道@property (nonatomic, strong) FlutterMethodChannel *channel;
@end
@implementation PlatformView
- (instancetype)initWithWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id _Nullable)args binaryMessenger:(NSObject<FlutterBinaryMessenger>*)messenger { if ([super init]) { /// 初始化视图 self.yellowView = [[UIView alloc] init]; self.yellowView.backgroundColor = UIColor.yellowColor;  /// 这里的channelName是和Flutter 创建MethodChannel时的名字保持一致的，保证一个原生视图有一个平台通道传递消息 NSString *channelName = [NSString stringWithFormat:@"singleColor_%lld", viewId]; self.channel = [FlutterMethodChannel methodChannelWithName:channelName binaryMessenger:messenger]; // 处理 Flutter 发送的消息事件 [self.channel setMethodCallHandler:^(FlutterMethodCall *call, FlutterResult result) { if ([call.method isEqualToString:@""]) {  } }]; } return self;}
#pragma mark - FlutterPlatformView/// 返回真正的视图- (UIView *)view { return self.yellowView;}
@end

import 'package:flutter/material.dart';import 'package:platform_view/color_view.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState();}
class _MyAppState extends State<MyApp> { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('PlatformView Plugin'), ), body: Center( // 由于原生视图的大小由父 Widget 决定, // 这里添加 Container 作为父 Widget 并设置宽高为 100 child: Container( width: 100.0, height: 100.0, child: ColorView(), ), ), ), ); }}

<key>io.flutter.embedded_views_preview</key><true/>

// The name of the Info.plist flag to enable the embedded iOS views preview.const char* const kEmbeddedViewsPreview = "io.flutter.embedded_views_preview";
bool IsIosEmbeddedViewsPreviewEnabled() { return [[[NSBundle mainBundle] objectForInfoDictionaryKey:@(kEmbeddedViewsPreview)] boolValue];}

ExternalViewEmbedder* IOSSurfaceSoftware::GetExternalViewEmbedder() { if (IsIosEmbeddedViewsPreviewEnabled()) { return this; } else { return nullptr; }}

if (flutter::IsIosEmbeddedViewsPreviewEnabled()) { // Embedded views requires the gpu and the platform views to be the same. // The plan is to eventually dynamically merge the threads when there's a // platform view in the layer tree. // For now we use a fixed thread configuration with the same thread used as the // gpu and platform task runner. // TODO(amirh/chinmaygarde): remove this, and dynamically change the thread configuration. // https://github.com/flutter/flutter/issues/23975
 flutter::TaskRunners task_runners(threadLabel.UTF8String, // label fml::MessageLoop::GetCurrent().GetTaskRunner(), // platform fml::MessageLoop::GetCurrent().GetTaskRunner(), // gpu _threadHost.ui_thread->GetTaskRunner(), // ui _threadHost.io_thread->GetTaskRunner() // io ); // Create the shell. This is a blocking operation. _shell = flutter::Shell::Create(std::move(task_runners), // task runners std::move(settings), // settings on_create_platform_view, // platform view creation on_create_rasterizer // rasterzier creation ); } else { flutter::TaskRunners task_runners(threadLabel.UTF8String, // label fml::MessageLoop::GetCurrent().GetTaskRunner(), // platform _threadHost.gpu_thread->GetTaskRunner(), // gpu _threadHost.ui_thread->GetTaskRunner(), // ui _threadHost.io_thread->GetTaskRunner() // io ); // Create the shell. This is a blocking operation. _shell = flutter::Shell::Create(std::move(task_runners), // task runners std::move(settings), // settings on_create_platform_view, // platform view creation on_create_rasterizer // rasterzier creation ); }

void FlutterPlatformViewsController::OnCreate(FlutterMethodCall* call, FlutterResult& result) { ... NSDictionary<NSString*, id>* args = [call arguments]; // 获取 viewid long viewId = [args[@"id"] longValue]; // 获取 viewType std::string viewType([args[@"viewType"] UTF8String]); ... // 通过 viewType 获取视图工厂 NSObject<FlutterPlatformViewFactory>* factory = factories_[viewType].get(); ... id params = nil; // 解码参数 if ([factory respondsToSelector:@selector(createArgsCodec)]) { NSObject<FlutterMessageCodec>* codec = [factory createArgsCodec]; if (codec != nil && args[@"params"] != nil) { FlutterStandardTypedData* paramsData = args[@"params"]; params = [codec decode:paramsData.data]; } } // 通过视图工厂创建嵌入视图 NSObject<FlutterPlatformView>* embedded_view = [factory createWithFrame:CGRectZero viewIdentifier:viewId arguments:params]; views_[viewId] = fml::scoped_nsobject<NSObject<FlutterPlatformView>>([embedded_view retain]);
 // 将嵌入视图添加到FlutterTouchInterceptingView中， // FlutterTouchInterceptingView主要负责处理手势转发和拒绝部分手势， FlutterTouchInterceptingView* touch_interceptor = [[[FlutterTouchInterceptingView alloc] initWithEmbeddedView:embedded_view.view flutterViewController:flutter_view_controller_.get()] autorelease];
 // 存储视图 touch_interceptors_[viewId] = fml::scoped_nsobject<FlutterTouchInterceptingView>([touch_interceptor retain]); root_views_[viewId] = fml::scoped_nsobject<UIView>([touch_interceptor retain]);
 result(nil);}