【Flutter原理】平台视图整合Hybrid composition分析

本文链接：https://blog.csdn.net/m0_56604447/article/details/137243173

1. 新建原生工程和Flutter Module

新建原生宿主工程’‘hello_flutter_composition’’

打开原生宿主工程，通过AS新建Flutter Module：’‘flutter_module_composition’’

新建完成之后，宿主工程settings.gradle和app/build.gradle会自动加入 flutter_module_composition和flutter_module_composition/Flutter的导入。如图：

在这里插入图片描述

2. 新建native_view_example.dart文件

在flutter_module_composition工程lib目录下新建native_view_example.dart文件

添加代码如下：

import ‘package:flutter/foundation.dart’;

import ‘package:flutter/gestures.dart’;

import ‘package:flutter/material.dart’;

import ‘package:flutter/rendering.dart’;

import ‘package:flutter/services.dart’;

class NativeViewExample extends StatefulWidget {

const NativeViewExample({Key key}) : super(key: key);

@override

_NativeViewExampleState createState() => _NativeViewExampleState();

}

class _NativeViewExampleState extends State {

@override

Widget build(BuildContext context) {

// This is used in the platform side to register the view.

final String viewType = ‘platform-view-type’;

// Pass parameters to the platform side.

final Map<String, dynamic> creationParams = <String, dynamic>{};

return PlatformViewLink(

viewType: viewType,

surfaceFactory:

(BuildContext context, PlatformViewController controller) {

return AndroidViewSurface(

controller: controller as AndroidViewController,

gestureRecognizers: const <Factory>{},

hitTestBehavior: PlatformViewHitTestBehavior.opaque,

);

onCreatePlatformView: (PlatformViewCreationParams params) {

return PlatformViewsService.initSurfaceAndroidView(

id: params.id,

viewType: viewType,

layoutDirection: TextDirection.ltr,

creationParams: creationParams,

creationParamsCodec: StandardMessageCodec(),

onFocus: () {

params.onFocusChanged(true);

} ,

)

…addOnPlatformViewCreatedListener(params.onPlatformViewCreated)

…create();

);

}

3. 在main.dart文件中显示

在main.dart中添加上面新建widget显示

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Text(

‘You have pushed the button this many times:’,

Text(

‘$_counter’,

style: Theme.of(context).textTheme.headline4,

// 新建显示

Container(

padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10),

width: 130.0,

height: 100.0,

child: NativeViewExample(),

)

floatingActionButton: FloatingActionButton(

onPressed: _incrementCounter,

tooltip: ‘Increment’,

child: Icon(Icons.add),

), // This trailing comma makes auto-formatting nicer for build methods.

);

}

到了这里，flutter代码基本上修改完毕

再来看看原生工程的修改。

4. 新建NativeView

在flutter_module_composition/.android/Flutter下，新建NativeView，实现PlatformView接口，如：

package com.hb.flutter;

//省略各种导包…

public class NativeView implements PlatformView {

@NonNull

private final TextView textView;

NativeView(@NonNull Context context, int id, @Nullable Map<String, Object> creationParams) {

textView = new TextView(context);

textView.setTextSize(25);

textView.setGravity(Gravity.CENTER);

textView.setBackgroundColor(Color.rgb(100,200,200));

textView.setText(“native view”);

}

@NonNull

@Override

public View getView() {

return textView;

}

@Override

public void dispose() {

}

5. 新建NativeViewFactory

还需要创建一个工厂类来创建之前创建的实例 NativeView

package com.hb.flutter;

//省略各种导包…

public class NativeViewFactory extends PlatformViewFactory {

@NonNull

private final BinaryMessenger messenger;

@NonNull private final View containerView;

public NativeViewFactory(@NonNull BinaryMessenger messenger, @NonNull View containerView) {

super(StandardMessageCodec.INSTANCE);

this.messenger = messenger;

this.containerView = containerView;

}

@NonNull

@Override

public PlatformView create(@NonNull Context context, int id, @Nullable Object args) {

final Map<String, Object> creationParams = (Map<String, Object>) args;

return new NativeView(context, id, creationParams);

}

最后，注册平台视图。这可以在应用程序或插件中完成。

6. 注册平台视图

在宿主工程里面新建平台视图，修改MainActivity方法如下

public class MainActivity extends FlutterActivity {

@Override

public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {

flutterEngine

.getPlatformViewsController()

.getRegistry()

.registerViewFactory(“platform-view-type”, new NativeViewFactory(null, null));

}

最后效果如图：

在这里插入图片描述

大功告成，中间显示的’Rendered on a native Android view’就是来着Android的平台视图。

我们来看一下Flutter Inspector里面视图层次展示图片：

在这里插入图片描述

NativeViewExample，PlatformViewLink，AndroidViewSurface就是我们展示之后层次结构。

下面在详细分析。

Hybrid Composition原理分析

=====================================================================================

FlutterImageView分析

要分析Hybrid composition不得不先了解一下：FlutterImageView。

FlutterImageView并不是一个真正的ImageView

事实上Hybrid composition上混合原生控件所需的突出合成都是通过FlutterImageView来实现的。FlutterImageView原版就是一个原生的View，我们来看源码：

// FlutterImageView 适用于开发人员需要渲染 Flutter UI，但也需要渲染交互式 io.flutter.plugin.platform.PlatformView 的情况。

public class FlutterImageView extends View implements RenderSurface {

@NonNull private ImageReader imageReader;

@Nullable private Queue imageQueue;

@Nullable private Image currentImage;

@Nullable private Bitmap currentBitmap;

@Nullable private FlutterRenderer flutterRenderer;

//从imageRender读取bitmap绘制到canvas上

@Override

protected void onDraw(Canvas cavas) {

super.onDraw(canvas);

if (!imageQueue.isEmpty()) {

if (currentImage != null) {

currentImage.close();

}

currentImage = imageQueue.poll();

updateCurrentBitmap();

}

if (currentBitmap != null) {

canvas.drawBitmap(currentBitmap, 0, 0, null);

}

源码基本上没什么可将，我们能看到FlutterImageView本质上是一个普通的原生View，它实现了RenderSurface接口，从而实现类似FlutterSurfaceView的部分能力。

下面来了解一下FlutterImageView中的几个关键类作用：ImageReader,Image,Bitmap

ImageReader:ImageReader 类允许应用程序直接访问渲染到 Surface 中的图像数据,图像数据封装在Image对象中，可以同时访问多个这样的对象，最多可达maxImages构造函数参数指定的数量。通过其 Surface 发送到 ImageReader 的新图像将排队，直到通过 AcquireLatestImage 或 AcquireNextImage 调用访问。
Image：Image就是包含了ByteBuffers的像素数据
Bitmap:Bitmap就是将Image转化为可以绘制的位图

这样我们就能理解FlutterImageView，其实就是通过ImageReader读取Surface的数据，然后通过Bitmap绘制出来。Surface的数据从哪来呢？其实跟前面FlutterSurfaceView类似，都是从FlutterRender而来。

下面再来看Flutter侧，我们从上面Flutter Inspector视图层次入手，先来来分析PlatformViewLink

PlatformViewLink分析

我们首先来看看PlatformViewLink的一个结构图：

在这里插入图片描述

PlatformViewLink源码部分，看构造函数：

class PlatformViewLink extends StatefulWidget {

const PlatformViewLink({

Key? key,

required PlatformViewSurfaceFactory surfaceFactory,

required CreatePlatformViewCallback onCreatePlatformView,

required this.viewType,

}) : assert(surfaceFactory != null),

assert(onCreatePlatformView != null),

assert(viewType != null),

_surfaceFactory = surfaceFactory,

_onCreatePlatformView = onCreatePlatformView,

super(key: key);

}

从代码可以看出，PlatformViewLink核心在于三个必选参数：surfaceFactory，onCreatePlatformView，viewType，其中surfaceFactory 和 onCreatePlatformView 仅在此widget的状态被初始化或 viewType 更改时被调用。

PlatformViewSurfaceFactory: 工厂类，返回一个_surface，实际上也是一个widget，Android平台返回的是：AndroidViewSurface
CreatePlatformViewCallback: 返回的其实是通过PlatformViewsService.initSurfaceAndroidView创建的一个PlatformViewController，通过它可以控制单个平台视图的界面，并与平台视图交互。

下面来逐一分析下AndroidViewSurface和PlatformViewController

首先来看看PlatformViewController

PlatformViewController分析

PlatformViewController是一个抽象类，字面意思就是平台视图的控制器，被PlatformViewSurface引用，用于与平台视图交互，我们来看类源码：

abstract class PlatformViewController {

// 与控制器关联的视图ID，

// viewId 应始终唯一且非负。并且它不能为空。

// viewId通过全局唯一的管理器PlatformViewsRegistry生成管理

int get viewId;

// 事件分发到平台视图

Future dispatchPointerEvent(PointerEvent event);

// Disposes平台视图