項目演示github地址

Flutter之常用布局組件

生命周期是一個組件加載到卸載的整個周期，熟悉生命周期可以讓我們在合適的時機做該做的事情，
flutter中的State生命周期和android以及React Native的生命周期類似。
組件State的生命周期整理：
![image.png](https://upload-images.jianshu.io/upload_images/6970555-aa1312ced2ed8b7b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/124

大致可以分為3個階段：

• 初始化
• 狀態變化
• 組件移除

初始化

State初始化時會依次執行 ： 構造函數 > initState > didChangeDependencies > Widget build , 此時頁面加載完成。

2019-03-13 19:06:22.258 18494-18527/com.example.flutter_app I/flutter: -------構造函數
2019-03-13 19:06:22.259 18494-18527/com.example.flutter_app I/flutter: -------init state
2019-03-13 19:06:22.259 18494-18527/com.example.flutter_app I/flutter: -------didChangeDependencies
2019-03-13 19:06:22.261 18494-18527/com.example.flutter_app I/flutter: -------widget build

狀態變化(熱重載)

com.example.flutter_app I/flutter: -------reassemble
com.example.flutter_app I/flutter: -------組件狀態改變：didUpdateWidget
com.example.flutter_app I/flutter: -------widget build

組件移除

組件移除，例如頁面銷毀的時候會依次執行：deactivate > dispose

01-15 14:08:40.956 19005-19561/com.example.flutter_app I/flutter: deactivate
01-15 14:08:40.970 19005-19561/com.example.flutter_app I/flutter: dispose

各個方法的解釋：

• initState：插入渲染樹時調用，只調用一次，widget創建執行的第一個方法，可以再里面初始化一些數據，以及綁定控制器 如下

• didChangeDependencies：當State對象的依賴發生變化時會被調用；例如：在之前build() 中包含了一個InheritedWidget，然后在之后的build() 中InheritedWidget發生了變化，那么此時InheritedWidget的子widget的didChangeDependencies()回調都會被調用。InheritedWidget這個widget可以由父控件向子控件共享數據，案例可以參考 scoped_model開源庫。

• build ：它主要是用于構建Widget子樹的，調用次數：多次，初始化之后開始繪制界面，當setState觸發的時候會再次被調用

• didUpdateWidget：組件狀態改變時候調用，可能會調用多次

• deactivate:當State對象從樹中被移除時，會調用此回調。

• dispose():當State對象從樹中被永久移除時調用；通常在此回調中釋放資源。

• reassemble：此回調是專門為了開發調試而提供的，在熱重載(hot reload)時會被調用，此回調在Release模式下永遠不會被調用。
  幾個注意點

didChangeDependencies有兩種情況會被調用。

創建時候在initState 之后被調用
在依賴的InheritedWidget發生變化的時候會被調用

正常的退出流程中會執行deactivate然后執行dispose。但是也會出現deactivate以后不執行dispose，直接加入樹中的另一個節點的情況。

這里的狀態改變包括兩種可能：1.通過setState內容改變 2.父節點的state狀態改變，導致孩子節點的同步變化。

常見業務場景：
1.Widget A打開Widget B： 調用 Navigator.push(B)

B構造函數--->B initState--->B didChangeDependencies--->B build--->A deactivate--->A didChangeDependencies.
2.Widget B退出： Navigator.pop

A deactivate--->A didChangeDependencies--->A build--->B deactivate--->B dispose
可以看出， Flutter打開、關閉Widget時跟安卓、iOS的時序一樣， 都是先處理即將顯示的界面

image.png