1.Flutter簡(jiǎn)介

1.1.什么是Flutter

Flutter是Google開發(fā)的一套全新的跨平臺(tái)、開源UI框架，支持iOS、Android系統(tǒng)開發(fā)，并且是未來新操作系統(tǒng)Fuchsia的默認(rèn)開發(fā)套件。自從2017年5月發(fā)布第一個(gè)版本以來，目前Flutter已經(jīng)發(fā)布了近60個(gè)版本，并且在2018年12月初發(fā)布1.0穩(wěn)定版。

在Flutter誕生之前，已經(jīng)有許多跨平臺(tái)UI框架的方案，比如基于WebView的Cordova、AppCan等，還有使用HTML+JavaScript渲染成原生控件的React Native、Weex等。

Flutter與用于構(gòu)建移動(dòng)應(yīng)用程序的其它大多數(shù)框架不同，因?yàn)镕lutter既不使用WebView，也不使用操作系統(tǒng)的原生控件。Flutter使用Skia作為其2D渲染引擎。

注意：Android系統(tǒng)內(nèi)置Skia,iOS系統(tǒng)未內(nèi)置Skia，所以ios的包會(huì)比Android更大。

image

1.2.Flutter架構(gòu)圖

image

• Flutter Framework：純 Dart實(shí)現(xiàn)的 SDK
  • 底下兩層：底層UI庫，提供動(dòng)畫、手勢(shì)及繪制能力
  • Rendering層：構(gòu)建UI樹，當(dāng)UI樹有變化時(shí)，會(huì)計(jì)算出有變化的部分，然后更新UI樹，最終將UI樹繪制到屏幕上
  • Widgets層：基礎(chǔ)組件庫，提供了 Material 和Cupertino兩種視覺風(fēng)格的組件庫
• Flutter Engine：純 C++實(shí)現(xiàn)的 SDK
  • Skia:渲染引擎
  • Dart:Dart運(yùn)行時(shí)
  • Text:文字排版引擎

1.3.Flutter渲染機(jī)制

1.Flutter 布局渲染的整體流程

在Flutter界面渲染過程分為三個(gè)階段：布局、繪制、合成，布局和繪制在Flutter框架中完成，合成則交由引擎負(fù)責(zé)。

添加合成圖層的理由：由于直接交付給 GPU 多圖層視圖數(shù)據(jù)是低效率的，可能會(huì)重復(fù)繪制，所以還需要進(jìn)行一步圖層的合成，最后才交由引擎負(fù)責(zé)光柵化視圖

image

2.虛擬DOM技術(shù)

image

Widget樹：就是我們的UI組件樹，但這個(gè)只是一種描述信息，渲染引擎是不認(rèn)識(shí)的

RenderObject樹：這才是渲染引擎真的認(rèn)識(shí)的，我們需要將 Widget 轉(zhuǎn)化為能用來渲染視圖的 Render Object

虛擬DOM解決了一個(gè)重要的矛盾：就是 DOM 操作的性能損耗與頻繁進(jìn)行局部 DOM 操作的矛盾

沒用虛擬DOM之前：DOM會(huì)在每一次元素更新到來之時(shí)渲染一次DOM

用了虛擬DOM之后：虛擬DOM會(huì)先匯總各個(gè)元素的更新情況，通過diff算法計(jì)算出與原來 DOM 樹的差異，最后通過一次 DOM 更新解決

1.4.Flutter編譯機(jī)制

Flutter之所以采用Dart語言，其中很重要的一點(diǎn)就是因?yàn)镈art同時(shí)支持JIT和AOT兩種編譯方式

• 基于JIT的快速開發(fā)周期：Flutter在開發(fā)階段采用，采用JIT模式，這樣就避免了每次改動(dòng)都要進(jìn)行編譯，實(shí)現(xiàn)極大的節(jié)省了開發(fā)時(shí)間；

• 基于AOT的發(fā)布包: Flutter在發(fā)布時(shí)可以通過AOT生成高效的ARM代碼以保證應(yīng)用性能。而JavaScript則不具有這個(gè)能力。

1. JIT，Just-in-time,動(dòng)態(tài)(即時(shí))編譯，邊運(yùn)行邊編譯;
2. AOT，Ahead Of Time，指運(yùn)行前編譯;

1.5.Flutter項(xiàng)目結(jié)構(gòu)

image

1. android:android平臺(tái)相關(guān)代碼
2. ios:ios平臺(tái)相關(guān)代碼
3. lib:flutter相關(guān)代碼，我們主要編寫的代碼就在這個(gè)文件夾
4. test:用于存放測(cè)試代碼
5. pubspec.yaml:配置文件，一般存放一些第三方的依賴。主要是用Dart的pub包管理工具

1.6.目前已使用Flutter的團(tuán)隊(duì)

1. 美團(tuán)
2. 閑魚
3. 騰訊NOW直播
4. Github等國外大廠

2.本次調(diào)研的目標(biāo)

2.1.打包成aar，集成到老Android項(xiàng)目

已完成，集成過程基本順利，除了一個(gè)assets里面的icudtl.dat文件，因?yàn)間radle腳本 3.0以上的bug，需要自己手動(dòng)復(fù)制到app的assets目錄下，其它的問題都不大。

2.2.集成grpc

已完成，Dart調(diào)用grpc請(qǐng)求的方式非常簡(jiǎn)單，一行代碼可以搞定，都不需要額外的封裝了

2.3.完成多Item布局的列表，實(shí)現(xiàn)App首頁效果

已完成，實(shí)現(xiàn)過程中主要踩了兩個(gè)坑：

1. 滾動(dòng)組件里面再嵌套滾動(dòng)組件，需要指定高度，不然子組件就是無限高度，導(dǎo)致報(bào)錯(cuò)
2. 縱向滑動(dòng)嵌套橫向滑動(dòng)，需要做一下適配

其它的一些問題，主要還是API的熟悉度問題，寫多了布局以后，問題都不大。

3.Flutter的優(yōu)勢(shì)

1. 跨平臺(tái)，同一套代碼適用于Android和ios兩個(gè)平臺(tái)，可以節(jié)省開發(fā)資源、測(cè)試資源
2. 原生性能，使用Skia作為其2D渲染引擎，既不使用WebView，也不使用操作系統(tǒng)的原生控件，這樣不僅可以保證在Android和iOS上UI的一致性，而且也可以避免對(duì)原生控件依賴而帶來的限制及高昂的維護(hù)成本
3. 開發(fā)效率高，F(xiàn)lutter的熱重載可以快速地進(jìn)行測(cè)試、構(gòu)建UI、添加功能并更快地修復(fù)錯(cuò)誤
4. 從底層C++到高層Dart，可擴(kuò)展性高
5. 整體開發(fā)環(huán)境要求不高，輕量編輯器+模擬器即可完成開發(fā)，已支持IDE:Android Studio和VSCode

4.目前發(fā)現(xiàn)的問題

4.1.重要問題

1. 其官方編程語言為Dart，是一門全新的語言。所以說，上手成本比較高，對(duì)于移動(dòng)端開發(fā)人員，語言以及框架都是全新的，整個(gè)技術(shù)棧的積累也都得從頭開始
2. 編譯后的包體積較大
3. 第三方工具庫，目前還比較欠缺，需要自己造輪子
4. 錯(cuò)誤提示信息不夠友好，難以定位到具體代碼行
5. 遇到問題的寂寞，目前應(yīng)用的人群還較少，有時(shí)候遇到問題在社區(qū)里面搜不到解決方案

4.2.一般問題

1. CPU架構(gòu)兼容性問題，默認(rèn)生成的庫文件只支持armeabi-v7a,后期應(yīng)該可以修改編譯配置解決此問題
2. 多個(gè)Feature同時(shí)請(qǐng)求時(shí)，可能有的收不到回調(diào)，這個(gè)可能是Dart的消息機(jī)制有關(guān)，需要進(jìn)一步研究，非必現(xiàn)
3. WebView的支持很弱
4. 音視頻的支持很弱
5. 整體API像Android ,對(duì)iOS開發(fā)者上手可能不是非常友好
6. 圖片資源的多倍率適配問題，必須提供一倍圖，會(huì)增大應(yīng)用體積
7. 如何在Flutter中實(shí)現(xiàn)懸停效果，需要調(diào)研
8. 如何在Flutter中實(shí)現(xiàn)富文本效果，需要調(diào)研
9. Flutter和Android/ios之間的通訊機(jī)制，需要調(diào)研（已有MethodChannel方案，尚未實(shí)現(xiàn)）
10. Flutter的國際化支持，需要調(diào)研
11. Fluter UI實(shí)現(xiàn)嵌套層次太多，可閱讀程度不高（很低 ）
12. 境外環(huán)境依賴（有國內(nèi)鏡像），新建項(xiàng)目 dart package get 不穩(wěn)定
13. Flutter的設(shè)計(jì)圖標(biāo)準(zhǔn)，比如像素值，和Android和ios的設(shè)計(jì)標(biāo)準(zhǔn)有區(qū)別
14. 圖片和文字混排，實(shí)現(xiàn)比較麻煩
15. ListView的視圖復(fù)用機(jī)制，需要調(diào)研，感覺View多了會(huì)有點(diǎn)卡頓
16. 網(wǎng)絡(luò)圖片的緩存機(jī)制，需要調(diào)研，目前Image所以支持網(wǎng)絡(luò)圖片，但是關(guān)于它的緩存，還不清楚

5.Demo調(diào)研結(jié)果

1. Dart語法上手難度：中等，Dart的語法和響應(yīng)式編程理念和原生開發(fā)還是有一定差別，更偏向Web開發(fā)
2. UI實(shí)現(xiàn)難度：低，在繪制復(fù)雜頁面方便，比原生更有優(yōu)勢(shì)，自定義組件非常方便
3. API豐富性：一般，目前成熟的第三方庫還比較少
4. 性能：好

• 幀率：目前只繪制了首頁，F(xiàn)PS基本在50fps以上，幾乎達(dá)到了一般游戲的標(biāo)準(zhǔn)

  
  
  image

• 內(nèi)存：占用低，首頁內(nèi)存占用在60m左右，比Android原生低
  Flutter繪制的首頁，占用60m左右

  
  
  image

Android原生繪制的首頁，內(nèi)置內(nèi)存占用240m左右

image

5. 安裝包體積：較大，僅僅繪制了一個(gè)首頁，安裝包就達(dá)到了15M。Android項(xiàng)目集成Flutter之前，apk體積是22M，集成Flutter之后，apk體積是32M，增加了10M。

總結(jié)：在UI方面用Flutter開發(fā)確實(shí)很有優(yōu)勢(shì)，可以加快開發(fā)速度，但是涉及系統(tǒng)服務(wù)方面的地方，還需要進(jìn)一步調(diào)研

6.Demo信息

Apk下載地址

7.Demo用到的組件

在Flutter中，一切皆組件，這一點(diǎn)需要特別注意

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

8.相關(guān)資源

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