Flutter知識點

Flutter

1 Flutter是什么?

Flutter是谷歌的移動UI框架,可以快速在iOS和Android上構建高質(zhì)量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界,F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用,并且Flutter是完全免費、開源的。

優(yōu)點

  • 熱重載(Hot Reload),利用Android Studio直接一個ctrl+s就可以保存并重載,模擬器立馬就可以看見效果,相比原生慢長的編譯過程強很多;
  • 一切皆為Widget的理念,對于Flutter來說,手機應用里的所有東西都是Widget,通過可組合的空間集合、豐富的動畫庫以及分層擴展的架構實現(xiàn)了富有感染力的靈活界面設計;
  • 借助可移植的GPU加速的渲染引擎以及高性能本地代碼運行時以達到跨平臺設備的高質(zhì)量用戶體驗。 簡單來說就是:最終結果就是利用Flutter構建的應用在運行效率上會和原生應用差不多。

缺點

  • 不支持熱更新;
  • 三方庫有限,需要自己造輪子;
  • Dart語言編寫,增加了學習難度,并且學習了Dart之后無其他用處,相比JS和Java來說。

2 Flutter特性有那些?

1 跨平臺

2 熱重載。

3 Flutter 中的生命周期

  1. initState:插入渲染樹時調(diào)用,只調(diào)用一次,widget創(chuàng)建執(zhí)行的第一個方法,可以再里面初始化一些數(shù)據(jù),以及綁定控制器。

  2. didChangeDependencies:在 initState() 后調(diào)用。當State對象的依賴發(fā)生變化時會被調(diào)用;例如:在之前build() 中包含了一個InheritedWidget,然后在之后的build() 中InheritedWidget發(fā)生了變化,那么此時InheritedWidget的子widget的didChangeDependencies()回調(diào)都會被調(diào)用。InheritedWidget這個widget可以由父控件向子控件共享數(shù)據(jù),案例可以參考 scoped_model開源庫。

  3. build :它主要是用于構建Widget子樹的,調(diào)用次數(shù):多次,初始化之后開始繪制界面,當setState觸發(fā)的時候會再次被調(diào)用

  4. didUpdateWidget:組件狀態(tài)改變時候調(diào)用,可能會調(diào)用多次

  5. deactivate:當State對象從樹中被移除時,會調(diào)用此回調(diào)。

  6. dispose():當State對象從樹中被永久移除時調(diào)用;通常在此回調(diào)中釋放資源。

  7. reassemble:此回調(diào)是專門為了開發(fā)調(diào)試而提供的,在熱重載(hot reload)時會被調(diào)用,此回調(diào)在Release模式下永遠不會被調(diào)用。

4 flutter widget、Element、 RenderObject關系

· Widget實際上就是Element的配置數(shù)據(jù),Widget樹實際上是一個配置樹,而真正的UI渲染樹是由Element構成;不過,由于Element是通過Widget生成,所以它們之間有對應關系,所以在大多數(shù)場景,我們可以寬泛地認為Widget樹就是指UI控件樹或UI渲染樹。

· 一個Widget對象可以對應多個Element對象。這很好理解,根據(jù)同一份配置(Widget),可以創(chuàng)建多個實例(Element)。

· 從創(chuàng)建到渲染的大體流程是:根據(jù)Widget生成Element,然后創(chuàng)建相應的RenderObject并關聯(lián)到Element.renderObject屬性上,最后再通過RenderObject來完成布局排列和繪制。

flutter使用RenderObjects管理傳統(tǒng)UI對象的許多職責(例如維護布局的狀態(tài))。RenderObjects在幀之間保持不變,flutter的輕量級Widgets告訴框架在狀態(tài)之間改變RenderObjects。

· Widget 僅用于存儲渲染所需要的信息。

· RenderObject 負責管理布局、繪制等操作。

· Element 才是這顆巨大的控件樹上的實體。

Layer

iOS的每一個UIView都有一個layer,flutter的render object不一定存在layer,一般情況下一個renderObject子樹都渲染在一個layer上,那么什么renderObject具有l(wèi)ayer,子renderObject怎么渲染到這個layer?

  • 當一個renderObject的 alwaysNeedsCompositing == true 或者isRepaintBoundary == true,renderOject會有對應的compositing layer
  • 子renderObject會對目標layer返回對應的offsetLayer, 目標compositing layer再根據(jù)offset合成一個渲染的紋理buffer

5 didChangeDependencies有兩種情況會被調(diào)用。

1 創(chuàng)建時候在initState 之后被調(diào)用

2 在依賴的InheritedWidget發(fā)生變化的時候會被調(diào)

6 Flutter跟ReactNative、weex 等有什么不同?

1 WebViews 最早的跨平臺方案是基于JaveScript 和 WebView的,像PhoneGap、Cordova、Ionic等。UI通過WebView來顯示html代碼,系統(tǒng)服務則通過一個中間層橋接到JaveScript中去。

2 原生App

蘋果2008年發(fā)布iOS,Google 2009年發(fā)布Android,它們的SDK是基于兩種不同的編程語言Objective-C 和 Jave.現(xiàn)在又有了Swift和Kotlin

3 React Native RN不僅橋接系統(tǒng)服務,也將系統(tǒng)UI也橋接到了JaveScript中,這樣寫出來的UI最終也會渲染成原生的控件。

4 Flutter Flutter使用Dart語言開發(fā),Dart可以被編譯(AOT)成不同平臺的本地代碼,讓Flutter可以直接和平臺通訊而不需要一個中間的橋接過程,從而提高了性能。

7 Widget的兩種類型是什么?

1 StatelessWidget: 一旦創(chuàng)建就不關心任何變化,在下次構建之前都不會改變。它們除了依賴于自身的配置信息(在父節(jié)點構建時提供)外不再依賴于任何其他信息。比如典型的Text、Row、Column、Container等,都是StatelessWidget。它的生命周期相當簡單:初始化、通過build()渲染。

2 StatefulWidget: 在生命周期內(nèi),該類Widget所持有的數(shù)據(jù)可能會發(fā)生變化,這樣的數(shù)據(jù)被稱為State,這些擁有動態(tài)內(nèi)部數(shù)據(jù)的Widget被稱為StatefulWidget。比如復選框、Button等。State會與Context相關聯(lián),并且此關聯(lián)是永久性的,State對象將永遠不會改變其Context,即使可以在樹結構周圍移動,也仍將與該context相關聯(lián)。當state與context關聯(lián)時,state被視為已掛載。StatefulWidget由兩部分組成,在初始化時必須要在createState()時初始化一個與之相關的State對象

8 Flutter 和 Dart的關系是什么?

   Flutter是一個使用Dart語言開發(fā)的跨平臺移動UI框架,通過自建繪制引擎,能提高性能、高保真地進行移動開發(fā)。Dart囊括了多數(shù)編程語言的優(yōu)點,它更符合Flutter構建界面的方式

9 mixin extends implement 之間的關系?

繼承(關鍵字 extends)、混入 mixins (關鍵字 with)、接口實現(xiàn)(關鍵字 implements)。這三者可以同時存在,前后順序是extends -> mixins -> implements。

Flutter中的繼承是單繼承,子類重寫超類的方法要用@Override,子類調(diào)用超類的方法要用super。

在Flutter中,Mixins是一種在多個類層次結構中復用類代碼的方法。mixins的對象是類,mixins絕不是繼承,也不是接口,而是一種全新的特性,可以mixins多個類,mixins的使用需要滿足一定條件。

10 什么是Navigator? MaterialApp做了什么?

Navigator是在Flutter中負責管理維護頁面堆棧的導航器。MaterialApp在需要的時候,會自動為我們創(chuàng)建Navigator。Navigator.of(context),會使用context來向上遍歷Element樹,找到MaterialApp提供的_NavigatorState再調(diào)用其push/pop方法完成導航操作。

11 Widget 唯一標識Key有那幾種?

在flutter中,每個widget都是被唯一標識的。這個唯一標識在build或rendering階段由框架定義。該標識對應于可選的Key參數(shù),如果省略,F(xiàn)lutter將會自動生成一個。

在flutter中,主要有4種類型的Key:GlobalKey(確保生成的Key在整個應用中唯一,是很昂貴的,允許element在樹周圍移動或變更父節(jié)點而不會丟失狀態(tài))、LocalKey、UniqueKey、ObjectKey。

12 Future和Isolate有什么區(qū)別?

future是異步編程,調(diào)用本身立即返回,并在稍后的某個時候執(zhí)行完成時再獲得返回結果。在普通代碼中可以使用await 等待一個異步調(diào)用結束。

isolate是并發(fā)編程,Dartm有并發(fā)時的共享狀態(tài),所有Dart代碼都在isolate中運行,包括最初的main()。每個isolate都有它自己的堆內(nèi)存,意味著其中所有內(nèi)存數(shù)據(jù),包括全局數(shù)據(jù),都僅對該isolate可見,它們之間的通信只能通過傳遞消息的機制完成,消息則通過端口(port)收發(fā)。isolate只是一個概念,具體取決于如何實現(xiàn),比如在Dart VM中一個isolate可能會是一個線程,在Web中可能會是一個Web Worker。

13 Stream 與 Future是什么關系?

Stream 和 Future 是 Dart 異步處理的核心 API。Future 表示稍后獲得的一個數(shù)據(jù),所有異步的操作的返回值都用 Future 來表示。但是 Future 只能表示一次異步獲得的數(shù)據(jù)。而 Stream 表示多次異步獲得的數(shù)據(jù)。比如界面上的按鈕可能會被用戶點擊多次,所以按鈕上的點擊事件(onClick)就是一個 Stream 。簡單地說,F(xiàn)uture將返回一個值,而Stream將返回多次值。Dart 中統(tǒng)一使用 Stream 處理異步事件流。Stream 和一般的集合類似,都是一組數(shù)據(jù),只不過一個是異步推送,一個是同步拉取。

14 await for 如何使用?

await for是不斷獲取stream流中的數(shù)據(jù),然后執(zhí)行循環(huán)體中的操作。它一般用在直到stream什么時候完成,并且必須等待傳遞完成之后才能使用,不然就會一直阻塞。

15 Flutter的架構主要分成三層:Framework,Engine和Embedder。

Framework使用dart實現(xiàn),包括Material Design風格的Widget,Cupertino(針對iOS)風格的Widgets,文本/圖片/按鈕等基礎Widgets、渲染、動畫、手勢等。此部分的核心代碼是:flutter倉庫下的flutter package,以及sky_engine倉庫下的io,async,ui(dart:ui庫提供了Flutter框架和引擎之間的接口)等package。

Engine使用C++實現(xiàn),主要包括:Skia,Dart和Text。Skia是開源的二維圖形庫,提供了適用于多種軟硬件平臺的通用API。其已作為Google Chrome,Chrome OS,Android, Mozilla Firefox, Firefox OS等其他眾多產(chǎn)品的圖形引擎,支持平臺還包括Windows7+,macOS 10.10.5+,iOS8+,Android4.1+,Ubuntu14.04+等。

Dart部分主要包括:Dart Runtime,Garbage Collection(GC),如果是Debug模式的話,還包括JIT(Just In Time)支持。Release和Profile模式下,是AOT(Ahead Of Time)編譯成了原生的arm代碼,并不存在JIT部分。Text即文本渲染,其渲染層次如下:衍生自minikin的libtxt庫(用于字體選擇,分隔行)。HartBuzz用于字形選擇和成型。Skia作為渲染/GPU后端,在Android和Fuchsia上使用FreeType渲染,在iOS上使用CoreGraphics來渲染字體。

Embedder是一個嵌入層,即把Flutter嵌入到各個平臺上去,這里做的主要工作包括渲染Surface設置,線程設置,以及插件等。從這里可以看出,F(xiàn)lutter的平臺相關層很低,平臺(如iOS)只是提供一個畫布,剩余的所有渲染相關的邏輯都在Flutter內(nèi)部,這就使得它具有了很好的跨端一致性。

16 Flutter 如何與 Android iOS 通信?

Flutter與原生系統(tǒng)主要有三種通信形式:MethodChannel和EventChannel及BasicMessageChannel。

1 BasicMessageChannel:用于傳遞字符串和半結構化的信息,持續(xù)通信,收到消息后可以回復此次消息,如:Native將遍歷到的文件信息陸續(xù)傳遞到Dart,在比如:Flutter將從服務端陸續(xù)獲取到信息交給Native加工,Native處理完返回等;

2 MethodChannel:用于傳遞方法調(diào)用。(method invocation)一次性通信:如Flutter調(diào)用Native拍照;

3 EventChannel: 用于數(shù)據(jù)流(event streams)的通信,持續(xù)通信,收到消息后無法回復此次消息,通常用于Native向Dart的通信,如:手機電量變化,網(wǎng)絡連接變化,陀螺儀,傳感器等;

這三種類型的類型的Channel都是全雙工通信,即A <=> B,Dart可以主動發(fā)送消息給platform端,并且platform接收到消息后可以做出回應,同樣,platform端可以主動發(fā)送消息給Dart端,dart端接收數(shù)后返回給platform端。

17 Flutter中的Widget、State、Context 的核心概念?是為了解決什么問題?

1 Widget: 在Flutter中,幾乎所有東西都是Widget。將一個Widget想象為一個可視化的組件(或與應用可視化方面交互的組件),當你需要構建與布局直接或間接相關的任何內(nèi)容時,你正在使用Widget。

2 Widget樹: Widget以樹結構進行組織。包含其他Widget的widget被稱為父Widget(或widget容器)。包含在父widget中的widget被稱為子Widget。

3 Context: 僅僅是已創(chuàng)建的所有Widget樹結構中的某個Widget的位置引用。簡而言之,將context作為widget樹的一部分,其中context所對應的widget被添加到此樹中。一個context只從屬于一個widget,它和widget一樣是鏈接在一起的,并且會形成一個context樹。

4 State: 定義了StatefulWidget實例的行為,它包含了用于”交互/干預“Widget信息的行為和布局。應用于State的任何更改都會強制重建Widget。

5 這些狀態(tài)的引入,主要是為了解決多個部件之間的交互和部件自身狀態(tài)的維護。

18 ****Dart****部分**

19 Dart是值傳遞還是引用傳遞

dart是值傳遞

20 Dart 當中的 「..」表示什么意思?

Dart 當中的 「..」意思是 「級聯(lián)操作符」,為了方便配置而使用。

「..」和「.」不同的是 調(diào)用「..」后返回的相當于是 this,而「.」返回的則是該方法返回的值 。

21 Dart 的作用域

Dart 沒有 「public」「private」等關鍵字,默認就是公開的,私有變量使用 下劃線 _開頭

22 Dart 是不是單線程模型?是如何運行的?

Dart 是單線程模型,如何運行的看這張圖:

[圖片上傳失敗...(image-cff6d3-1598350597924)]

Dart 在單線程中是以消息循環(huán)機制來運行的,其中包含兩個任務隊列,一個是“微任務隊列” microtask queue,另一個叫做“事件隊列” event queue。

入口函數(shù) main() 執(zhí)行完后,消息循環(huán)機制便啟動了。首先會按照先進先出的順序逐個執(zhí)行微任務隊列中的任務,當所有微任務隊列執(zhí)行完后便開始執(zhí)行事件隊列中的任務,事件任務執(zhí)行完畢后再去執(zhí)行微任務,如此循環(huán)往復,生生不息。

23 final 和 const區(qū)別

const 的值在編譯期確定,final 的值要到運行時才確定

24 說一下Dart異步編程中的 Stream數(shù)據(jù)流?

在Dart中,Stream 和 Future 一樣,都是用來處理異步編程的工具。它們的區(qū)別在于,Stream 可以接收多個異步結果,而Future 只有一個。Stream 的創(chuàng)建可以使用 Stream.fromFuture,也可以使用 StreamController 來創(chuàng)建和控制。還有一個注意點是:普通的Stream 只可以有一個訂閱者,如果想要多訂閱的話,要使用 asBroadcastStream()。

25 App 打包上傳

在flutter項目中分別打開 Android和IOS 文件,和原生開發(fā)方式的打包上架形式是一樣的。

命令打包

cd 到文件目錄

iOS:Flutter Build ios –-release

Android : flutter build apk –release

26 啟動頁和圖標,添加方式和iOS,android原有的方式一樣。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,963評論 6 542
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,348評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,083評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,706評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,442評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,802評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,795評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,983評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,542評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,287評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,486評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,030評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,710評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,116評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,412評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,224評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,462評論 2 378