天天看點

Flutter之旅: StatelessWidget

小部件是Flutter應用程式的基本構模組化塊,每一個都是不可變的聲明,也是使用者界面的一部分。例如button,text,color以及布局所用到的padding等等。

下面我們來看flutter_github中的一個執行個體。

Flutter之旅: StatelessWidget

圈選中的item隻有兩個資訊,頭像與名稱。為了避免代碼的重複使用,将其抽離成一個獨立的widget,具體代碼如下

它繼承于StatelessWidget,StatelessWidget的特性是無狀态,資料不可變化。這個性質正好符合我們将要抽離的部件。抽離的部件需要做頭像與名稱的展示,沒有任何形式上的互動變化。唯一的一個互動也是點選,但它并沒有涉及資料的改變。是以在代碼中将這些資料定義成final類型。本質就如Text部件,并沒有如輸入文本或者帶有動畫的部件一樣随着時間内部屬性會有所變化。

既然沒有任何變化,那麼我們也可以将其構造函數定義為const類型。

有了上面的部件抽離,我們就可以直接在ListView中使用該無狀态部件

在ListView中引用FollowItemView,并傳入不變的資料即可。

現在StatelessWidget的使用大家都會了,那它是如何調用的呢?

下面我們來看下它的呈現原理。

正如開頭所說的将小部件作為Flutter應用建構的基礎,在Flutter中我們将小部件的建構稱作為Widget Tree,即小部件樹。它就像是應用程式的藍圖,我們将藍圖建立好,然後内部會通過藍圖去建立對應顯示在螢幕上的element元素。它包含了藍圖上對應的小部件的配置資訊。是以對應的還有一個Element Tree,即元素樹。

每一個StatelWidget都有一個StatelessElement,内部會通過createElement()方法進行建立其執行個體

同時在StatelessElement中會通過buid()方法來擷取StalessWidget中所建構的藍圖Widget,并将元素顯示到螢幕上。

Widget Tree與Element Tree之間的互動如下

Flutter之旅: StatelessWidget

當然如果你想了解Android原生,相信flutter_github的純Android版本AwesomeGithub是一個不錯的選擇