Flutter技術調研報告

Flutter技術調研報告-20190125

做者: Android團隊 - 餘自然 楊繼宇

1.Flutter簡介

1.1.什麼是Flutter

Flutter是Google開發的一套全新的跨平臺、開源UI框架，支持iOS、Android系統開發，而且是將來新操做系統Fuchsia的默認開發套件。自從2017年5月發佈第一個版本以來，目前Flutter已經發布了近60個版本，而且在2018年12月初發布1.0穩定版。

在Flutter誕生以前，已經有許多跨平臺UI框架的方案，好比基於WebView的Cordova、AppCan等，還有使用HTML+JavaScript渲染成原生控件的React Native、Weex等。

Flutter與用於構建移動應用程序的其它大多數框架不一樣，由於Flutter既不使用WebView，也不使用操做系統的原生控件。Flutter使用Skia做爲其2D渲染引擎。

注意：Android系統內置Skia,iOS系統未內置Skia，因此ios的包會比Android更大。

1.2.Flutter架構圖

• Flutter Framework：純 Dart實現的 SDK
  • 底下兩層：底層UI庫，提供動畫、手勢及繪製能力
  • Rendering層：構建UI樹，當UI樹有變化時，會計算出有變化的部分，而後更新UI樹，最終將UI樹繪製到屏幕上
  • Widgets層：基礎組件庫，提供了 Material 和Cupertino兩種視覺風格的組件庫
• Flutter Engine：純 C++實現的 SDK
  • Skia:渲染引擎
  • Dart:Dart運行時
  • Text:文字排版引擎

1.3.Flutter渲染機制

1.Flutter 佈局渲染的總體流程

在Flutter界面渲染過程分爲三個階段：佈局、繪製、合成，佈局和繪製在Flutter框架中完成，合成則交由引擎負責。

添加合成圖層的理由：因爲直接交付給 GPU 多圖層視圖數據是低效率的，可能會重複繪製，因此還須要進行一步圖層的合成，最後才交由引擎負責光柵化視圖

2.虛擬DOM技術

Widget樹：就是咱們的UI組件樹，但這個只是一種描述信息，渲染引擎是不認識的

RenderObject樹：這纔是渲染引擎真的認識的，咱們須要將 Widget 轉化爲能用來渲染視圖的 Render Object

虛擬DOM解決了一個重要的矛盾：就是 DOM 操做的性能損耗與頻繁進行局部 DOM 操做的矛盾

沒用虛擬DOM以前：DOM會在每一次元素更新到來之時渲染一次DOM

用了虛擬DOM以後：虛擬DOM會先彙總各個元素的更新狀況，經過diff算法計算出與原來 DOM 樹的差別，最後經過一次 DOM 更新解決

1.4.Flutter編譯機制

Flutter之因此採用Dart語言，其中很重要的一點就是由於Dart同時支持JIT和AOT兩種編譯方式

• 基於JIT的快速開發週期：Flutter在開發階段採用，採用JIT模式，這樣就避免了每次改動都要進行編譯，實現極大的節省了開發時間；

• 基於AOT的發佈包: Flutter在發佈時能夠經過AOT生成高效的ARM代碼以保證應用性能。而JavaScript則不具備這個能力。

1. JIT，Just-in-time,動態(即時)編譯，邊運行邊編譯;
2. AOT，Ahead Of Time，指運行前編譯;

1.5.Flutter項目結構

1. android:android平臺相關代碼
2. ios:ios平臺相關代碼
3. lib:flutter相關代碼，咱們主要編寫的代碼就在這個文件夾
4. test:用於存放測試代碼
5. pubspec.yaml:配置文件，通常存放一些第三方的依賴。主要是用Dart的pub包管理工具

1.6.目前已使用Flutter的團隊

1. 美團
2. 閒魚
3. 騰訊NOW直播
4. Github等國外大廠

2.本次調研的目標

2.1.打包成aar，集成到老Android項目

已完成，集成過程基本順利，除了一個assets裏面的icudtl.dat文件，由於gradle腳本 3.0以上的bug，須要本身手動複製到app的assets目錄下，其它的問題都不大。

2.2.集成grpc

已完成，Dart調用grpc請求的方式很是簡單，一行代碼能夠搞定，都不須要額外的封裝了

2.3.完成多Item佈局的列表，實現App首頁效果

已完成，實現過程當中主要踩了兩個坑：

1. 滾動組件裏面再嵌套滾動組件，須要指定高度，否則子組件就是無限高度，致使報錯
2. 縱向滑動嵌套橫向滑動，須要作一下適配

其它的一些問題，主要仍是API的熟悉度問題，寫多了佈局之後，問題都不大。

3.Flutter的優點

1. 跨平臺，同一套代碼適用於Android和ios兩個平臺，能夠節省開發資源、測試資源
2. 原生性能，使用Skia做爲其2D渲染引擎，既不使用WebView，也不使用操做系統的原生控件，這樣不只能夠保證在Android和iOS上UI的一致性，並且也能夠避免對原生控件依賴而帶來的限制及高昂的維護成本
3. 開發效率高，Flutter的熱重載能夠快速地進行測試、構建UI、添加功能並更快地修復錯誤
4. 從底層C++到高層Dart，可擴展性高
5. 總體開發環境要求不高，輕量編輯器+模擬器便可完成開發，已支持IDE:Android Studio和VSCode

4.目前發現的問題

4.1.重要問題

1. 其官方編程語言爲Dart，是一門全新的語言。因此說，上手成本比較高，對於移動端開發人員，語言以及框架都是全新的，整個技術棧的積累也都得從頭開始
2. 編譯後的包體積較大
3. 第三方工具庫，目前還比較欠缺，須要本身造輪子
4. 錯誤提示信息不夠友好，難以定位到具體代碼行
5. 遇到問題的寂寞，目前應用的人羣還較少，有時候遇到問題在社區裏面搜不到解決方案

4.2.通常問題

1. CPU架構兼容性問題，默認生成的庫文件只支持armeabi-v7a,後期應該能夠修改編譯配置解決此問題
2. 多個Feature同時請求時，可能有的收不到回調，這個多是Dart的消息機制有關，須要進一步研究，非必現
3. WebView的支持很弱
4. 音視頻的支持很弱
5. 總體API像Android ,對iOS開發者上手可能不是很是友好
6. 圖片資源的多倍率適配問題，必須提供一倍圖，會增大應用體積
7. 如何在Flutter中實現懸停效果，須要調研
8. 如何在Flutter中實現富文本效果，須要調研
9. Flutter和Android/ios之間的通信機制，須要調研（已有MethodChannel方案，還沒有實現）
10. Flutter的國際化支持，須要調研
11. Fluter UI實現嵌套層次太多，可閱讀程度不高（很低 ）
12. 境外環境依賴（有國內鏡像），新建項目 dart package get 不穩定
13. Flutter的設計圖標準，好比像素值，和Android和ios的設計標準有區別
14. 圖片和文字混排，實現比較麻煩
15. ListView的視圖複用機制，須要調研，感受View多了會有點卡頓
16. 網絡圖片的緩存機制，須要調研，目前Image因此支持網絡圖片，可是關於它的緩存，還不清楚

5.Demo調研結果

1. Dart語法上手難度：中等，Dart的語法和響應式編程理念和原生開發仍是有必定差異，更偏向Web開發
2. UI實現難度：低，在繪製複雜頁面方便，比原生更有優點，自定義組件很是方便
3. API豐富性：通常，目前成熟的第三方庫還比較少
4. 性能：好

• 幀率：目前只繪製了首頁，FPS基本在50fps以上，幾乎達到了通常遊戲的標準

  

• 內存：佔用低，首頁內存佔用在60m左右，比Android原生低 Flutter繪製的首頁，佔用60m左右

  

Android原生繪製的首頁，內置內存佔用240m左右

5. 安裝包體積：較大，僅僅繪製了一個首頁，安裝包就達到了15M。Android項目集成Flutter以前，apk體積是22M，集成Flutter以後，apk體積是32M，增長了10M。

總結：在UI方面用Flutter開發確實頗有優點，能夠加快開發速度，可是涉及系統服務方面的地方，還須要進一步調研

6.Demo信息

1. Apk下載地址

7.Demo用到的組件

在Flutter中，一切皆組件，這一點須要特別注意

1. StatelessWidget-無狀態組件
2. StatefulWidget-有狀態組件
3. Image-圖片
4. Icon-圖標
5. Text-文字
6. Container-容器組件，內置Padding、寬高、背景、邊框等細節操做
7. Center-居中顯示Layout
8. Column-縱向排列Layout
9. Row-橫向排列Layout
10. Wrap-橫向排列Layout，自動換行
11. CustomScrollView-支持嵌套滾動子控件的滾動視圖
12. SliverToBoxAdapter-包裝普通控件，適配CustomScrollView
13. ListView-單一的List組件，不支持PullRefresh
14. GideView-網格組件
15. Divider-分割線組件

8.相關資源

1. Flutter官網
2. Flutter中文網
3. Dart官網
4. Github/Flutter
5. grpc官網
6. 幫你整理一份快速入門Flutter的祕籍
7. Dart中文社區
8. 玩Android/Flutter資料
9. Github/grpc-dart
10. Github/protobuf
11. 官方pub
12. Github/awesome-flutter-cn
13. 閒魚技術/Flutter