Flutter 系列文章连载～
- 《Flutter Android 工程构造及应用层编译源码深入分析》
- 《Flutter 命令实质之 Flutter tools 机制源码深入分析》
- 《Flutter 的 runApp 与三棵树诞生流程源码剖析》
- 《Flutter Android 端 Activity/Fragment 流程源码剖析》
- 《Flutter Android 端 FlutterInjector 及依赖流程源码剖析》
- 《Flutter Android 端 FlutterEngine Java 相干流程源码剖析》
- 《Flutter Android 端 FlutterView 相干流程源码剖析》
- 《Flutter 绘制动机 VSYNC 流程源码全方位剖析》
- 《Flutter 安卓 Platform 与 Dart 端音讯通信形式 Channel 源码解析》
背景
后面系列文章咱们剖析了 FlutterActivity 等相干流程，晓得一个 Flutter Android App 的实质是通过 FlutterView 进行渲染。过后因为篇幅限度，咱们没有进入详细分析，这里作为一个专题进行简略剖析。
SDK 中同属于 FlutterView 体系的控件大抵有如图这些：
下文次要围绕上图进行剖析。
FlutterSplashView 相干剖析
FlutterSplashView 的次要作用是在 FlutterView render 渲染进去之前显示一个SplashScreen（实质 Drawable）过渡图（能够了解成相似开屏图片）。这个控件的调用在后面《Flutter Android 端 Activity/Fragment 流程源码剖析》文章中剖析 FlutterActivityAndFragmentDelegate 时有看到过，在其 onCreateView 办法中先实例化了 FlutterSplashView，接着调用flutterSplashView.displayFlutterViewWithSplash(flutterView, host.provideSplashScreen())，而后把这个 FlutterSplashView 控件返回给 FlutterActivity 通过 setContentView 进行设置。上面是其相干流程次要源码：
final class FlutterSplashView extends FrameLayout {
//......
//步骤1、把给定的splashScreen显示在flutterView之上，直到flutterView的首帧渲染进去才过渡隐没。
public void displayFlutterViewWithSplash(
@NonNull FlutterView flutterView, @Nullable SplashScreen splashScreen) {
//步骤2、一堆反复调用的复位操作。
if (this.flutterView != null) {
this.flutterView.removeOnFirstFrameRenderedListener(flutterUiDisplayListener);
removeView(this.flutterView);
}
if (splashScreenView != null) {
removeView(splashScreenView);
}
//步骤3、把flutterView增加给以后FlutterSplashView，实质是一个FrameLayout。
this.flutterView = flutterView;
addView(flutterView);
this.splashScreen = splashScreen;
//步骤4、显示一个splash screen开屏图。
if (splashScreen != null) {
//步骤5、如果flutterView未渲染进去则条件成立。
if (isSplashScreenNeededNow()) {
Log.v(TAG, "Showing splash screen UI.");
//步骤6、splashScreen是FlutterActivity中实现的DrawableSplashScreen。
//DrawableSplashScreen中的Drawable实质来自清单文件meta-data中io.flutter.embedding.android.SplashScreenDrawable配置。
//DrawableSplashScreen implements SplashScreen，所以就是DrawableSplashScreen的createSplashView办法。
//因而splashScreenView是DrawableSplashScreenView，继承自ImageView，设置的图为Drawable。
splashScreenView = splashScreen.createSplashView(getContext(), splashScreenState);
//步骤7、把ImageView增加到FlutterSplashView中。
//因为FlutterSplashView是FrameLayout，所以ImageView盖在步骤3的flutterView之上。
addView(this.splashScreenView);
//步骤8、给flutterView增加监听回调，等第一帧绘制时触发。
//回调外面做的事实质就是从开屏过渡隐没到flutterView显示进去。
flutterView.addOnFirstFrameRenderedListener(flutterUiDisplayListener);
} else if (isSplashScreenTransitionNeededNow()) {
Log.v(TAG, "Showing an immediate splash transition to Flutter due to previously interrupted transition.");
//步骤9、同步骤6、7做的事件。
splashScreenView = splashScreen.createSplashView(getContext(), splashScreenState);
addView(splashScreenView);
//步骤10、因为是中间状态，所以不必监听，间接增加后就从开屏过渡隐没到flutterView显示进去。
transitionToFlutter();
} else if (!flutterView.isAttachedToFlutterEngine()) {
Log.v(TAG, "FlutterView is not yet attached to a FlutterEngine. Showing nothing until a FlutterEngine is attached.");
//步骤11、如果这时候flutter引擎还没attach上。
//那就监听attach，等attach上就开始追加开屏并显示，等到渲染第一帧开始就完结。
flutterView.addFlutterEngineAttachmentListener(flutterEngineAttachmentListener);
}
}
}
//单纯的判断flutterView是否渲染进去，没进去就阐明须要过渡界面。
private boolean isSplashScreenNeededNow() {
return flutterView != null
&& flutterView.isAttachedToFlutterEngine()
&& !flutterView.hasRenderedFirstFrame()
&& !hasSplashCompleted();
}
//判断是否上一个过渡动画开屏正在进行中。
private boolean isSplashScreenTransitionNeededNow() {
return flutterView != null
&& flutterView.isAttachedToFlutterEngine()
&& splashScreen != null
&& splashScreen.doesSplashViewRememberItsTransition()
&& wasPreviousSplashTransitionInterrupted();
}
//......
//开屏过渡到flutterview显示
private void transitionToFlutter() {
//......
//步骤12、splashScreen就是DrawableSplashScreen。
//实质就是DrawableSplashScreenView（即ImageView）做一个默认500ms的alpha突变通明动画。
//动画结束回调onTransitionComplete接口实现，从以后FrameLayout中删除开屏追加的ImageView，child只剩下FlutterView。
splashScreen.transitionToFlutter(onTransitionComplete);
}
//......
//等attach上后走进步骤1流程，不解释。
@NonNull
private final FlutterView.FlutterEngineAttachmentListener flutterEngineAttachmentListener =
new FlutterView.FlutterEngineAttachmentListener() {
@Override
public void onFlutterEngineAttachedToFlutterView(@NonNull FlutterEngine engine) {
flutterView.removeFlutterEngineAttachmentListener(this);
displayFlutterViewWithSplash(flutterView, splashScreen);
}
//......
};
//flutterView的第一帧绘制时触发，实质就是从开屏过渡隐没到flutterView显示进去。
@NonNull
private final FlutterUiDisplayListener flutterUiDisplayListener =
new FlutterUiDisplayListener() {
@Override
public void onFlutterUiDisplayed() {
if (splashScreen != null) {
transitionToFlutter();
}
}
//......
};
//动画做完就移除开屏view控件。
@NonNull
private final Runnable onTransitionComplete =
new Runnable() {
@Override
public void run() {
removeView(splashScreenView);
//......
}
};
//......
}看完下面代码你也就明确为什么咱们在 Android Studio 中查看 FlutterActivity 的安卓层级树时，只看到 Activity content 的 child 是 FlutterSplashView，FlutterSplashView 的 child 是 FlutterView，而 FlutterSplashView 的另一个 child DrawableSplashScreenView 不见的起因就是 500ms 动画之后被 remove 了。如下图：
FlutterTextureView 相干剖析
在后面系列文章中剖析 FlutterActivity 时咱们晓得，FlutterView 创立时依赖一个 FlutterTextureView 或者 FlutterSurfaceView，其判断条件的实质就是看 FlutterActivity 的 window 窗体背景是否通明（FlutterFragment 时通过 Arguments 的 flutterview_render_mode 参数来决定），不通明就是 surface，通明就是 texture。因而，咱们这里就是针对其 window 通明场景来剖析的。
//步骤13、在一个SurfaceTexture上绘制Flutter UI，就是单纯的渲染，不解决点击等各种事件。
//想要开始渲染，FlutterTextureView的持有者须要先调用attachToRenderer(FlutterRenderer)。
//同理，想要终止渲染，FlutterTextureView的持有者须要先调用detachFromRenderer()。
public class FlutterTextureView extends TextureView implements RenderSurface {
//......
//步骤14、次要是基于规范监听的connectSurfaceToRenderer和disconnectSurfaceFromRenderer操作。
private final SurfaceTextureListener surfaceTextureListener =
new SurfaceTextureListener() {
@Override
public void onSurfaceTextureAvailable(
SurfaceTexture surfaceTexture, int width, int height) {
//......
if (isAttachedToFlutterRenderer) {
connectSurfaceToRenderer();
}
}
//......
@Override
public boolean onSurfaceTextureDestroyed(@NonNull SurfaceTexture surface) {
//......
if (isAttachedToFlutterRenderer) {
disconnectSurfaceFromRenderer();
}
return true;
}
};
//......
//步骤15、在FlutterView的attachToFlutterEngine办法中被调用。
//参数来自FlutterEngine的getRenderer()，类型是FlutterRenderer，外面实质是SurfaceTexture。
public void attachToRenderer(@NonNull FlutterRenderer flutterRenderer) {
//......
connectSurfaceToRenderer();
//......
}
//步骤16、在FlutterView的detachFromFlutterEngine办法中被调用。
//与步骤15办法成对始终。
public void detachFromRenderer() {
//......
disconnectSurfaceFromRenderer();
//......
}
private void connectSurfaceToRenderer() {
//......
renderSurface = new Surface(getSurfaceTexture());
flutterRenderer.startRenderingToSurface(renderSurface);
}
private void disconnectSurfaceFromRenderer() {
//......
flutterRenderer.stopRenderingToSurface();
if (renderSurface != null) {
renderSurface.release();
renderSurface = null;
}
}
//......
}下面能够看到，FlutterTextureView 的实质就是一个规范的 TextureView，用法也齐全一样，只是渲染数据是通过 FlutterJNI 进行 engine 与 Android Java 层传递而已。
FlutterSurfaceView 相干剖析
与下面 FlutterTextureView 剖析同理，FlutterSurfaceView 天然就是针对其 window 不通明场景来剖析的。上面是相似下面概览源码：
//步骤17、在一个Surface上绘制Flutter UI，就是单纯的渲染，不解决点击等各种事件。
//想要开始渲染，FlutterSurfaceView的持有者须要先调用attachToRenderer(FlutterRenderer)。
//同理，想要终止渲染，FlutterSurfaceView的持有者须要先调用detachFromRenderer()。
public class FlutterSurfaceView extends SurfaceView implements RenderSurface {
//......
private final SurfaceHolder.Callback surfaceCallback =
new SurfaceHolder.Callback() {
@Override
public void surfaceCreated(@NonNull SurfaceHolder holder) {
//......
connectSurfaceToRenderer();
}
//......
@Override
public void surfaceDestroyed(@NonNull SurfaceHolder holder) {
//......
disconnectSurfaceFromRenderer();
}
};
public void attachToRenderer(@NonNull FlutterRenderer flutterRenderer) {
//......
connectSurfaceToRenderer();
}
public void detachFromRenderer() {
//......
disconnectSurfaceFromRenderer();
}
private void connectSurfaceToRenderer() {
//......
flutterRenderer.startRenderingToSurface(getHolder().getSurface());
}
private void disconnectSurfaceFromRenderer() {
//......
flutterRenderer.stopRenderingToSurface();
}
//......
}能够看到，不多解释，和 FlutterSurfaceView 根本一模一样。
FlutterRenderer 相干剖析
FlutterRenderer 的主要职责是通过 FlutterEngine 进行渲染关联解决，与原生平台提供的 FlutterSurfaceView、FlutterTextureView 进行纯 UI 渲染，将 Flutter 像素绘制到 Android 视图层次结构。
public class FlutterRenderer implements TextureRegistry {
//......
@NonNull private final FlutterJNI flutterJNI;
@Nullable private Surface surface;
//......
}通过下面源码的两个属性成员就能看进去他的职责。联合下面大节能够失去一个如下职责形象架构图：
FlutterView 相干剖析
FlutterView 的作用是在 Android 设施上显示一个 Flutter UI，绘制内容来自于 FlutterEngine 提供。FlutterView 有两种不同的渲染模式（io.flutter.embedding.android.RenderMode#surface和io.flutter.embedding.android.RenderMode#texture），其中 surface 模式的性能比拟高，然而在 z-index 上无奈与其余 Android View 进行布局，没法进行 animated、transformed 变换；而 texture 模式尽管性能没有 surface 高，然而没有 surface 的那些毛病限度。个别尽可能抉择 surface 模式，FlutterView 的默认结构器就是 surface 模式，FlutterActivity 的 window 不通明时默认也是 surface 模式，FlutterFragment 的默认无参数批改状况下也是 surface 模式，不信能够翻看本系列的后面相干文章。
上面咱们先看下 FlutterView 的成员和结构初始化相干流程，如下代码片段：
public class FlutterView extends FrameLayout implements MouseCursorPlugin.MouseCursorViewDelegate {
//用来真正渲染绘制视图的。
@Nullable private FlutterSurfaceView flutterSurfaceView;
@Nullable private FlutterTextureView flutterTextureView;
@Nullable private FlutterImageView flutterImageView;
@Nullable private RenderSurface renderSurface;
@Nullable private RenderSurface previousRenderSurface;
//......
//用来解决Android View的input and events。
@Nullable private MouseCursorPlugin mouseCursorPlugin;
@Nullable private TextInputPlugin textInputPlugin;
@Nullable private LocalizationPlugin localizationPlugin;
@Nullable private AndroidKeyProcessor androidKeyProcessor;
@Nullable private AndroidTouchProcessor androidTouchProcessor;
@Nullable private AccessibilityBridge accessibilityBridge;
//缺省构造函数，默认模式为surface，即FlutterSurfaceView渲染。
public FlutterView(@NonNull Context context) {
this(context, null, new FlutterSurfaceView(context));
}
//省略一堆各种参数的构造函数
//......
//实质就是指定一个RenderSurface，即如下三者之一。
private void init() {
if (flutterSurfaceView != null) {
addView(flutterSurfaceView);
} else if (flutterTextureView != null) {
addView(flutterTextureView);
} else {
addView(flutterImageView);
}
//FlutterView本人须要能接管事件。
setFocusable(true);
setFocusableInTouchMode(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
setImportantForAutofill(View.IMPORTANT_FOR_AUTOFILL_YES_EXCLUDE_DESCENDANTS);
}
}
//......
}通过下面代码咱们能够晓得，FlutterView 其实就是一个一般的 Android FrameLayout，其外部根据条件被 addView 了一个 View，这个 View 都实现自 RenderSurface 接口，也就是 FlutterSurfaceView、FlutterTextureView、FlutterImageView 之一，默认为 FlutterSurfaceView 而已。所以说真正绘制渲染 FlutterEngine 数据的不是 FlutterView，而是实现 RenderSurface 接口的控件，譬如 FlutterSurfaceView。整体 View 层级关系如下图：
结构完 FlutterView 实例后，咱们通过后面的系列文章能够晓得，在 FlutterActivityAndFragmentDelegate 的 onCreateView 办法返回给 FlutterActivity 一个 contentView 前 FlutterView 有通过本人的 attachToFlutterEngine 办法与 FlutterEngine 关联，所以咱们看下这个关联办法（对应还有一个 detachFromFlutterEngine 办法进行勾销关联）：
public class FlutterView extends FrameLayout implements MouseCursorPlugin.MouseCursorViewDelegate {
//......
public void attachToFlutterEngine(@NonNull FlutterEngine flutterEngine) {
//......
//赋值flutterEngine。
this.flutterEngine = flutterEngine;
//从flutterEngine引擎获取flutterRenderer实例。
FlutterRenderer flutterRenderer = this.flutterEngine.getRenderer();
//renderSurface进行attachToRenderer，实质譬如就是FlutterSurfaceView的attachToRenderer办法。
renderSurface.attachToRenderer(flutterRenderer);
//初始化各种plugin。
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
//鼠标相干插件。
mouseCursorPlugin = new MouseCursorPlugin(this, this.flutterEngine.getMouseCursorChannel());
}
//输出相干插件。
textInputPlugin =
new TextInputPlugin(this, this.flutterEngine.getTextInputChannel(), this.flutterEngine.getPlatformViewsController());
//config本地变更等插件。
localizationPlugin = this.flutterEngine.getLocalizationPlugin();
//key及touch事件、accessibility辅助模式相干channel通道解决。
androidKeyProcessor =
new AndroidKeyProcessor(this, this.flutterEngine.getKeyEventChannel(), textInputPlugin);
androidTouchProcessor =
new AndroidTouchProcessor(this.flutterEngine.getRenderer(), /*trackMotionEvents=*/ false);
accessibilityBridge =
new AccessibilityBridge(
this,
flutterEngine.getAccessibilityChannel(),
(AccessibilityManager) getContext().getSystemService(Context.ACCESSIBILITY_SERVICE),
getContext().getContentResolver(),
this.flutterEngine.getPlatformViewsController());
accessibilityBridge.setOnAccessibilityChangeListener(onAccessibilityChangeListener);
//各种平台相干事件初始调度。
this.flutterEngine.getPlatformViewsController().attachAccessibilityBridge(accessibilityBridge);
this.flutterEngine
.getPlatformViewsController()
.attachToFlutterRenderer(this.flutterEngine.getRenderer());
textInputPlugin.getInputMethodManager().restartInput(this);
sendUserSettingsToFlutter();
localizationPlugin.sendLocalesToFlutter(getResources().getConfiguration());
sendViewportMetricsToFlutter();
flutterEngine.getPlatformViewsController().attachToView(this);
//......
}
}能够看到，FlutterView 与 FlutterEngine 进行 attach 时次要做的事件就是回调设置、渲染关联、零碎平台 plugin 初始化关联等。下面的各种 plugin 咱们能够先不必关怀细节，晓得 attachToFlutterEngine 次要做这些事件即可，前面会专门剖析。
接着咱们依照规范 Android 平台的 View 次要办法进行分类剖析，先看看 FlutterView 的 onConfigurationChanged 办法，如下：
public class FlutterView extends FrameLayout implements MouseCursorPlugin.MouseCursorViewDelegate {
//......
@Nullable private LocalizationPlugin localizationPlugin;
@Override
protected void onConfigurationChanged(@NonNull Configuration newConfig) {
super.onConfigurationChanged(newConfig);
//响应零碎屏幕渲染或者配置发生变化，譬如分屏、暗黑、多语言啥的。
if (flutterEngine != null) {
Log.v(TAG, "Configuration changed. Sending locales and user settings to Flutter.");
//调用LocalizationPlugin插件设置变更后新的Configuration。
localizationPlugin.sendLocalesToFlutter(newConfig);
//把变更发送到FlutterEngine去，告诉引擎。
sendUserSettingsToFlutter();
}
}
void sendUserSettingsToFlutter() {
//以后是不是暗黑模式。
boolean isNightModeOn = (getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES;
SettingsChannel.PlatformBrightness brightness = isNightModeOn
? SettingsChannel.PlatformBrightness.dark : SettingsChannel.PlatformBrightness.light;
//通过flutterEngine的SettingsChannel发送变更音讯。
flutterEngine
.getSettingsChannel()
.startMessage()
.setTextScaleFactor(getResources().getConfiguration().fontScale)
.setUse24HourFormat(DateFormat.is24HourFormat(getContext()))
.setPlatformBrightness(brightness)
.send();
}
//......
}能够看到，当系统配置产生变更时 FlutterView 本人在安卓端其实不做什么事的，次要就是负责把事件告诉到 flutterEngine 端去，而后 flutterEngine 再传递到 dart 响应，从而触发新的绘制刷新成果。
因为整体都是这个模式，所以 FlutterView 中的非典型办法咱们不再剖析，类比即可。上面咱们看下事件是怎么派发的，如下：
@Override
public boolean dispatchKeyEvent(KeyEvent event) {
//......
return (isAttachedToFlutterEngine() && androidKeyProcessor.onKeyEvent(event))
|| super.dispatchKeyEvent(event);
}
@Override
public boolean onTouchEvent(@NonNull MotionEvent event) {
//......
return androidTouchProcessor.onTouchEvent(event);
}啥感觉？androidTouchProcessor 实例就是后面剖析的 FlutterView 中 attachToFlutterEngine 办法里实例化的，实质就是通过 flutterEngine 的 KeyEventChannel 进行事件散发。到此也就应证了咱们后面说的，FlutterView 只是一个在安卓端治理的 View，外部的渲染有专门的 View 负责，外部的事件全副通过原生散发到 flutterEngine 进行 dart 代码的触发解决，而后交回原生平台渲染。以 FlutterSurfaceView 为例整体交互流程图很像上面这样：
通过如上超级形象图其实咱们就大略明确了 Flutter 框架的精华（当然，细节还是很简单的），也印证了一个纯 Flutter Android App 在原生平台侧的层级构造是上面这样：
FlutterImageView 相干剖析
剖析完 FlutterRenderer、FlutterSurfaceView、FlutterTextureView 及 FlutterView 之后咱们再来看看 FlutterImageView，其实他和下面的 FlutterSurfaceView 等工作流程很像，也是 FlutterView 外部的一种绘制成载体，只是有一些本人的独有特点。FlutterImageView 的次要作用是通过android.media.ImageReader把 Flutter UI 绘制到android.graphics.Canvas上。FlutterView 中 addView 为 FlutterImageView 的形式其实有两种，一种是后面介绍过的，通过 FlutterView 结构函数参数为 FlutterImageView 的办法实现，另一种是通过调用 FlutterView 中的 convertToImageView 办法实现。上面是 FlutterImageView 源码中的外围片段：
@TargetApi(19)
public class FlutterImageView extends View implements RenderSurface {
//......
//原生控件的绘制操作
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制前先更新bitmap数据源
if (currentImage != null) {
updateCurrentBitmap();
}
//把bitmap画到canvas下面
if (currentBitmap != null) {
canvas.drawBitmap(currentBitmap, 0, 0, null);
}
}
@TargetApi(29)
private void updateCurrentBitmap() {
if (android.os.Build.VERSION.SDK_INT >= 29) {
final HardwareBuffer buffer = currentImage.getHardwareBuffer();
currentBitmap = Bitmap.wrapHardwareBuffer(buffer, ColorSpace.get(ColorSpace.Named.SRGB));
buffer.close();
} else {
final Plane[] imagePlanes = currentImage.getPlanes();
if (imagePlanes.length != 1) {
return;
}
final Plane imagePlane = imagePlanes[0];
final int desiredWidth = imagePlane.getRowStride() / imagePlane.getPixelStride();
final int desiredHeight = currentImage.getHeight();
if (currentBitmap == null
|| currentBitmap.getWidth() != desiredWidth
|| currentBitmap.getHeight() != desiredHeight) {
currentBitmap =
Bitmap.createBitmap(
desiredWidth, desiredHeight, android.graphics.Bitmap.Config.ARGB_8888);
}
ByteBuffer buffer = imagePlane.getBuffer();
buffer.rewind();
currentBitmap.copyPixelsFromBuffer(buffer);
}
}
//......
}能够看到，FlutterImageView 是一个一般原生 View，也实现了 RenderSurface 接口从而实现相似 FlutterSurfaceView 的个性。它的存在次要是解决咱们既须要渲染一个 Flutter UI 又想同时渲染一个 PlatformView（对于 PlatformView 咱们前面会有专题文章）的场景，因为 PlatformView 默认实现是在原生 FlutterView 上进行 addView 操作，当咱们想在 PlatformView 上持续盖一个 Flutter 本人渲染的控件就须要应用 FlutterImageView，通过 FlutterImageView 实现了 Surface（ImageReader） 和 Surface 的重叠。
总结
通过这么一个篇幅的剖析，咱们能够简略粗犷的总结为下图模式：
这下你懂了吗？
发表回复