国产精品久久久AV久久久_97国产露脸精品国产麻豆_国产欧美一区二区三区视频

編輯點評：國內首個Flutter教程軟件

谷歌開源一款構建用戶界面工具包軟件，Flutter以它開源，免費且擁有寬松的開源協議而被很多用戶使用，Flutter教程app是國內首款免費的Flutter教程應用，包含了基礎教程，高級教程，多種語言支持，還有代碼預覽等功能，歡迎免費下載。

Flutter教程軟件手機版

功能介紹

基礎教程：

Widgets、Layouts、Lists、AppBar、Navigation、Async、Animation(基礎)

高級教程：

Animation(專業)、Multimedia、Persistence、State Management、Plugins、Charts、Networking、Firbase集成

收藏功能：

針對自己喜歡的功能收藏起來。下次出快速找到

Flutter教程軟件手機版

夜間模式：

支持黑暗與明亮兩種主題切換

多語言支持：

支持中文環境與英語環境

代碼預覽：

針對教程代碼有支持代碼預覽，并支持瀏覽器訪問源碼地址

快速搜索

快速檢索你想要的功能

Flutter框架介紹

跨平臺應用的框架，沒有使用WebView或者系統平臺自帶的控件，使用自身的高性能渲染引擎(Skia)自繪，

界面開發語言使用dart，底層渲染引擎使用C, C++

組合大于繼承，控件本身通常由許多小型、單用途的控件組成，結合起來產生強大的效果，類的層次結構是扁平的，以最大化可能的組合數量

Flutter功能介紹

創建樹

創建widget樹

調用runApp(rootWidget)，將rootWidget傳給rootElement,做為rootElement的子節點,生成Element樹，由Element樹生成Render樹。

Widget:存放渲染內容、視圖布局信息,widget的屬性最好都是immutable(如何更新數據呢？查看后續內容)

Element:存放上下文，通過Element遍歷視圖樹，Element同時持有Widget和RenderObject

RenderObject:根據Widget的布局屬性進行layout，paint Widget傳人的內容

更新樹

為什么widget都是immutable？

flutter界面開發是一種響應式編程，主張simple is fast，flutter設計的初衷希望數據變更時發送通知到對應的可變更節點（可能是一個StatefullWidget子節點,也可以是rootWidget）,由上到下重新create widget樹進行刷新，這種思路比較簡單，不用關心數據變更會影響到哪些節點。

widget重新創建，element樹和renderObject樹是否也重新創建？

widget只是一個配置數據結構，創建是非常輕量的，加上flutter團隊對widget的創建/銷毀做了優化，不用擔心整個widget樹重新創建所帶來的性能問題，但是renderobject就不一樣了，renderobject涉及到layout、paint等復雜操作，是一個真正渲染的view，整個view 樹重新創建開銷就比較大，所以答案是否定的。

樹的更新規則

找到widget對應的element節點，設置element為dirty，觸發drawframe, drawframe會調用element的performRebuild()進行樹重建

widget.build() == null, deactive element.child,刪除子樹，流程結束

element.child.widget == NULL, mount 的新子樹，流程結束

element.child.widget == widget.build() 無需重建，否則進入流程5

Widget.canUpdate(element.child.widget, newWidget) == true，更新child的slot，element.child.update(newWidget)(如果child還有子節點，則遞歸上面的流程進行子樹更新),流程結束，否則轉6

Widget.canUpdate(element.child.widget, newWidget) ！= true（widget的classtype 或者 key 不相等），deactivew element.child，mount 新子樹

注意事項：

element.child.widget == widget.build(),不會觸發子樹的update，當觸發update的時候，如果沒有生效，要注意widget是否使用舊widget，沒有new widget，導致update流程走到該widget就停止了

子樹的深度變化，會引起子樹重建，如果子樹是一個復雜度很高的樹，可以使用GlobalKey做為子樹widget的key。GlobalKey具有緩存功能

如何觸發樹更新

全局更新：調用runApp(rootWidget)，一般flutter啟動時調用后不再會調用

局部子樹更新, 將該子樹做StatefullWidget的一個子widget，并創建對應的State類實例，通過調用state.setState() 觸發該子樹的刷新

Widget

StatefullWidget vs StatelessWidget

StatelessWidget:無中間狀態變化的widget，需要更新展示內容就得通過重新new，flutter推薦盡量使用StatelessWidget

StatefullWidget:存在中間狀態變化，那么問題來了，widget不是都immutable的，狀態變化存儲在哪里？flutter 引入state的類用于存放中間態，通過調用state.setState()進行此節點及以下的整個子樹更新

State 生命周期

initState(): state create之后被insert到tree時調用的

didUpdateWidget(newWidget):祖先節點rebuild widget時調用

deactivate():widget被remove的時候調用，一個widget從tree中remove掉，可以在dispose接口被調用前，重新instert到一個新tree中

didChangeDependencies():

初始化時，在initState()之后立刻調用

當依賴的InheritedWidget rebuild,會觸發此接口被調用

build():

After calling [initState].

After calling [didUpdateWidget].

After receiving a call to [setState].

After a dependency of this [State] object changes (e.g., an[InheritedWidget] referenced by the previous [build] changes).

After calling [deactivate] and then reinserting the [State] object into the tree at another location.

dispose():Widget徹底銷毀時調用

reassemble(): hot reload調用

注意事項：

A頁面push一個新的頁面B,A頁面的widget樹中的所有state會依次調用deactivate(), didUpdateWidget(newWidget)、build()（這里懷疑是bug，A頁面push一個新頁面，理論上并沒有將A頁面進行remove操作），當然從功能上，沒有看出來有什么異常

當ListView中的item滾動出可顯示區域的時候，item會被從樹中remove掉，此item子樹中所有的state都會被dispose，state記錄的數據都會銷毀，item滾動回可顯示區域時，會重新創建全新的state、element、renderobject

使用hot reload功能時，要特別注意state實例是沒有重新創建的，如果該state中存在一下復雜的資源更新需要重新加載才能生效，那么需要在reassemble()添加處理，不然當你使用hot reload時候可能會出現一些意想不到的結果，例如，要將顯示本地文件的內容到屏幕上，當你開發過程中，替換了文件中的內容，但是hot reload沒有觸發重新讀取文件內容，頁面顯示還是原來的舊內容。

使用者必知的Flutter優缺點

Flutter優點

Flutter的優點非常明顯，如果你選擇一個跨平臺框架，與眾多基于html的跨平臺框架相比，Flutter絕對是體驗最好，性能與構建思路幾乎最接近原生開發的框架。

性能強大，流暢

Flutter對比weex和react native相比，性能的強大是有目共睹的。基于dom樹渲染原生組件，很難與直接在原生視圖上繪圖比肩性能，Google作為一個輪子大廠，直接在兩個平臺上重寫了各自的UIKit，對接到平臺底層，減少UI層的多層轉換，UI性能可以比肩原生，這個優勢在滑動和播放動畫時尤為明顯。

路由設計優秀

Flutter的路由傳值非常方便，push一個路由，會返回一個Future對象（也就是Promise對象），使用await或者.then就可以在目標路由pop，回到當前頁面時收到返回值。這個反向傳值的設計基本是甩了微信小程序一條街了。彈出dialog等一些操作也是使用的路由方法，幾乎不用擔心出現傳值困難

單例模式

Flutter支持單例模式，單例模式的實現也非常簡單。單例模式很好的解決了一些問題。相比之下，js的單例則并不是一個真正的單例，或者說不是一個簡單的單例，這也是受限于js所運行的環境。單例模式并不總是合理的，容易被濫用。但是在App的初期開發中，往往一個容易實現的單例可以幫助我們快速完成一些邏輯的搭建。

優秀的動畫設計

Flutter的動畫簡單到不可思議，動畫對象會根據屏幕刷新率每秒產生很多個（一般是60個）浮點數，只需要將一個組件屬性通過部件（Tween）關聯到動畫對象上，Flutter會確保在每一幀渲染正確的組件，從而形成連貫的動畫。這種十分暴力的操作在Flutter上卻看不到明顯的卡頓，這也是Flutter的一個魔力所在。相比之下其他跨平臺框架幾乎不能設計動畫……往往會遭遇非常嚴重的性能問題。

UI跨平臺穩定

Google直接在兩個平臺上在底層重寫了UIKit，不依賴于Css等外部解釋器，幾乎不存在UI表達不理想，渲染不正常的情況，可以獲得非常穩定的UI表達效果。Css換個瀏覽器就有不同的表現，基于Css的跨平臺框架很難獲得穩定的UI表現。

可選靜態的語言，語言特性優秀

Dart是一個靜態語言，這也是相對于js的一個優勢。Dart可以被編譯成js，但是看起來更像java。靜態語言可以避免錯誤，獲得更多的編輯器提示詞，極大的增加可維護性。很多js庫也已經用ts重寫了，Vue3.0的底層也將全部使用ts編寫，靜態語言的優勢不言而喻。

Flutter缺點

假裝跨平臺，躲不開原生代碼

這是最大的問題，跨平臺框架說白了就是UI跨平臺，最后還是在原生平臺運行，本來兩個平臺就有天壤之別，一套代碼就想吃掉iOS和Android在實際應用之中其實根本就不現實。Flutter具有與原生代碼互相調用的能力固然非常科學，但是問題反而顯得更加明顯——我一個前端工程師上哪里去知道什么是UIViewController，什么是Activity呢？我要是雙端都熟悉，學習Flutter就顯得很沒有必要。這是一個很矛盾的點，特別是在團隊里，只有幾個前端突然想學Flutter，是絕對做不來大項目的，如果有原生開發者，那就沒必要搞Flutter了。

組合而不是繼承的思路

Flutter提倡“組合”，而不是“繼承”。在iOS開發中，我們經常會繼承UIView，重寫UIView的某個生命周期函數，再添加一些方法和屬性，來完成一個自定義的View。但是在Flutter中這些都是不可能的——屬性都是final的，例如你繼承了了一個Container，你是不能在它的生命周期中修改他的屬性的。你始終需要嵌套組合幾種Widget，例如Row，Container，ListView等Widget。這種方法非常不符合直覺，初學時很難想明白如何構建一個完整的組件。

Widget的類型難以選擇

Flutter的Widget分為StatefulWidget和StatelessWidget兩種，一種是帶狀態的一種是不帶狀態的，剛開發的時候很難想明白用哪個，因為StatelessWidget也能存值，其實區別就在于框架重構UI的時候會使用State來重構，如果是StatelessWidget，暫時存進去的值就沒了。但是問題遠不止這么簡單，好在只是有點麻煩，并不影響產品性能。

糟糕的UI控件API

雖然google盡可能的讓我們通過構造函數定制化Widget，但是也難免有遺漏的。例如，又一次我想修改一個Appbar的高度，居然沒有找到關于高度的屬性，通過閱讀源碼發現，高度是寫死（const）的。上文已經說過，無法通過生命周期來改變組件屬性，自己寫Appbar顯得非常沒必要，畢竟我還是想使用Appbar的各種方便的功能。最后我只能把他的源碼全部復制出來，直接修改高度來使用。初學框架，和一些初級開發者是不可能有迅速閱讀源碼的能力的（作為框架也不應該產生如此問題）。一些定制化的UI的Api設計經常有缺失，好在我已經基本習慣了。除了Appbar這種復雜的組件，自己寫一個小組件也并不費事。

糟糕的資源管理設計

這里是最蠢的，Flutter支持動態加載不同分辨率的圖片，但是目錄設計太鬼畜了。簡單的說，Sketch導出的多分辨率資源，幾乎不可能直接拖到Flutter里用，極其，極其，麻煩。

總結

Flutter主要的坑就在于需要非常了解原生的環境，其實跨平臺的框架都是如此，想要通過跨平臺的API就拿下雙端的開發任務，對認真學習的原生開發者來說也是不公平的。主要的優勢則在于動畫流暢，很多開發者反應比原生安卓還流暢（存疑），至少在iOS上是看不到卡頓的，安卓上動畫也很穩定，性能上展示了Google的硬實力