Flutter混合开发——一种另类却高效的的原生View嵌入方法

level

发布于 2020-9-6 14:28

浏览

0收藏

前言
随着使用Flutter开发的深入加之其生态还不完善，必然会涉及到使用原生View的情况。为此，Flutter也为我们提供了PlatformView方便我们嵌入原生View，以实现一些flutter暂时不支持的功能，但由此也引发了一些性能问题。

Flutter与原生View简介
实现
这里以Android来做一个简介（如果没用过原生View的话，可以百度教程），当我们需要使用一个Android的view时，我们在android端分别实现

你的类 extends PlatformView
你的类 extends PlatformViewFactory
之后再通过registerViewFactory注册你的View，并设置一个ID。

我们在Flutter端，创建一个AndroidView，并通过上面的ID就可以获取到我们创建的androidView，并使用。

原理
那么Flutter使用原生View的背后是怎么实现的呢？这里可以参考大佬们的文章：

Flutter完整开发实战详解(二十、 Android PlatformView 和键盘问题)

万万没想到——flutter这样外接纹理

从上面的文章我们可以知道，原生View生成texture数据同时自带一个textureId，数据再写入PixelBuffer后，flutter会通过这个ID到PixelBuffer中取到对应的数据并通过skia渲染。

借一张图

Flutter混合开发——一种另类却高效的的原生View嵌入方法-鸿蒙开发者社区

流程就是：

GPU->CPU->GPU
复制代码
这样也就造成了资源的浪费，增加耗时。那么有没有其他的方法呢？

另类的方法
（还是以Android为例）我们知道，flutter启动是从FlutterActivity的子类MainActivity(你也可以创建自己的)onCreate开始的：

  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    switchLaunchThemeForNormalTheme();

    super.onCreate(savedInstanceState);

    lifecycle.handleLifecycleEvent(Lifecycle.Event.ON_CREATE);

    delegate = new FlutterActivityAndFragmentDelegate(this);
    delegate.onAttach(this);
    delegate.onActivityCreated(savedInstanceState);

    configureWindowForTransparency();
    setContentView(createFlutterView());
    configureStatusBarForFullscreenFlutterExperience();
  }

通过：

    delegate = new FlutterActivityAndFragmentDelegate(this);
    delegate.onAttach(this);
    delegate.onActivityCreated(savedInstanceState);

会执行一系列flutter的初始化操作，并拿到android sruface进而完成启动，展开渲染绘制。具体可以参考flutter启动流程相应的文章。

添加一个View
不管 FlutterActivity 启动了啥，它终归还是个Activity

class FlutterActivity extends Activity...

该有的原生生命周期他都有，换言之我们可以在这里进行原生开发（至少从代码上看是可以的），那么我们尝试添加个view试试，在MainActivity的

public void configureFlutterEngine(FlutterEngine flutterEngine)｛
...
｝

我们延迟添加一个View

        new Handler()
                .postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        this.addContentView(你的View);
                    }
                },2000);

之所以延迟添加，是因为不延迟的话，你将看不到它。（这里我粗略看了一下启动代码，可能是因为过早绘制被flutter遮挡了）。

项目启动后一小会：

Flutter混合开发——一种另类却高效的的原生View嵌入方法-鸿蒙开发者社区