Flutter 系列文章連載～
《Flutter Android 工程結構及應用層編譯原始碼深入分析》
《Flutter 命令本質之 Flutter tools 機制原始碼深入分析》
《Flutter 的 runApp 與三棵樹誕生流程原始碼分析》
《Flutter Android 端 Activity/Fragment 流程原始碼分析》
《Flutter Android 端 FlutterInjector 及依賴流程原始碼分析》
《Flutter Android 端 FlutterEngine Java 相關流程原始碼分析》
《Flutter Android 端 FlutterView 相關流程原始碼分析》
背景
前面系列文章我們分析了 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 的堆疊，
總結
經過這么一個篇幅的分析，我們可以簡單粗暴的總結為下圖模式：
這下你懂了嗎？
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/294263.html
標籤：其他
上一篇：Rxjava3的基本使用