Flutter學習筆記4（Widget）

Widget與Element

• Widget實際上就是Element的配置數據，Widget樹實際上是一個配置樹，UI渲染樹是由Element完成；Element是通過Widget生成，它們之間有對應關係，大多數場景下，可以認爲Widget樹就是UI控件樹
• 一個Widget對象可以對應多個Element對象。根據同一份配置（Widget），可以創建多個實例（Element）。

StatelessWidget

用於不需要維護狀態的場景，它通常在build方法中通過嵌套其它Widget來構建UI，在構建過程中會遞歸的構建其嵌套的Widget.

class Echo extends StatelessWidget {
  const Echo({
    Key key,
    @required this.text,
    this.backgroundColor: Colors.grey,
  }) : super(key: key);

  final String text;
  final Color backgroundColor;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       body: Center(
        child: Container(
          color: backgroundColor,
          child: Text(text),
        ),
      ),
    );
  }
}

Stateful Widget

• StatefulElement 繼承自Element類，與StatefulWidget相對應（作爲其配置數據）。StatefulElement中可多次調用createState()來創建State對象
• createState() 用於創建和Stateful widget相關的狀態，可被多次調用。

State

一個StatefulWidget類會對應一個State類，State表示與其對應的StatefulWidget要維護的狀態。

• State中的保存的狀態信息

1. build時可被同步讀取
2. 在widget生命週期中可以被改變，當State被改變時，調用其setState()方法通知Flutter framework狀態發生改變，Flutter framework在收到消息後，會重新調用其build方法重新構建widget樹，從而更新UI。

• State中有兩個常用屬性

1. widget : 與該State關聯的widget。注意，這種關聯並非永久的，因爲在應用生命週期中，UI樹上的某一個節點的widget實例在重新構建時可能會變化，但State實例只會在第一次插入到樹中時被創建，當在重新構建時，如果widget被修改了，Flutter framework會動態設置State.widget爲新的widget實例。
2. context : BuildContext類的一個實例，表示widget的上下文，是操作widget在樹中位置的一個句柄，它包含了一些查找、遍歷當前Widget樹的方法。每一個widget都有一個自己的context對象。

State生命週期

• 打開路由

I/flutter ( 5436): initState
I/flutter ( 5436): didChangeDependencies
I/flutter ( 5436): build

• 在CounterWidget從widget樹中移除時

I/flutter ( 5436): deactive
I/flutter ( 5436): dispose

1. initState：當Widget第一次插入到Widget樹時會被調用
2. didChangeDependencies()：當State對象的依賴發生變化時會被調用
3. build(): 用於構建Widget子樹的
   • 調用initState()之後。
   • 調用didUpdateWidget()之後
   • 調用setState()之後
   • 調用didChangeDependencies()之後
   • 在State對象從樹中一個位置移除後（會調用deactivate）又重新插入到樹的其它位置之後
4. reassemble()：專門爲了開發調試而提供的，在熱重載時會被調用，Release模式下永遠不會被調用。
5. didUpdateWidget()：在widget重新構建時，Flutter framework會調用Widget.canUpdate，如果canUpdate返回true調用該方法
6. deactivate：當State對象從樹中被移除時，會調用此回調。、
7. dispose：當State對象從樹中被永久移除時調用；通常在此回調中釋放資源。

基礎組件

• Text：一個帶格式的文本。
• Row、 Column：水平（Row）和垂直（Column）方向上的佈局。
• Stack：和Android中的FrameLayout相似，用 Positioned 來定位他們相對於Stack的上下左右四條邊的位置。
• Container：創建矩形視覺元素。

Cupertino組件

Flutter也提供了一套豐富的Cupertino風格的組件，