Flutter Platform View 使用及原理简析

什么是 platform view？

由于 Flutter 诞生于 Android 、iOS 非常成熟的时代背景，为了能让一些现有的 native 控件直接引用到 Flutter app 中，Flutter 团队提供了 AndroidView 、UIKitView 两个 widget 来满足需求，比如说 Flutter 中的 Webview、MapView，暂时无需使用 Flutter 重新开发一套。

其实 platform view 就是 AndroidView 和 UIKitView 的总称，允许将 native view 嵌入到了 flutter widget 体系中，完成 Datr 代码对 native view 的控制。

简单使用

此处仅是简单使用，有很多不合理的代码，目的仅是让初学者能完成展示，后面会有具体的 framework 代码分析，及官方维护的 platform view 的分析。

先看一下效果吧

image image

存在与 native 交互的代码，建议用一个 plugin 来实现内部逻辑。

Plugin: exposing an Android or iOS API for developers

Flutter 侧

创建 Flutter plugin （建议使用 Android Studio），如果使用命令行，可以执行如下命令：

flutter create --org net.loosash --template = plugin share_platform_plugin

接下来在我们的插件工程里创建一个 widget 用来包裹 platform view。便于使用

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart';

/// 这里使用了 statelessWidget
class PlatformTextWidget extends StatelessWidget {
  PlatformTextWidget({this.text});

  final String text;

  @override
  Widget build(BuildContext context) {
    // 根据运行平台判断执行代码
    if (defaultTargetPlatform == TargetPlatform.android) {
      return AndroidView(
        // 在 native 中的唯一标识符，需要与 native 侧的值相同
        viewType: "platform_text_view",
        // 在创建 AndroidView 的同时，可以传递参数
        creationParams: <String, dynamic>{"text": text},
        // 用来编码 creationParams 的形式，可选 [StandardMessageCodec], [JSONMessageCodec], [StringCodec], or [BinaryCodec]
        // 如果存在 creationParams，则该值不能为null
        creationParamsCodec: const StandardMessageCodec(),
      );
    } else if (defaultTargetPlatform == TargetPlatform.iOS) {
      return UiKitView(
        viewType: "platform_text_view",
        creationParams: <String, dynamic>{"text": text},
        creationParamsCodec: const StandardMessageCodec(),
      );
    } else {
      return Text("不支持的平台");
    }
  }
}

iOS 侧

在编辑Xcode中的iOS平台代码之前，首先确保代码至少已构建过一次。在创建的 plugin/example 目录下执行 build，如下：

cd share_platform_plugin/example
flutter build ios --no-codesign
或者执行 pod install

然后使用 Xcode 打开 share_platform_plugin/example/ios/Runner.xcworkspace，plugin 相关的代码目录很深，在 Pods/Development Pods/share_platform_plugin 内部，具体找到 SharePlatformPlugin.h 与 SharePlatformPlugin.m 目录即位我们操作的目录。

接下来我们先创建需要展示的 View ，这里仅以一个 UILabel 为例。

IOSTextView.h

#import <Foundation/Foundation.h>
#import <Flutter/Flutter.h>

NS_ASSUME_NONNULL_BEGIN

@interface IOSTextView : NSObject<FlutterPlatformView>

- (instancetype)initWithFrame:(CGRect)frame
                   viewIdentifier:(int64_t)viewId
                        arguments:(id _Nullable)args
                  binaryMessenger:(NSObject<FlutterBinaryMessenger>*)messenger;
@end

NS_ASSUME_NONNULL_END

IOSTextView.m

#import <Foundation/Foundation.h>
#import "IOSTextView.h"

@implementation IOSTextView{
    int64_t _viewId;
    FlutterMethodChannel* _channel;
    UILabel * _uiLabel;
}


- (instancetype)initWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id)args binaryMessenger:(NSObject<FlutterBinaryMessenger> *)messenger{
    
    NSString *text = @"iOS端UILabel";

    if ([args isKindOfClass:[NSDictionary class]]) {
        NSDictionary *params = (NSDictionary *)args;
        if([[params allKeys] containsObject:@"text"]){
            if ([[params valueForKey:@"text"] isKindOfClass:[NSString class]]) {
                text= [params valueForKey:@"text"];
            }
        }
    }
    _uiLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    _uiLabel.textAlignment = NSTextAlignmentCenter;
    _uiLabel.text = text;
    _uiLabel.font = [UIFont systemFontOfSize:30];
    return self;
}

-(UIView *)view{
    return _uiLabel;
}

@end

然后创建 FlutterPlatformViewFactory

SharePlatformViewFactory.h

#import <Foundation/Foundation.h>
#import <Flutter/Flutter.h>

NS_ASSUME_NONNULL_BEGIN

@interface SharePlatformViewFactory : NSObject<FlutterPlatformViewFactory>

- (instancetype)initWithMessenger:(NSObject<FlutterBinaryMessenger>*)messager;

-(NSObject<FlutterMessageCodec> *)createArgsCodec;

-(NSObject<FlutterPlatformView> *)createWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id)args;

@end
NS_ASSUME_NONNULL_END

SharePlatformViewFactory.m

#import "SharePlatformViewFactory.h"
#import "IOSTextView.h"

@implementation SharePlatformViewFactory{
    NSObject<FlutterBinaryMessenger>*_messenger;
}

- (instancetype)initWithMessenger:(NSObject<FlutterBinaryMessenger> *)messager{
    self = [super init];
    if (self) {
        _messenger = messager;
    }
    return self;
}

-(NSObject<FlutterMessageCodec> *)createArgsCodec{
    return [FlutterStandardMessageCodec sharedInstance];
}

-(NSObject<FlutterPlatformView> *)createWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id)args{
    IOSTextView *iosTextView = [[IOSTextView alloc] initWithFrame:frame viewIdentifier:viewId arguments:args binaryMessenger:_messenger];
    return iosTextView;
}

@end

接下来在 SharePlatformPlugin.m 中添加我们创建 SharePlatformViewFactory 的注册。

#import "SharePlatformPlugin.h"
#import "SharePlatformViewFactory.h"

@implementation SharePlatformPlugin
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
  FlutterMethodChannel* channel = [FlutterMethodChannel
      methodChannelWithName:@"share_platform_plugin"
            binaryMessenger:[registrar messenger]];
  SharePlatformPlugin* instance = [[SharePlatformPlugin alloc] init];
  [registrar addMethodCallDelegate:instance channel:channel];
    // 添加注册我们创建的 view ，注意这里的 withId 需要和 flutter 侧的值相同
    [registrar registerViewFactory:[[SharePlatformViewFactory alloc] initWithMessenger:registrar.messenger] withId:@"platform_text_view"];

}

- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
  if ([@"getPlatformVersion" isEqualToString:call.method]) {
    result([@"iOS " stringByAppendingString:[[UIDevice currentDevice] systemVersion]]);
  } else {
    result(FlutterMethodNotImplemented);
  }
}

@end

最后，还需要在 Flutter 项目中的 ios/Runner/info.plist 中增加，就是运行 flutter 的项目

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

iOS侧就完成了。

Android 侧

直接使用 Android Studio 打开 plugin 中的 android 目录，share_platform_plugin/android

接下来我们先创建需要展示的 View ，这里仅以一个 TextView 为例。

AndroidTextView.kt

class AndroidTextView(context: Context,
                      messenger: BinaryMessenger,
                      id: Int?,
                      params: Map<String, Any>?) : PlatformView {
    private val mAndroidTextView: TextView = TextView(context)
    init {
        val text = params?.get("text") as CharSequence?

        mAndroidTextView.text = if (text == null) {
            text
        } else {
            "android端TextView"
        }
        
        mAndroidTextView.textSize = 30f
    }
    override fun getView(): View = mAndroidTextView
    override fun dispose() {}
}

创建 SharePlatformViewFactory.kt

class SharePlatformViewFactory(private val messenger: BinaryMessenger)
    : PlatformViewFactory(StandardMessageCodec.INSTANCE) {
    
    override fun create(context: Context, id: Int, args: Any?): PlatformView {
        val params = args?.let { args as Map<String, Any> }
        return AndroidTextView(context, messenger, id, params)

    }
}

最后，在 SharePlatformPlugin 中添加我们创建 SharePlatformViewFactory 的注册。

class SharePlatformPlugin: MethodCallHandler {
  companion object {
    @JvmStatic
    fun registerWith(registrar: Registrar) {
      val channel = MethodChannel(registrar.messenger(), "share_platform_plugin")
      channel.setMethodCallHandler(SharePlatformPlugin())
      // 添加注册我们创建的 view ，注意这里的 withId 需要和 flutter 侧的值相同
      registrar.platformViewRegistry().registerViewFactory("platform_text_view", SharePlatformViewFactory(registrar.messenger()))
    }
  }

  override fun onMethodCall(call: MethodCall, result: Result) {
    if (call.method == "getPlatformVersion") {
      result.success("Android ${android.os.Build.VERSION.RELEASE}")
    } else {
      result.notImplemented()
    }
  }
}

这样 Andorid 侧的代码就完成了。

Flutter项目中的使用

在 Flutter 工程中 pubspec.yaml 引入该 plugin 。

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  # 下面是对我们新建插件的依赖
  share_platform_plugin:
    path: ../share_platform_plugin

执行 Packages get

flutter package get

在需要展示的地方和正常的 widget 一样使用我们自己创建的 PlatformTextWidget

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:share_platform_plugin/widget/platform_text_widget.dart';

class TextPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("native text"),
      ),
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Text("这里是flutter的Text"),
            Expanded(
              child: PlatformTextWidget(text:"123"),
            ),
            Text("这里是flutter的Text"),
          ],
        ),
      ),
    );
  }
}

发现问题

如果上面的代码你自己写一遍，你就会发现存在很多的问题。

1. id 在对应的端上没有被使用，可以用来做什么？
2. 这里的 PlatformTextWidget 被 Expanded 包裹着，如果不包裹就会出现超出边界的错误，那么这个 Widget 的大小是怎么控制的呢？
3. platform view 的绘制是在 native 侧完成的还是在 flutter 侧完成的呢？

带着问题，我们看一遍源码，看看是否能找到相关的答案。

源码分析

先来看看 AndroidView 吧

// 继承了 StatefulWidget
class AndroidView extends StatefulWidget {
  const AndroidView({
    Key key,
    @required this.viewType,
    this.onPlatformViewCreated,
    this.hitTestBehavior = PlatformViewHitTestBehavior.opaque,
    this.layoutDirection,
    this.gestureRecognizers,
    this.creationParams,
    this.creationParamsCodec,
  }) : assert(viewType != null),
       assert(hitTestBehavior != null),
       assert(creationParams == null || creationParamsCodec != null),
       super(key: key);

  /// 嵌入Android视图类型的唯一标识符 
  final String viewType;

  /// platform view 创建完成的回调
  final PlatformViewCreatedCallback onPlatformViewCreated;

    /// hit测试期间的行为
  final PlatformViewHitTestBehavior hitTestBehavior;

  /// 视图的文本方向
  final TextDirection layoutDirection;
  
  /// 用于处理事件冲突，对事件进行分发管理相关操作
  final Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers;

  /// 传给 Android 视图的参数，在 Android 视图构造的时候使用
  final dynamic creationParams;

  /// 对 creationParams 参数传递时进行的编码规则，如果 creationParams 不为 null，该值必须不为 null
  final MessageCodec<dynamic> creationParamsCodec;

  @override
  State<AndroidView> createState() => _AndroidViewState();
}

有一些需要注意的点

• AndroidView 仅支持 Android API 20 及以上；
• 在Flutter 中使用 AndroidView 对性能的开销比较大，应该尽可能的避免使用；
• 可以把它当作一个 Flutter 的 wedget 一样的使用。

接下来我们看一下这个 State 对象，关于生命周期的知识，这里给出链接：

Flutter State的生命周期
https://www.jianshu.com/p/f39cf2f7ad78

class _AndroidViewState extends State<AndroidView> {
  // 用于区分不同的 View 来接收不同的操作指令，可以说不同的 id 代表着不同的 view
  // 在_createNewAndroidView方法中被赋值
  // 触发条件：1、在 didChangeDependencies 生命周期中第一次初始化触发
  // 2、didUpdateWidget 生命周期中 传入的viewType 发生改变时触发
  int _id;
  // AndroidView的控制器，和 _id 的赋值场景相同
  AndroidViewController _controller;
  // 布局方向，widget 传入
  TextDirection _layoutDirection;
  // 被初始化的标识，保证_createNewAndroidView()操作以及_focusNode被操作一次
  bool _initialized = false;
  // 获取键盘焦点及事件的相关类
  FocusNode _focusNode;
  // 创建一个空的set集合，如果没有传入gestureRecognizers，则使用该空集合
  static final Set<Factory<OneSequenceGestureRecognizer>> _emptyRecognizersSet =
    <Factory<OneSequenceGestureRecognizer>>{};

  // build 方法，包裹了一层 Focus 用来处理焦点的问题，内部真实使用的是 _AndroidPlatformView，后面单独分析_AndroidPlatformView
  @override
  Widget build(BuildContext context) {
    return Focus(
      focusNode: _focusNode,
      onFocusChange: _onFocusChange,
      child: _AndroidPlatformView(
        controller: _controller,
        hitTestBehavior: widget.hitTestBehavior,
        gestureRecognizers: widget.gestureRecognizers ?? _emptyRecognizersSet,
      ),
    );
  }

  // 保证操作仅执行一次
  void _initializeOnce() {
    if (_initialized) {
      return;
    }
    _initialized = true;
    _createNewAndroidView();
    _focusNode = FocusNode(debugLabel: 'AndroidView(id: $_id)');
  }

  // didChangeDependencies 生命周期回调
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final TextDirection newLayoutDirection = _findLayoutDirection();
    // 布局方向调教，是否有改变
    final bool didChangeLayoutDirection = _layoutDirection != newLayoutDirection;
    _layoutDirection = newLayoutDirection;
    
        // 会多次回调该生命周期，但是保证关键操作仅执行一次
    _initializeOnce();
    // 根据条件判断是否需要重制布局方向
    if (didChangeLayoutDirection) {
      _controller.setLayoutDirection(_layoutDirection);
    }
  }

  // didUpdateWidget 生命周期回调
  @override
  void didUpdateWidget(AndroidView oldWidget) {
    super.didUpdateWidget(oldWidget);

    final TextDirection newLayoutDirection = _findLayoutDirection();
    final bool didChangeLayoutDirection = _layoutDirection != newLayoutDirection;
    _layoutDirection = newLayoutDirection;

    // 根据viewType是否相同来确定是否需要重新创建 AndroidView，生成新的id
    if (widget.viewType != oldWidget.viewType) {
      _controller.dispose();
      _createNewAndroidView();
      return;
    }

    // 布局方向相关
    if (didChangeLayoutDirection) {
      _controller.setLayoutDirection(_layoutDirection);
    }
  }

  TextDirection _findLayoutDirection() {
    assert(widget.layoutDirection != null || debugCheckHasDirectionality(context));
    return widget.layoutDirection ?? Directionality.of(context);
  }

  // 回收资源
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  // 关键的方法，生成 _id 及 _controller,用于传递给_AndroidPlatformView
  void _createNewAndroidView() {
    // 每次对 _id 进行自增，保证唯一性。
    _id = platformViewsRegistry.getNextPlatformViewId();
    // initAndroidView 构造了一个 _controller，将参数端都交给 _controller 保管
    _controller = PlatformViewsService.initAndroidView(
      id: _id,
      viewType: widget.viewType,
      layoutDirection: _layoutDirection,
      creationParams: widget.creationParams,
      creationParamsCodec: widget.creationParamsCodec,
      onFocus: () {
        _focusNode.requestFocus();
      }
    );
    // 添加回调，给开发者使用
    if (widget.onPlatformViewCreated != null) {
      _controller.addOnPlatformViewCreatedListener(widget.onPlatformViewCreated);
    }
  }

  // 焦点变更
  void _onFocusChange(bool isFocused) {
    if (!_controller.isCreated) {
      return;
    }
    if (!isFocused) {
      _controller.clearFocus().catchError((dynamic e) {
       if (e is MissingPluginException) {
         return;
       }
      });
      return;
    }
    // 通过 flutter engin 来实实现焦点变更对 native view 的处理
    SystemChannels.textInput.invokeMethod<void>(
      'TextInput.setPlatformViewClient',
      _id,
    ).catchError((dynamic e) {
      if (e is MissingPluginException) {
        return;
      }
    });
  }
}

小结一下：

我们解决解决了如下问题：

这里我们发现了 id 的作用，当创建的时候，分配一个 id，在 viewType 改变的时候从新分配，其实就是对应 native 侧创建 view 的时候，所以可以通过 id 来保证通过 channel 来和不同 view 进行通信，解决 view 的区分处理。

我们又遇到了新的问题：

AndroidViewController、_AndroidPlatformView都做了什么？

我们先来分析一下 AndroidViewController 会对我们上面的问题和 _AndroidPlatformView 的分析有帮助。

这里会有 Texture 纹理相关的知识，这里不做分析，有兴趣可以查看一下相关文章

Flutter外接纹理
https://zhuanlan.zhihu.com/p/42566807

// AndroidViewController 是通过 PlatformViewsService.initAndroidView 方法创建的，上面有的分析过程里有
class AndroidViewController {
  AndroidViewController._(
    this.id,
    String viewType,
    dynamic creationParams,
    MessageCodec<dynamic> creationParamsCodec,
    TextDirection layoutDirection,
  ) : assert(id != null),
      assert(viewType != null),
      assert(layoutDirection != null),
      assert(creationParams == null || creationParamsCodec != null),
      _viewType = viewType,
      _creationParams = creationParams,
      _creationParamsCodec = creationParamsCodec,
      _layoutDirection = layoutDirection,
      _state = _AndroidViewState.waitingForSize;


  // 对应了很多 android 中的点击事件 MotionEvent 相关
  // [MotionEvent.ACTION_DOWN]
  static const int kActionDown =  0;
    // [MotionEvent.ACTION_UP]
  static const int kActionUp =  1;
  // [MotionEvent.ACTION_MOVE]
  static const int kActionMove = 2;
  // [MotionEvent.ACTION_CANCEL]
  static const int kActionCancel = 3;
  // [MotionEvent.ACTION_POINTER_DOWN]
  static const int kActionPointerDown =  5;
  // [MotionEvent.ACTION_POINTER_UP]
  static const int kActionPointerUp =  6;
  // 布局方向相关
  // [View.LAYOUT_DIRECTION_LTR]
  static const int kAndroidLayoutDirectionLtr = 0;
  // [View.LAYOUT_DIRECTION_RTL]
  static const int kAndroidLayoutDirectionRtl = 1;

  // 标识 id 上面已经分析过了
  final int id;

  // native 侧注册的 viewType 字段
  final String _viewType;

  // 在创建 andorid 端 view 的时候（下文 _create方法），返回_textureId。
  // 该 id 是在 native 侧渲染完成后绘图数据对应的id，可以直接在GPU中找到并直接使用
  // Flutter 的 Framework 层最后会递交给 Engine 层一个 layerTree ，包含了此处的 _textureId，最终在绘制的时候，skia 会直接在 GPU 中根据 textureId 找到相应的绘制数据，并将其绘制到屏幕上。
  int _textureId;
  // _textureId 的 get 方法
  int get textureId => _textureId;

  TextDirection _layoutDirection;

  // 枚举状态
  _AndroidViewState _state;

  // 参数
  dynamic _creationParams;

  // 编码类
  MessageCodec<dynamic> _creationParamsCodec;

  // 回调集合
  final List<PlatformViewCreatedCallback> _platformViewCreatedCallbacks = <PlatformViewCreatedCallback>[];

  /// 获取 view 的 create 状态
  bool get isCreated => _state == _AndroidViewState.created;

  void addOnPlatformViewCreatedListener(PlatformViewCreatedCallback listener) {
    assert(listener != null);
    assert(_state != _AndroidViewState.disposed);
    _platformViewCreatedCallbacks.add(listener);
  }

  void removeOnPlatformViewCreatedListener(PlatformViewCreatedCallback listener) {
    assert(_state != _AndroidViewState.disposed);
    _platformViewCreatedCallbacks.remove(listener);
  }

  // Disposes the Android view.
  // 通过 engine 调用了 native 的 dispose 方法、清空回调集合、disposed 当前 widget 的 state
  Future<void> dispose() async {
    if (_state == _AndroidViewState.creating || _state == _AndroidViewState.created)
      await SystemChannels.platform_views.invokeMethod<void>('dispose', id);
    _platformViewCreatedCallbacks.clear();
    _state = _AndroidViewState.disposed;
  }

  // 设置 Android View 的大小，通过 engine 调用了 native 的 resize 方法
  Future<void> setSize(Size size) async {
    assert(_state != _AndroidViewState.disposed, 'trying to size a disposed Android View. View id: $id');

    assert(size != null);
    assert(!size.isEmpty);

    if (_state == _AndroidViewState.waitingForSize)
      return _create(size);

    await SystemChannels.platform_views.invokeMethod<void>('resize', <String, dynamic>{
      'id': id,
      'width': size.width,
      'height': size.height,
    });
  }

  // 通过 engine 调用了 native 的 setDirection 方法，设置 Android view 方向
  Future<void> setLayoutDirection(TextDirection layoutDirection) async {
    assert(_state != _AndroidViewState.disposed,'trying to set a layout direction for a disposed UIView. View id: $id');

    if (layoutDirection == _layoutDirection)
      return;

    assert(layoutDirection != null);
    _layoutDirection = layoutDirection;

    if (_state == _AndroidViewState.waitingForSize)
      return;

    await SystemChannels.platform_views.invokeMethod<void>('setDirection', <String, dynamic>{
      'id': id,
      'direction': _getAndroidDirection(layoutDirection),
    });
  }

  // 通过 engine 调用了 native 的 clearFocus 方法，清除焦点
  Future<void> clearFocus() {
    if (_state != _AndroidViewState.created) {
      return null;
    }
    return SystemChannels.platform_views.invokeMethod<void>('clearFocus', id);
  }

  // 获得布局方向
  static int _getAndroidDirection(TextDirection direction) {
    assert(direction != null);
    switch (direction) {
      case TextDirection.ltr:
        return kAndroidLayoutDirectionLtr;
      case TextDirection.rtl:
        return kAndroidLayoutDirectionRtl;
    }
    return null;
  }

  // 通过 engine 调用 native 的 touch 方法，将事件发送给 android view 处理
  Future<void> sendMotionEvent(AndroidMotionEvent event) async {
    await SystemChannels.platform_views.invokeMethod<dynamic>(
        'touch',
        event._asList(id),
    );
  }

  /// Creates a masked Android MotionEvent action value for an indexed pointer.
  static int pointerAction(int pointerId, int action) {
    return ((pointerId << 8) & 0xff00) | (action & 0xff);
  }

  // 真正创建 view 的方法，也是通过 engine 调用 native 的 create 方法，传入了 width 和 height
  Future<void> _create(Size size) async {
    final Map<String, dynamic> args = <String, dynamic>{
      'id': id,
      'viewType': _viewType,
      'width': size.width,
      'height': size.height,
      'direction': _getAndroidDirection(_layoutDirection),
    };
    if (_creationParams != null) {
      final ByteData paramsByteData = _creationParamsCodec.encodeMessage(_creationParams);
      args['params'] = Uint8List.view(
        paramsByteData.buffer,
        0,
        paramsByteData.lengthInBytes,
      );
    }
    _textureId = await SystemChannels.platform_views.invokeMethod('create', args);
    _state = _AndroidViewState.created;
    for (PlatformViewCreatedCallback callback in _platformViewCreatedCallbacks) {
      // 遍历、回调
      callback(id);
    }
  }
}

我们看到了 view 的大小由 _create 方法传入，那传入的值是怎么获得的呢？我们先把还没分析的 _AndroidPlatformView 看完再下结论。

class _AndroidPlatformView extends LeafRenderObjectWidget {
  // 将 controller 传进来了，具体没做太多的操作，主要还是通过 controller 来实现的。
  const _AndroidPlatformView({
    Key key,
    @required this.controller,
    @required this.hitTestBehavior,
    @required this.gestureRecognizers,
  }) : assert(controller != null),
       assert(hitTestBehavior != null),
       assert(gestureRecognizers != null),
       super(key: key);

  final AndroidViewController controller;
  final PlatformViewHitTestBehavior hitTestBehavior;
  final Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers;

  // 需要注意的是这两个方法，这里重写了 createRenderObject 方法。
  @override
  RenderObject createRenderObject(BuildContext context) =>
      RenderAndroidView(
        viewController: controller,
        hitTestBehavior: hitTestBehavior,
        gestureRecognizers: gestureRecognizers,
      );

  @override
  void updateRenderObject(BuildContext context, RenderAndroidView renderObject) {
    renderObject.viewController = controller;
    renderObject.hitTestBehavior = hitTestBehavior;
    renderObject.updateGestureRecognizers(gestureRecognizers);
  }
}

我这里先假设大家都知道 Widget、Element、RenderObject之间的关系，如果不是很清晰，这篇文章里有详细的介绍。

Flutter 从加载到显示
https://mp.weixin.qq.com/s/ncViI0KGikPUIZ7BlEHGOA

RenderObject 的最终大小的确定有两种情况，一个是由父节点所指定，一个是根据自己的情况确定。默认的 RenderObject 中有一个 sizedByParent 属性，默认为 false，即根据自身大小确定。这里指定了 RenderObject 为 RenderAndroidView ，我们来看一下这个类，这里就不一行一行的分析了，我们把重点提出来。

  @override
  bool get sizedByParent => true;

所以我们可以得出结论了。

再小结一下：

我们解决解决了剩下的问题：

1、我们了解了 AndroidViewController、_AndroidPlatformView 都做了什么。

2、AndroidView 的大小是由父节点的大小去定的所以上面使用 Expanded 包裹则可以生效，如果不进行包裹，则大小为父控件大小，在 Column 中会出现问题。当 Widget size 小于 View size，Flutter 会进行裁剪。当 Widget size 大于 View size 时，多出来的位置会被背景填充。在 Android 侧，实现了 PlatformView 的 View 会被包裹在 FrameLayout 中，可以对 View 的绘制添加监听，打印出 View 的 parent；

3、platform view 是在 native 侧渲染的，返回给 Flutter 侧一个 _textureId ，通过这个 id Flutter 将 View 直接展示出来。这部分也说明了为什么 platform view 在 Flutter 中的性能开销比较大，整个过程数据需要从 GPU -> CPU -> GPU，这部分的代价是比较大的。

如何开发一个 platform view

其实 Flutter 官方维护了一些 plugin，链接如下：

https://github.com/flutter/plugins

其中的 webview_flutter 、google_maps_flutter 就是通过 platform view，就是一个很好的 demo 。

本文 Demo 地址 https://github.com/loosaSH/flutter-PlatformView

参考资料：

在Flutter中嵌入Native组件的正确姿势
https://yq.aliyun.com/articles/669831?utm_content=m_1000024586

github:Flutter Plugin
https://github.com/flutter/plugins

Flutter 从加载到显示
https://mp.weixin.qq.com/s/ncViI0KGikPUIZ7BlEHGOA

Flutter外接纹理
https://zhuanlan.zhihu.com/p/42566807

Flutter State的生命周期
https://www.jianshu.com/p/f39cf2f7ad78

关注微信公众号，最新技术干货实时推送

image