1一切皆為widget

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

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

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

  
  image.png

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

2 statefulwidget

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

StatefulWidget,如果在構造器鐘使用了GlobalKey 表示key的時候,在進行移動到另一顆樹的時候,會保持狀態對象不會改變.因為擁有GlobalKey的widget在整個樹形結構中只會放在一個位置,使用GlobalKey的widget則會關聯這個元素.

2.1StatefulWidget兩個基本類型

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

有一些可以減少statefulwidget重新構建的技術手段:

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

3.Statelesswidget

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

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

3.1性能考慮

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

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

3.2 技術優化手段:

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

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構造函數僅使用命名參數。 命名參數可以使用@required標記為必需。 按照慣例，第一個參數是key，最后一個參數是child，children或者相似的。

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.junxiaosheng.cn/17589.html