flutter对比Android绘制流程,flutter窗口初始和绘制流程详析

前言

环境: flutter sdk @stable

对应 flutter engine:

这里关注的是c++层面的绘制流程，平台怎样驱动和响应绘制与渲染的过程，并不是dart部分的渲染。

结合之前的分析，在虚拟机实例的构造函数中调用了一个重要方法dartui::initforglobal() , 调用流程再罗列一下：

dartvmref::create

dartvmref::dartvmref

dartvm::create

dartvmdata::create

dartvm::dartvm

dartui::initforglobal()

实现体很明了，注册了各种类对象的方法，也就是说，这些在dart语言继承nativefieldwrapperclass2的类都有一份在c++层的实现，也说明了dartsdk是如何提供接口绑定与c++层的实现，相当于java语言中的jni。

另外还有针对isolate的初始化，不过只是设置了一个可以import的路径，并不重要：

dartisolate::createrootisolate

dartisolate::createdartvmandembedderobjectpair

dartisolate::loadlibraries

dartui::initforisolate

dart_setnativeresolver

视口设置

我们知道runtimecontroller持有一个window实例，看window实例被创建之后做了哪些制作：

runtimecontroller::runtimecontroller

window::window

dartisolate::createrootisolate

dartisolate::dartisolate

dartisolate::setwindow => uidartstate::setwindow

windowclient::updateisolatedescription => runtimecontroller::updateisolatedescription

runtimedelegate::updateisolatedescription => shell::updateisolatedescription

serviceprotocol::sethandlerdescription

window::didcreateisolate

library_.set("dart:ui")

runtimecontroller::flushruntimestatetoisolate

runtimecontroller::setviewportmetrics

window::updatewindowmetrics

library_, _updatewindowmetrics

操作从最里层的window一直传递到了shell,最重要的一个作用是初始化了viewport(视口：用作画布的大小，分辨率等尺寸信息)，再跟一下viewport被初始化后又如何被设置的：

flutterview.onsizechanged

flutterview.updateviewportmetrics

flutterjni.setviewportmetrics

flutterjni.nativesetviewportmetrics

::setviewportmetrics

androidshellholder::setviewportmetrics

[async:ui]engine::setviewportmetrics

runtimecontroller::setviewportmetrics

window::updatewindowmetrics

engine::scheduleframe

这里从java调用到c++，flutterview.onsizechanged这个操作是在flutterview实例创建之后被系统调用的(而flutterview的创建发生在activity.oncreate时机)，显然是响应平台层的通知，这符合我们的认知预期，因为画布的大小可能因为用户操作发生变化，dart层需要被动响应。

需要注意的是响应onsizechanged在platform线程，调用engine::setviewportmetrics切到了ui线程，铭记engine的所有的操作都是在ui线程。

启动画帧

engine在通过runtimecontroller设置了窗口的尺寸之后，调用了另一个重要方法scheduleframe,于是看它的实现：

engine::scheduleframe

animator::requestframe

[async:ui]animator::awaitvsync

vsyncwaiter::asyncwaitforvsync

callback_= {animator::beginframe}

vsyncwaiter::awaitvsync => vsyncwaiterandroid::awaitvsync

[async:platform]flutterjni.asyncwaitforvsync

asyncwaitforvsyncdelegate.asyncwaitforvsync => vsyncwaiter.asyncwaitforvsyncdelegate

choreographer.getinstance().postframecallback

delegate::onanimatornotifyidle => shell::onanimatornotifyidle

engine::notifyidle

通知vsync

这里操作有些凌乱，首先切到ui线程，又切到platform线程，其实就是为了调用平台接口，搞清这个最终目的。

终于涉及到了绘制图像所需要的关键类animator 和vsyncwaiter :

在ui线程等待vsync信号，表示信号到达后执行animator::beginframe方法；

如何设置vsync信号？通过调用平台接口，平台操作必须都在platform线程，于是从ui线程切到platform线程，目的是去调用android的choreographer.postframecallback，这样又执行了一串从c++调到java的过程。

响应vsync

因为是在java层调用的vsync回调，只能先在java层响应于是有:

framecallback.doframe <= vsyncwaiter.asyncwaitforvsyncdelegate

flutterjni.nativeonvsync

vsyncwaiterandroid::onnativevsync

vsyncwaiterandroid::consumependingcallback

vsyncwaiter::firecallback

[async:ui]callback() => animator::beginframe

在vsync信号到达之后，最终在ui线程响应了animator::beginframe，且看其实现：

animator::beginframe

animator::delegate::onanimatorbeginframe => shell::

engine::beginframe

window::beginframe

library_."_beginframe" => hooks.dart:_beginframe

uidartstate::flushmicrotasksnow

tonic::dartmicrotaskqueue::runmicrotasks

library_."_drawframe" => hooks.dart:_drawframe

最终的最终回到了dart层，并调用了其两个重要方法：_beginframe和_drawframe，完成了帧的绘制。

vsync创建

另外罗列一下vsyncwaiter创建时机:

shell::createshellonplatformthread

platformview::createvsyncwaiter => platformviewandroid::createvsyncwaiter

vsyncwaiterandroid()

animator::animator

engine::engine

它是与创建shell同样的时机，也就是说在platform线程由platformview::createvsyncwaiter创建的，并被animator持有，而animator又是被engine持有。vsyncwaiter与engine一样，所有的操作都必须在ui线程中执行

窗口渲染

窗口的渲染是由dart层的window完成的，其实调用了c++层的实现：

("window_render", render)

render() (window.cc:30)

scene=

windowclient::render

scene::takelayertree

runtimedelegate::render => engine::render

producercontinuation::complete(layer_tree)

animator::delegate::onanimatordraw => shell::onanimatordraw(layer_tree_pipeline_)

[async:gpu]rasterizer::draw => android_shell_holder.cc:76

rasterizer::dodraw

rasterizer::drawtosurface

surface::acquireframe

externalviewembedder::beginframe

compositorcontext::acquireframe

scopedframe::raster

surfaceframe::submit

externalviewembedder::submitframe

firenextframecallbackifpresent

rasterizer::delegate::onframerasterized

"window_scheduleframe", scheduleframe

这里涉及的对象更多了，而且紧密的与dart层的绘制与渲染机制关联。值得注意的是具体的绘制操作(光栅化)是在gpu线程进行。

另外dart层的window也需要主动的调度帧，因此也绑定了scheduleframe方法。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对萬仟网的支持。