文章內容是我在學習Flutter過程中對知識點的梳理和總結各淀。如有不對的地方，歡迎指出乳蛾。
2018年前 H5的性能瓶頸和RN的停更 導致業(yè)界對跨平臺開發(fā)失去信心。直到2018年10月Google推出首個Flutter跨平臺解決方案亭畜，打破整個移動開發(fā)的方向总放。
去年MWC大展上發(fā)布首個Beta版后蛤虐，Flutter 1.0正式版于2018年12月召開的Flutter Live 2018上正式發(fā)布获印。今年2月27在巴塞羅那召開的MWC發(fā)布會上品山，Google正式發(fā)布了Flutter跨平臺UI框架的1.2版本胆建。新版本最大的改變就是引入了對Android App Bundles的支持，可有效打包Android APP并創(chuàng)建即時應用的最新技術肘交。此外該框架還幫助開發(fā)者接受應用內支付奠定了基礎笆载，并添加了很多基于Web的工具。
Flutter 的發(fā)展速度遠超我們的想象涯呻。作為Google的親兒子凉驻，未來一定會大力發(fā)展Flutter的，所以現在學習Flutter是比較好的優(yōu)勢复罐。再看一下招聘情況沿侈，以Boss直聘為例，目前已經陸陸續(xù)續(xù)有公司在招聘Flutter開發(fā)工程師了市栗，并且公司相對比較高。
Flutter是什么咳短？
Flutter是谷歌的移動UI框架填帽，可以快速在iOS和Android上構建高質量的原生用戶界面。 Flutter可以與現有的代碼一起工作咙好。在全世界篡腌，Flutter正在被越來越多的開發(fā)者和組織使用，并且Flutter是完全免費勾效、開源的嘹悼。
Flutter可以和現在的工程相結合，擁有比較好的開發(fā)體驗层宫，它有一個熱重載(hot reload)技術杨伙，讓我們改變UI之后，及時的看到UI效果萌腿，并且保證我們上一次測試的狀態(tài)限匣。
Flutter擁有很豐富的UI組件，如：material cupertino毁菱，可以構建一個靈活的且富有表現力的UI米死。我在工作過程中經常和設計師溝通，他們經常使用蘋果的設計風格進行設計贮庞，這導致我們的產品基本全都使用IOS的設計風格峦筒，之前一直要自定義VIew去實現，十分復雜〈吧鳎現在我們有了Flutter物喷，用Flutter內置的UI組件庫，我們很容易的就可以做到這一點。
Flutter它還有比較好的性能脯丝，幾乎可以和原生應用相媲美商膊，甚至在Android低端機上比原生的表現還要優(yōu)異。難道Flutter這么好的技術只能在移動平臺上去使用嗎宠进？很顯然Google的野心可不止如此晕拆，目前我已知的Flutter支持的平臺已經有Android IOS Web Windows Linux 和Mac OS ，除此之外材蹬，Flutter還支持嵌入式实幕。
這是三個平臺的SDK，有興趣的老鐵可以先Star堤器，后續(xù)慢慢做研究昆庇。
Flutter: https://github.com/flutter/flutter
Desktop: https://github.com/google/flutter-desktop-embedding
WebSite: https://github.com/flutter/website
目前的跨平臺解決方案
- Web/Hybrid
也被稱為 Hybrid 技術，它基于 Web 相關技術來實現界面及功能（代表框架：phonegap闸溃、cordova）整吆。
- JSCore
通過虛擬Dom樹來構建UI，映射成原生UI組件辉川，通過JSCore橋接調用原生服務（代表框架：ReactNative表蝙、Weex）。
- Native
將某個語言編譯為二進制文件乓旗，生成動態(tài)庫或打包成 apk/ipa/xap 文件（代表框架：Flutter）府蛇。
為什么選擇Flutter
網上有很多Flutter與其他跨平臺解決方案的多維度對比的資料（建議了解一下RN與Flutter的對比），感興趣的可以查閱一下屿愚，這里就不一一列舉了汇跨。
個人的觀點是：Flutter是一場革命！
- 跨平臺性
Flutter基于圖像繪制引擎進行渲染妆距，在不同平臺下繪制效果是絕對一致的穷遂，能做到真正的跨平臺，一處寫處處運行娱据。
- 性能優(yōu)異性
不同于H5通過DOM渲染 和RN映射組件塞颁，Flutter直接基于native進行繪制。性能上完全超過原生吸耿。
- 熱重載性
Android原生開發(fā)會遇到“編譯-打包-安裝“三部曲祠锣。開發(fā)效率遲遲得不到提升。熱重載技術在Flutter內完美體現咽安。
Flutter詳情介紹
- Dart語法編譯
Dart 是一種弱類型伴网、跨平臺的客戶端開發(fā)語言。具有專門為客戶端優(yōu)化妆棒、高生產力澡腾、快速高效沸伏、可移植易學的風格。Dart主要由Google負責開發(fā)和維護动分。
- Flutter插件
Flutter使用的Dart語言無法直接調用Android系統(tǒng)提供的Java接口毅糟，這時就需要使用插件來實現中轉。Flutter官方提供了豐富的原生接口封裝澜公。
Flutter系統(tǒng)架構
Flutter分為三大部分：
1.由Dart語言負責的Framwork層
2.Dart語法執(zhí)行器
3.Skia圖像處理引擎
其實Flutter的核心是Skia姆另，Dart更像是在外面包裝了一層，然后去調用Skia的接口坟乾，最終都是被Skia去執(zhí)行迹辐；Text是一些組件，只不過通過Dart去執(zhí)行甚侣，但最終也是被Skia去執(zhí)行明吩，既然Skia這么重要，那我們簡單了解一下吧殷费！
Skia引擎詳解
Skia
2005年Skia圖像處理引擎成立印荔，用來展示Chrome 火狐 和其他Google自家的產品使用。
2007年 第一個Android系統(tǒng)問世详羡，于是Google開發(fā)者將Skia移植到Android平臺躏鱼。
Skia作為一個2D的圖形系統(tǒng)，包括繪圖殷绍，渲染，顯示圖片都是用Skia完成鹊漠。
那Skia是如何渲染圖片和控件的呢主到？
1.渲染圖片
我們以BItmap為例：在加載一張圖片的時候，我們可通過Bitmap去加載躯概，一般兩種方式登钥，第一種通過Bitmap.createBitmap()方式創(chuàng)建，第二種是通過 BitmapFactory方式娶靡，但其實兩種方式是一樣的牧牢，第二種會調用第一種的代碼，所以我們直接通過Bitmap.createBitmap()去看源碼是如何實現的姿锭。
隨便找一個BitMap.createBitmap()入口,進去會發(fā)現有很多createBitmap()方法重載塔鳍，一路瘋狂點擊進入，最終我們找到一個不一樣的方法nativeCreate()呻此，如圖：
好轮纫，勝利就在眼前，我們繼續(xù)點進去焚鲜。咦掌唾！我們驚奇的發(fā)現是竟然調用的是native方法放前。
通過native這個方法來看，我們的一張圖片生成的內存放在哪個區(qū)域是不是就很明顯了呢糯彬？既然是調用了native方法返回的Bitmap凭语，那肯定就是native堆去開辟內存對不對。那我們的Bitmap.java算什么呢撩扒？它其實就相當于一個中介者似扔，相當于一座橋，它連接著java層又連接著native層却舀。
這時候我們想點
nativeCreate()去看如何實現的虫几，但點不進去了，那我們還要不要繼續(xù)往下找呢挽拔？既然我們要看skia辆脸，那肯定是要的，怎么辦呢螃诅，這時我們就要去看Android系統(tǒng)源碼了啡氢。
Android系統(tǒng)源碼下載
我們打開源碼，依次打開frameworks -> base -> core -> jni -> android术裸，如下圖：
graphics和opengl這兩個就代表著Android圖像處理引擎庫倘是，Skia主導，會調用opengl里面的內容進行一個原理性的繪制袭艺。我們繼續(xù)好Bitmap的native實現類搀崭，
打開文件，搜我們要找的
nativeCreate方法
找到了猾编， 那他所對應的的實現函數是什么呢瘤睹，顯然是
Bitmap_creator，好答倡，接下來我們找Bitmap_creator這個函數轰传。
找到了，那我們剛才
nativeCreate方法返回的Bitmap實際上是由Bitmap_creator這個方法返回的瘪撇。這里面的代碼我們不需要去了解获茬，但我們發(fā)現很多結構體是以SK開頭的。那SK是什么呢倔既，我們再來看這個Bitmap.cpp的頭文件：除了Android系統(tǒng)自帶的頭文件之外恕曲，有很多引用一SK開頭的頭文件。那SK和Skia又有什么聯系呢渤涌，是不是取了Skia的的首字母呀码俩？對的，是這樣的歼捏。再繼續(xù)看稿存，我們發(fā)現真正一張圖片加載實際是SkBitmap來進行實現笨篷。
既然Skia在Android的系統(tǒng)源碼里面，那肯定找得到相關的蹤跡瓣履，找到了率翅，是不是應該扣一波666。
Android原生圖片繪制流程如下：
2.渲染控件
所有的View是不是都要重寫
onDraw()方法靶溆冕臭？是的，那我們以ImageView為例去看一下它的onDraw()方法是如何實現的燕锥。發(fā)現
onDraw()方法都是通過canvas來進行繪制辜贵。繼續(xù)
又是調用了這么多native方法，既然和圖片繪制類似归形，那我們就不在這看canvas.cpp了托慨，有興趣的可以去看一下，也是在
graphics包下暇榴。總結：
我們所有的圖片厚棵、控件以及XML布局都是經過native來繪制，native最終又調用了Skia圖像處理引擎蔼紧，這也就是我們Android的界面為什么能夠顯示婆硬，為什么我們可以在XML去寫一個布局，其實這都和Skia密不可分奸例。同理彬犯，Flutter可以運行在IOS上，是因為Dart通過Flutter引擎調查吊，Flutter引擎又調用了之下IOS的JEPG圖像處理引擎谐区，這樣也是Flutter為什么可以實現跨平臺基本原理。
題外話：Skia和JEPG有什么關系呢菩貌？其實就像Retrofit和OkHttp關系，Skia是在JEPG的基礎上進行了二次封裝重荠。更進一步可以說Android和IOS其實是用的同樣的圖片處理引擎庫箭阶。
Flutter性能優(yōu)異
我們通過兩張圖（第一張Android原生渲染流程，第二張Flutter渲染流程）來看戈鲁，可以發(fā)現Flutter較原生而言仇参，中間環(huán)節(jié)更少，這也就意味著更加高效婆殿，可能我們寫小demo時看不出什么區(qū)別來诈乒，但是隨著我們項目需求的不斷增加，那Flutter的優(yōu)越性就越來越明顯了婆芦。
其他
至于為什么選擇Flutter怕磨，Flutter的發(fā)展趨勢喂饥、Flutter與其他跨平臺解決方案的對比，RN與Flutter的渲染對比以及Flutter的環(huán)境搭建肠鲫，網上的相關資料很多且整理的十分詳盡员帮，這里不一一介紹，大家可以去查閱导饲。
Flutter學習資料
- Flutter文檔和SDK
文檔參考
https://flutter.dev
https://flutterchina.club/
SDK下載
https://github.com/flutter/flutter
https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.2.1-stable.zip
https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.2.1-stable.zip
https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_v1.2.1-stable.tar.xz
下一篇文章我將對Dart基礎進行匯總整理捞高，敬請期待。
