flutter窗口初始和绘制的示例分析
这篇文章主要介绍了flutter窗口初始和绘制的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联长期为近1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为乾安企业提供专业的做网站、网站建设，乾安网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。
前言
环境: flutter sdk v1.7.8+hotfix.3@stable
对应 flutter engine: 54ad777f
这里关注的是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方法。
感谢你能够认真阅读完这篇文章，希望小编分享的“flutter窗口初始和绘制的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
当前文章：flutter窗口初始和绘制的示例分析
本文URL：http://pwwzsj.com/article/jodddj.html
