文/陳爐軍
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：空間域名、虛擬主機(jī)、營銷軟件、網(wǎng)站建設(shè)、韓城網(wǎng)站維護(hù)、網(wǎng)站推廣。
整理/LiveVideoStack
大家好，我是阿里巴巴閑魚事業(yè)部的陳爐軍，本次分享的主題是Flutter浪潮下的音視頻研發(fā)探索，主要內(nèi)容是針對閑魚APP在當(dāng)下流行的跨平臺框架Flutter的大規(guī)模實(shí)踐，介紹其在音視頻領(lǐng)域碰到的一些困難以及解決方案。
分享內(nèi)容主要分為四個方面，首先會對Flutter有一個簡單介紹以及選擇Flutter作為跨平臺框架的原因，其次會介紹Flutter中與音視頻關(guān)系非常大的外接紋理概念，以及對它做出的一些優(yōu)化。之后會對閑魚在音視頻實(shí)踐過程中碰到的一些Flutter問題提出了一些解決方案——TPM音視頻框架。最后是閑魚Flutter多媒體開源組件的介紹。
Flutter
Flutter是一個跨平臺框架，以往的做法是將音頻、視頻和網(wǎng)絡(luò)這些模塊都下沉到C++層或者ARM層，在其上封裝成一個音視頻的SDK，供UI層的PC、iOS和Android調(diào)用。
而Flutter做為一個UI層的跨平臺框架，顧名思義就是在UI層也實(shí)現(xiàn)了一個跨平臺開發(fā)?？梢灶A(yù)想的是未Flutter發(fā)展的好的話，會逐漸變?yōu)橐粋€從底層到UI層的一個全鏈路的跨平臺開發(fā)，技術(shù)人員分別負(fù)責(zé)SDK和UI層的開發(fā)。
在Flutter之前已經(jīng)有很多跨平臺UI解決方案，那為什么選擇Flutter呢？
我們主要考慮性能和跨平臺的能力。
以往的跨平臺方案比如Weex，ReactNative，Cordova等等因?yàn)榧軜?gòu)的原因無法滿足性能要求，尤其是在音視頻這種性能要求幾乎苛刻的場景。
而諸如Xamarin等，雖然性能可以和原生App一致，但是大部分邏輯還是需要分平臺實(shí)現(xiàn)。
我們可以看一下，為什么Flutter可以實(shí)現(xiàn)高性能：
原生的native組件渲染以IOS為例，蘋果的UIKit通過調(diào)用平臺自己的繪制框架QuaztCore來實(shí)現(xiàn)UI的繪制，圖形繪制也是調(diào)用底層的API,比如OpenGL、Metal等。
而Flutter也是和原生API邏輯一致，也是通過調(diào)用底層的繪制框架層SKIA實(shí)現(xiàn)UI層。這樣相當(dāng)于Flutter他自己實(shí)現(xiàn)了一套UI框架，提供了一種性能超越原生API的跨平臺可能性。
但是我們說一個框架最終性能怎樣，其實(shí)取決于設(shè)計(jì)者和開發(fā)者。至于現(xiàn)在到底是一個什么狀況：
在閑魚的實(shí)踐中，我們發(fā)現(xiàn)在正常的開發(fā)沒有特意的去優(yōu)化UI代碼的情況下，在一些低端機(jī)上，F(xiàn)lutter界面的流暢性是比Native界面要好的。
雖然現(xiàn)在閑魚某些場景下會有卡頓閃退等情況，但是這是一個新事物發(fā)展過程中的必然問題，我們相信未來性能肯定不會成為限制Flutter發(fā)展的瓶頸的。
在閑魚實(shí)踐Flutter的過程中，混合棧和音視頻是其中比較難解決的兩個問題，混合棧是指一個APP在Flutter過程中不可能一口氣將所有業(yè)務(wù)全部重寫為Flutter，所以這是一個逐步迭代的過程，這期間原生native界面與Flutter界面共存的狀態(tài)就稱之為混合棧。閑魚在混合棧上也有一些比較好的輸出，例如FlutterBoost。
外接紋理
在講音視頻之前需要簡要介紹一下外接紋理的概念，我們將它稱之為是Flutter和Frame之間的橋梁。
Flutter渲染一幀屏幕數(shù)據(jù)首先要做的是，GPU發(fā)出的VC信號在Flutter的UI線程，通過AOT編譯的機(jī)器碼結(jié)合當(dāng)前Dart Runtime，生成Layer Tree UI樹，Layer Tree上每一個葉子節(jié)點(diǎn)都代表了當(dāng)前屏幕上所需要渲染的每一個元素，包含了這些元素渲染所需要的內(nèi)容。將Layer Tree拋給GPU線程，在GPU線程內(nèi)調(diào)用Skia去完成整個UI的渲染過程。Layer Tree中有PictureLayer和TextureLayer兩個比較重要的節(jié)點(diǎn)。PictureLayer主要負(fù)責(zé)屏幕圖片的渲染，F(xiàn)lutter內(nèi)部實(shí)現(xiàn)了一套圖片解碼邏輯，在IO線程將圖片讀取或者從網(wǎng)絡(luò)上拉取之后，通過解碼能夠在IO線程上加載出紋理，交給GPU線程將圖片渲染到屏幕上。但是由于音視頻場景下系統(tǒng)API太過繁多，業(yè)務(wù)場景過于復(fù)雜。Flutter沒有一套邏輯去實(shí)現(xiàn)跨平臺的音視頻組件，所以說Flutter提出了一種讓第三方開發(fā)者來實(shí)現(xiàn)音視頻組件的方式，而這些音視頻組件的視頻渲染出口，就是TextureLayer。
在整個Layer Tree渲染的過程中，TextureLayer的數(shù)據(jù)紋理需要由外部第三方開發(fā)者來指定，可以把視頻數(shù)據(jù)和播放器數(shù)據(jù)送到TextureLayer里，由Flutter將這些數(shù)據(jù)渲染出來。
TextureLayer渲染過程：首先判斷Layer是否已經(jīng)初始化，如果沒有就創(chuàng)建一個Texture，然后將Texture Attach到一個SufaceTexture上。
這個SufaceTexture是音視頻的native代碼可以獲取到的對象，通過這個對象創(chuàng)建的Suface，我們可以將視頻數(shù)據(jù)、攝像頭數(shù)據(jù)解碼放到Suface中，然后Flutter端通過監(jiān)聽SufaceTexture的數(shù)據(jù)更新就可以順利把剛才創(chuàng)建的數(shù)據(jù)更新到它的紋理中，然后再將紋理交給SKIA渲染到屏幕上。
然而我們?nèi)绻枰肍lutter實(shí)現(xiàn)美顏，濾鏡，人臉貼圖等等功能，就需要將視頻數(shù)據(jù)讀取出來，更新到紋理中，再將GPU紋理經(jīng)過美顏濾鏡處理后生成一個處理后的紋理。按Flutter提供的現(xiàn)有能力，必須先將紋理中的數(shù)據(jù)從GPU讀出到CPU中，生成Bitmap后再寫入Surface中，這樣在Flutter中才能順利的更新到視頻數(shù)據(jù)，這樣做對系統(tǒng)性能的消耗很大。
通過對Flutter渲染過程分析，我們知道Flutter底層需要渲染的數(shù)據(jù)就是GPU紋理，而我們經(jīng)過美顏濾鏡處理完成以后的結(jié)果也是GPU紋理，如果可以將它直接交給Flutter渲染，那就可以避免GPU-CPU-GPU這樣的無用循環(huán)。這樣的方法是可行的，但是需要一個條件，就是OpenGL上下文共享。
OpenGL
在說上下文之前，得提到一個和上線文息息相關(guān)的概念：線程。
Flutter引擎啟動后會啟動四個線程：
第一個線程是UI線程，這是Flutter自己定義的UI線程，主要負(fù)責(zé)GPU發(fā)出的VSync信號時候用當(dāng)前Dart編譯的機(jī)器碼和當(dāng)前運(yùn)行環(huán)境創(chuàng)建出Layer Tree。
還有就是IO線程和GPU線程。和大部分OpenGL處理解決方案中一樣，F(xiàn)lutter也采取一個線程責(zé)資源加載，一部分負(fù)責(zé)資源渲染這種思路。
兩個線程之間紋理共享有兩種方式。一種是EGLImage(IOS是 CVOpenGLESTextureCache)。一種是OpenGL Share Context。Flutter通過Share Context來實(shí)現(xiàn)紋理共享，將IO線程的Context和GPU線程的Context進(jìn)行Share，放到同一個Share Group下面，這樣兩個線程下資源是互相可見可以共享的。
Platform線程是主線程，F(xiàn)lutter中有一個很奇怪的設(shè)定，GPU線程和主線程共用一個Context。并且在主線程也有很多OpenGL 操作。
這樣的設(shè)計(jì)會給音視頻開發(fā)帶來很多問題，后面會詳細(xì)說。
音視頻端美顏處理完成的OpenGL紋理能夠讓Flutter直接使用的條件就是Flutter的上下文需要和平臺音視頻相關(guān)的OpenGL上下文處在一個Share Group下面。
由于Flutter主線程的Context就是GPU的Context，所以在音視頻端主線程中有一些OpenGL操作的話，很有可能使Flutter整個OpenGL被破壞掉。所以需要將所有的OpenGL操作都限制在子線程中。
通過上述這兩個條件的處理，我們就可以在沒有增加GPU消耗的前提下實(shí)現(xiàn)美顏和濾鏡等等功能。
TPM
在經(jīng)過demo驗(yàn)證之后，我們將這個方案應(yīng)用到閑魚音視頻組件中，但改造過程中發(fā)現(xiàn)了一些問題。
上圖是攝像頭采集數(shù)據(jù)轉(zhuǎn)換為紋理的一段代碼，其中有兩個操作：首先是切進(jìn)程，將后面的OpenGL操作都切到cameraQueue中。然后是設(shè)置一次上下文。然后這種限制條件或者說是潛規(guī)則往往在開發(fā)過程中容易被忽略的。而這個條件一旦忽略后果就是出現(xiàn)一些莫名其妙的詭異問題極難排查。因此我們就希望能抽象出一套框架，由框架本身實(shí)現(xiàn)線程的切換、上下文和模塊生命周期等的管理，開發(fā)者接入框架以后只需要安心實(shí)現(xiàn)自己的算法，而不需要關(guān)心這些潛規(guī)則還有其他一些重復(fù)的邏輯操作。
在引入Flutter之前閑魚的音視頻架構(gòu)與大部分音視頻邏輯一樣采用分層架構(gòu)：
1：底層是一些獨(dú)立模塊
2：SDK層是對底層模塊的封裝
3：最上層是UI層。
引入Flutter之后，通過分析各個模塊的使用場景，我們可以得出一個假設(shè)或者說是抽象：音視頻應(yīng)用在終端上可以歸納為視頻幀解碼之后視頻數(shù)據(jù)幀在各個模塊之間流動的過程，基于這種假設(shè)去做Flutter音視頻框架的抽象。
咸魚Flutter多媒體開源組件
整個Flutter音視頻框架抽象分為管線和數(shù)據(jù)的抽象、模塊的抽象、線程統(tǒng)一管理和上下文同一管理四部分。
管線，其實(shí)就是視頻幀流動的管道。數(shù)據(jù)，音視頻中涉及到的數(shù)據(jù)包括紋理、Bit Map以及時間戳等。結(jié)合現(xiàn)有的應(yīng)用場景我們定義了管線流通數(shù)據(jù)以Texture為主數(shù)據(jù)，同時可以選擇性的添加Bit Map等作為輔助數(shù)據(jù)。這樣的數(shù)據(jù)定義方式，避免重復(fù)的創(chuàng)建和銷毀紋理帶來的性能開銷以及多線程訪問紋理帶來的一些問題。也滿足一些特殊模塊對特殊數(shù)據(jù)的需求。同時也設(shè)計(jì)了紋理池來管理管線中的紋理數(shù)據(jù)。
模塊：如果把管線和數(shù)據(jù)比喻成血管和血液，那框架音視頻的場景就可以比喻成器官，我們根據(jù)模塊所在管線的位置抽象出采集、處理和輸出三個基類。這三個基類里實(shí)現(xiàn)了剛才說的線程切換，上下文切換，格式轉(zhuǎn)換等等共同邏輯，各個功能模塊通過集成自這些基類，可以避免很多重復(fù)勞動。
線程：每一個模塊初始化的時候，初始化函數(shù)就會去線程管理的模塊去獲取自己的線程，線程管理模塊可以決定給初始化函數(shù)分配新的線程或者已經(jīng)分配過其他模塊的線程。
這樣有三個好處：
一是可以根據(jù)需要去決定一個線程可以掛載多少模塊，做到線程間的負(fù)載均衡。第二，多線程并發(fā)式能夠保證模塊內(nèi)的OpenGL操作是在當(dāng)前線程內(nèi)而不會跑到主線程去，徹底避免Flutter的OpenGL 環(huán)境被破壞。第三，多線程并行可以充分利用CPU多核架構(gòu)，提升處理速度。
從Flutter端修改Flutter引擎將Context取出后，根據(jù)Context創(chuàng)建上下文的統(tǒng)一管理模塊，每一個模塊在初始化的時候會獲取它的線程，獲取之后會調(diào)用上下文管理模塊獲取自己的上下文。這樣可以保證每一個模塊的上下文都是與Flutter的上下文進(jìn)行Share的，每個模塊之間資源都是共享可見的，F(xiàn)lutter和音視頻native之間也是互相共享可見的。
基于上述框架如果要實(shí)現(xiàn)一個簡單的場景，比如畫面實(shí)時預(yù)覽和濾鏡處理功能，
1：需要選擇功能模塊，功能模塊包括攝像頭模塊、濾鏡處理模塊和Flutter畫面渲染模塊，
2：需要配置模塊參數(shù)，比如采集分辨率、濾鏡參數(shù)和前后攝像頭設(shè)置等，
3：在創(chuàng)建視頻管線后使用已配置的參數(shù)創(chuàng)建模塊
4：最后管線搭載模塊，開啟管線就可以實(shí)現(xiàn)這樣簡單的功能。
上圖為整個功能實(shí)現(xiàn)的代碼和結(jié)構(gòu)圖。
結(jié)合上述音視頻框架，閑魚實(shí)現(xiàn)了Flutter多媒體開源組件。
組要包含四個基本組件分別是：
1：視頻圖像拍攝組件
2：播放器組件
3：視頻圖像編輯組件
4：相冊選擇組件
現(xiàn)在這些組件正在走內(nèi)部開源流程。預(yù)計(jì)9月份，相冊和播放器會實(shí)現(xiàn)開源。
后續(xù)展望和規(guī)劃
1：實(shí)現(xiàn)開頭所說的從底層SDK到UI的全鏈路的跨端開發(fā)。目前底層框架層和模塊層都是各個平臺各自實(shí)現(xiàn)，反而是Flutter的UI端進(jìn)行了跨平臺的統(tǒng)一，所以后續(xù)會將底層也按照音視頻常用做法把邏輯下沉到C++層，盡可能的實(shí)現(xiàn)全鏈路跨平臺。
2：第二部分內(nèi)容為開源共建，閑魚開源的內(nèi)容不僅包括拍攝、編輯組件，還包括了很多底層模塊，希望有開發(fā)者在基于Flutter開發(fā)音視頻應(yīng)用時可以充分利用閑魚開源出的音視頻模塊能力，搭建APP框架，開發(fā)者只要去負(fù)責(zé)實(shí)現(xiàn)特殊需求模塊就可以，盡可能的減少重復(fù)勞動。
如果我們目前的項(xiàng)目是Android的，但是接下來我們希望部分頁面可以使用Flutter進(jìn)行開發(fā)，甚至我們希望在Native頁面中嵌入FlutterUI組件，那么我們該如何實(shí)現(xiàn)呢？
假設(shè)你現(xiàn)在Android項(xiàng)目的目錄的結(jié)構(gòu)是這樣的
這時候如果你想創(chuàng)建一個Flutter模塊，使得Android模塊和Flutter模塊之間可以進(jìn)行交互，我們可以通過Android Studio新建一個Flutter Module，具體過程是：File — New — New Module ，之后選擇Flutter Module，指定Project Location的路徑為
也就是說，最終你的項(xiàng)目結(jié)構(gòu)會是這樣的
接下來在Android Module的 build.gradle 文件中添加flutter依賴
先創(chuàng)建一個Flutter頁面
這里比較重要的是 window.defaultRouteName 這個字段，這個字段可以接收從Native傳遞過來的參數(shù) （下文我們會介紹原生傳遞參數(shù)的方法），也就是說通過這個字段我們就可以進(jìn)行Flutter頁面的路由的分發(fā)
我們可以直接在Android的 MainActivity 中啟動一個 FlutterActivity ，這里的 initialRoute 方法中傳遞的參數(shù)就對應(yīng)Flutter層的 window.defaultRouteName
注意：需要在 AndroidManifest.xml 注冊 FlutterActivity
自己創(chuàng)建一個 FlutterAppActivity 繼承自 FlutterActivity
在 MainActivity 中啟動 FlutterAppActivity （另外別忘了在 AndroidManifest.xml 中注冊 FlutterAppActivity ）
兩種啟動方式的區(qū)別
如果單純只是想打開一個Flutter頁面，兩種方式實(shí)際上基本沒有太大區(qū)別，第一種方式也許還會更簡單一點(diǎn)。但是，在Flutter開發(fā)中，我們往往還需要開發(fā)一些Native插件供Flutter調(diào)用，如果使用復(fù)寫 FlutterActivity 的方式更有利于我們在 FlutterActivity 中注冊我們的Native插件，所以實(shí)際開發(fā)中一般推薦使用第二種方式
擴(kuò)展思考
initialRoute 從名稱上看起來是Flutter提供給我們進(jìn)行Native與Flutter交互的路由跳轉(zhuǎn)的，但是實(shí)際上他就是一個字符串，我們不僅僅可以傳遞一個路由名稱，有時候我們也可以通過這個參數(shù)傳遞一串JSON數(shù)據(jù)，然后在Flutter端進(jìn)行解析，這樣我們就可以通過這個參數(shù)做更多的事情
activity_main.xml
FrameLayout 用于承載Flutter組件
MainActivity.java
使用 FragmentManager 將 FlutterFragment 添加到 FrameLayout 容器中
運(yùn)行結(jié)果
上半部分是原生的TextView，下半部分是Flutter的Text組件
本節(jié)主要介紹了Native和Flutter之間的頁面跳轉(zhuǎn)，以及同一個頁面中Native與Flutter組件的組合。接下來會介紹如何編寫Android插件與Flutter進(jìn)行數(shù)據(jù)交互
APP 啟動頁在國內(nèi)是最常見也是必備的場景，其中啟動頁在 iOS 上算是強(qiáng)制性的要求，其實(shí)配置啟動頁挺簡單，因?yàn)樵?Flutter 里現(xiàn)在只需要：
一般只要配置無誤并且圖片尺寸匹配，基本上就不會有什么問題， 那既然這樣，還有什么需要適配的呢？
事實(shí)上大部分時候 iOS 是不會有什么問題， 因?yàn)? LaunchScreen.storyboard 的流程本就是 iOS 官方用來做應(yīng)用啟動的過渡；而對于 Andorid 而言，直到 12 之前 windowBackground 這種其實(shí)只能算“民間”野路子 ，所以對于 Andorid 來說，這其中就涉及到一個點(diǎn)：
所以下面主要介紹 Flutter 在 Android 上為了這個啟動圖做了哪些騷操作～
在已經(jīng)忘記版本的“遠(yuǎn)古時期” ， FlutterActivity 還在 io.flutter.app.FlutterActivity 路徑下的時候，那時啟動頁的邏輯相對簡單，主要是通過 App 的 AndroidManifest 文件里是否配置了 SplashScreenUntilFirstFrame 來進(jìn)行判斷。
在 FlutterActivity 內(nèi)部 FlutterView 被創(chuàng)建的時候，會通過讀取 meta-data 來判斷是否需要使用 createLaunchView 邏輯 ：
是不是很簡單，那就會有人疑問為什么要這樣做？我直接配置 Activity 的 android:windowBackground 不就完成了嗎？
這就是上面提到的時間差問題， 因?yàn)閱禹摰?Flutter 渲染完第一幀畫面中間，會出現(xiàn)概率出現(xiàn)黑屏的情況，所以才需要這個行為來實(shí)現(xiàn)過渡 。
經(jīng)歷了“遠(yuǎn)古時代”之后， FlutterActivity 來到了 io.flutter.embedding.android.FlutterActivity ， 在到 2.5 版本發(fā)布之前，F(xiàn)lutter 又針對這個啟動過程做了不少調(diào)整和優(yōu)化，其中主要就是 SplashScreen 。
自從開始進(jìn)入 embedding 階段后， FlutterActivity 主要用于實(shí)現(xiàn)了一個叫 Host 的 interface ，其中和我們有關(guān)系的就是 provideSplashScreen 。
默認(rèn)情況下它會從 AndroidManifest 文件里是否配置了 SplashScreenDrawable 來進(jìn)行判斷 。
默認(rèn)情況下當(dāng) AndroidManifest 文件里配置了 SplashScreenDrawable ，那么這個 Drawable 就會在 FlutterActivity 創(chuàng)建 FlutterView 時被構(gòu)建成 DrawableSplashScreen 。
DrawableSplashScreen 其實(shí)就是一個實(shí)現(xiàn)了 io.flutter.embedding.android.SplashScreen 接口的類，它的作用就是：
之后 FlutterActivity 內(nèi)會創(chuàng)建出 FlutterSplashView ，它是個 FrameLayout。
FlutterSplashView 將 FlutterView 和 ImageView 添加到一起， 然后通過 transitionToFlutter 的方法來執(zhí)行動畫，最后動畫結(jié)束時通過 onTransitionComplete 移除 splashScreenView 。
所以整體邏輯就是：
當(dāng)然這里也是分狀態(tài)：
當(dāng)然這個階段的 FlutterActivity 也可以通過 override provideSplashScreen 方法來自定義 SplashScreen 。
看到?jīng)]有，做了這么多其實(shí)也就是為了彌補(bǔ)啟動頁和 Flutter 渲染之間， 另外還有一個優(yōu)化，叫 NormalTheme 。
通過該配置 NormalTheme ，在 Activity 啟動時，就會首先執(zhí)行 switchLaunchThemeForNormalTheme(); 方法將主題從 LaunchTheme 切換到 NormalTheme 。
大概配置完就是如下樣子， 前面分析那么多其實(shí)就是為了告訴你，如果出現(xiàn)問題了，你可以從哪個地方去找到對應(yīng)的點(diǎn) 。
講了那么多， Flutter 2.5 之后 provideSplashScreen 和 io.flutter.embedding.android.SplashScreenDrawable 就被棄用了，驚不喜驚喜，意不意外，開不開心 ？
通過源碼你會發(fā)現(xiàn)，當(dāng)你設(shè)置了 splashScreen 的時候，會看到一個 log 警告：
為什么會棄用？
其實(shí)這個提議是在 這個 issue 上，然后通過 這個 pr 完成調(diào)整。
大概意思就是： 原本的設(shè)計(jì)搞復(fù)雜了，用 OnPreDrawListener 更精準(zhǔn)，而且不需要為了后面 Andorid12 的啟動支持做其他兼容，只需要給 FlutterActivity 等類增加接口開關(guān)即可 。
也就是2.5之后 Flutter 使用 ViewTreeObserver.OnPreDrawListener 來實(shí)現(xiàn)延遲直到加載出 Flutter 的第一幀。
為什么說默認(rèn)情況？ 因?yàn)檫@個行為在 FlutterActivity 里，是在 getRenderMode() == RenderMode.surface 才會被調(diào)用，而 RenderMode 又和 BackgroundMode 有關(guān)心 。
所以在 2.5 版本后， FlutterActivity 內(nèi)部創(chuàng)建完 FlutterView 后就會執(zhí)行一個 delayFirstAndroidViewDraw 的操作。
這里主要注意一個參數(shù)： isFlutterUiDisplayed 。
當(dāng) Flutter 被完成展示的時候， isFlutterUiDisplayed 就會被設(shè)置為 true。
所以當(dāng) Flutter 沒有執(zhí)行完成之前， FlutterView 的 onPreDraw 就會一直返回 false ，這也是 Flutter 2.5 開始之后適配啟動頁的新調(diào)整。
看了這么多，大概可以看到其實(shí)開源項(xiàng)目的推進(jìn)并不是一帆風(fēng)順的，沒有什么是一開始就是最優(yōu)解，而是經(jīng)過多方嘗試和交流，才有了現(xiàn)在的版本，事實(shí)上開源項(xiàng)目里，類似這樣的經(jīng)歷數(shù)不勝數(shù)：
CustomPaint class提供了讓用戶自定義widget的能力，它暴露了一個canvas，可以通過這個canvas來繪制widget，CustomPaint會先調(diào)用painter繪制背景，然后再繪制child，最后調(diào)用foregroundPainter來繪制前景，CustomPaint的定義如下
CustomPaint的繪制過程都將會交給CustomPainter來完成，CustomPainter是個抽象接口，在子類化CustomPainter的時候必須要重寫它的 paint 跟 shouldRepaint 接口，可以根據(jù)自己的場景來選擇性的重寫 hitTest 跟 shouldRebuildSemantics 方法。
canvas--畫布，真正的繪制是由canvas跟paint來完成的，畫布提供了各種繪制的接口來繪制圖形，除此以外畫布還提供了平移、縮放、旋轉(zhuǎn)等矩陣變換接口，畫布都有固定大小跟形狀，還可以使用畫布提供的裁剪接口來裁剪畫布的大小形狀等等。
常用的繪制接口有 更多請查看官方文檔
Paint---筆畫，是用來設(shè)置在畫布上面繪制圖形時的一些筆畫屬性，如：顏色、線寬、繪制模式、抗鋸齒等等。常用屬性有 更多請查看官方文檔
color ： 設(shè)置畫筆顏色
isAntiAlias ： 設(shè)置畫筆是否扛鋸齒
shader : 著色器，填充形狀或者畫線時用到，如果沒設(shè)置將會使用color
strokeWidth ： 設(shè)置畫筆畫線寬度
style ：繪制模式，畫線或充滿
下面這個例子來自于官方，通過 CustomPaint 畫出了一個藍(lán)天跟太陽出來
效果如下：
SliverAppBar 控件，一個 MD 的 AppBar 。屬性和 AppBar 類似，但做的效果比 AppBar 更加強(qiáng)大。相同的屬性具體可以看 Flutter 之 Scaffold 控件 ， 里面有 AppBar 控件的介紹。那么還有些沒有的屬性：
結(jié)合 elevation 使用，當(dāng)elevation 不為 0 的時候，是否顯示陰影
AppBar 展開時候的高度
true 的時候下滑AppBar優(yōu)先滑動展示，展示完成后才給滑動控件滑動
snap 為 true, 則 floating 也要為 true 。true 的時候根據(jù)手指松開的位置展開或者收縮AppBar
appBar 收縮到最小高度的時候 appBar 是否可見
SliverAppBar 往往做為 CustomScrollView 的第一個子元素，根據(jù)滾動控件的偏移量或者浮動的位置來改變 SliverAppBar 的高度。所以具體用法如下
另外在上面設(shè)計(jì)到 FlexibleSpaceBar 控件，F(xiàn)lexibleSpaceBar 有個 collapseMode 屬性
為 Sliver 系列控件添加一個 padding 。如給上面 SliverAppBar 添加一個 Padding 。
多行多列的列表控件，相當(dāng)于 Android 的 GridView，有兩個屬性
SliverChildDelegate，這里有兩種方式創(chuàng)建
SliverGridDelegate，也是有兩種方式創(chuàng)建
結(jié)合上面展示效果
和上面 delegate 屬性一樣，需要創(chuàng)建一個 SliverChildDelegate 。
比 SliverList 多一個 itemExtent 屬性，設(shè)置 item 的高度 。item 里面的子控件無法再改動高度。
上面 SliverAppBar 就是結(jié)合 SliverPersistentHeader 實(shí)現(xiàn)的效果，SliverPersistentHeader 需要一個 SliverPersistentHeaderDelegate 。 實(shí)現(xiàn) SliverPersistentHeaderDelegate 有 4 個方法需要重寫
至于效果，具體效果具體分析。
有一個 Widget 屬性，主要作用是在 CustomScrollView 里面添加多種不同布局的樣式。
占滿一屏或者比一屏更多的布局，
滑動剩余部分展示的布局
窗口小部件(Widget)可以在Paint之前應(yīng)用Transform進(jìn)行轉(zhuǎn)換，通過Transform可以對widget進(jìn)行平移、旋轉(zhuǎn)、縮放等矩陣變換。不像RotatedBox在layout前就對Widget進(jìn)行旋轉(zhuǎn)操作，Transform是在Widget繪制前進(jìn)行轉(zhuǎn)換，這意味著在計(jì)算Widget的顯示需要占用多少空間時，不會去考慮Transform變換。
例子
在垂直方向移動15個單位距離
例子
順時針旋轉(zhuǎn)45°
例子
放大1.5倍
重慶分公司
重慶分公司
