1一切皆為widget

flutter 和Android 有所不一樣,android包含 布局(各種layout),組件(button,textview 等等);flutter的一切都是widget,包括最頂層的頁面布局都是一個widget,包含許多其他的widget,一個頁面則有多個widget組合而成.
widget 根據(jù)不同的功能可以分為:

• 結(jié)構(gòu)元素(如按鈕或菜單)
• 文本樣式(字體或者顏色方案)
• 布局的一種(如填充,對齊,居中)

• ...
  事實上可以理解成,一個flutter的頁面是有一棵樹型的widget組成,包括根節(jié)點,和樹枝,樹葉都是 一個widget, widget嵌套其他的widget而已.對于一些Android中的屬性值,例如 對齊方式,居中,padding,在flutter中都是一個widget.

  
  image.png

通常我們app中會使用到兩種 widget, statelessWidget 和statefulWidget 表示無狀態(tài)widget和有狀態(tài)widget.

2 statefulwidget

• statefulwidget:這些widget需要根據(jù)用戶的交互或者其他因素進行更改.通常一個statefulwidget 會包含一個State 狀態(tài),需要改變狀態(tài)的值可以State.setState 方法.對于statefulWidget中的狀態(tài)值,可以重寫 creatState時初始化的,或者是在有訂閱State的對象中(例如Stream,ChangeNotifier 等對象).flutter框架會在生成StatefulWidget樹的時候調(diào)用creatState.

StatefulWidget,如果在構(gòu)造器鐘使用了GlobalKey 表示key的時候,在進行移動到另一顆樹的時候,會保持狀態(tài)對象不會改變.因為擁有GlobalKey的widget在整個樹形結(jié)構(gòu)中只會放在一個位置,使用GlobalKey的widget則會關(guān)聯(lián)這個元素.

2.1StatefulWidget兩個基本類型

• 1第一個類型: 和資源相關(guān),在初始化時調(diào)用State.initState準(zhǔn)備使用的時候調(diào)用State.dispose,但是它不依賴與InheritedWidget也不需要調(diào)用State.setState.這些widget廣泛使用在app或者一個頁面的root,通過ChangeNotifier,Stream或者其他對象和他的子widget通訊.有狀態(tài)的widget遵循這樣的模式相對來說比較低耗(根據(jù)cpu和gpu的周期講)因為他們只需要編譯一次后面就不需要更新.因此他們可以做一些復(fù)雜深層的構(gòu)建方法.
• 2 第二種類型: 使用State.setState或者依賴InheritedWidget的widget.這些widget典型的會在app的生命周期中重新構(gòu)建多次,因此對widget重新構(gòu)建最小化影響顯得尤為重要.(也可以使用State.initState或者State.didChangeDependencies分配資源,但是最重要的還是重新構(gòu)建渲染)

有一些可以減少statefulwidget重新構(gòu)建的技術(shù)手段:

• 把state push到樹結(jié)構(gòu)的葉子上,而不是根節(jié)點.例如,如果你的page有一個秒鐘,創(chuàng)建一個clock widget來處理更新的狀態(tài),而不要在page的頂層(根節(jié)點)中放置state.
• 最小化通過build,和任何widget創(chuàng)建的結(jié)點樹.
• 如果子樹不需要改變,緩存表示子樹的widget,并在每次需要使用的時候重用.重用比重新構(gòu)建更有效
• 盡可能使用constwidget.(作用和使用緩存widget并且重用它的一樣)
• 避免改變已經(jīng)創(chuàng)建好的子樹的深度,或者改變創(chuàng)建好的子樹的widget的類型.可以通過用IgnorePointer來包裝widget,并且控制IgnorePointer.ignoring.這是因為,改變子樹的深度需要進行widget的重構(gòu),重新布局,并且重繪子樹的實體,而改變屬性只需要盡小可能的改變樹的渲染(例如IgnorePointer,不需要重新布局,和重繪子樹的實體)
• 由于某些原因如果確實需要進行改變widget的深度,考慮包裝widget子樹的common 部分,讓其采用GlobalKey

3.Statelesswidget

statelesswidget是一個小部件，具體地說是用于描述用戶界面的一部分構(gòu)建描述用戶界面的其他小部件的宿主。 構(gòu)建過程以遞歸方式繼續(xù)，直到用戶界面的描述是完全具體的（例如，包含完全是RenderObjectWidget，它描述了具體的RenderObject）

當(dāng)您是用戶界面的一部分時，statelesswidget非常有用描述不依賴于配置以外的任何其他內(nèi)容對象本身的信息和widget inflate的BuildContext。 對于可以動態(tài)改變的組合物，例如 由于具有內(nèi)部時鐘驅(qū)動狀態(tài)，或取決于某些系統(tǒng)狀態(tài)，考慮使用StatefulWidget

3.1性能考慮

statelesswidget 的build方法通常僅在三個中調(diào)用情況：第一次將widget插入樹中，當(dāng)時widget的父級更改其配置，當(dāng)[InheritedWidget]依賴于更改時。

如果widget的父級將定期更改widget的配置，或者如果它取決于經(jīng)常改變的繼承widget，這樣優(yōu)化[build]方法的性能以維持流暢渲染性能就變得很重要。

3.2 技術(shù)優(yōu)化手段:

• 對任何widget最小化構(gòu)建方法和創(chuàng)建的節(jié)點數(shù)量。 例如，考慮只使用Align或CustomSingleChildLayout而不是精心安排 Row，Column，Padding和SizedBox來以特別花哨的方式定義child。 考慮一個CustomPaint小部件而不是復(fù)雜的多層次 Container和Decoration用于繪制正確的圖形效果。
• 盡可能使用constwidget.
• 考慮將statelessWidget重構(gòu)為statefulwidget它可以使用StatefulWidget中描述的一些技術(shù)，例如緩存子樹的公共部分并在更改時使用GlobalKey 樹的結(jié)構(gòu)。

class GreenFrog extends StatelessWidget {const GreenFrog({ Key key }) : super(key: key);@override Widget build(BuildContext context) { return new Container(color: const Color(0xFF2DBD3A)); } } 

class Frog extends StatelessWidget { const Frog({Key key,this.color: const Color(0xFF2DBD3A),this.child,}) : super(key: key); final Color color; final Widget child;@override Widget build(BuildContext context) { return new Container(color: color, child: child);} } 

按照慣例，widget構(gòu)造函數(shù)僅使用命名參數(shù)。 命名參數(shù)可以使用@required標(biāo)記為必需。 按照慣例，第一個參數(shù)是key，最后一個參數(shù)是child，children或者相似的。

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://caipiao93.cn/17589.html