Flutter Widget中的State

1、Flutter 的聲明式視圖開發

在原生系統(Android、iOS)或原生JavaScript 開發的話，應該知道視圖開發是 命令式的，須要精確地告訴操做系統或瀏覽器用 何種方式去作事情。

好比，若是咱們想要變動界面的某個文案，則須要找到具體的文本控件並調用它的控件方法命令，才能完成文字變動。

 

 // Android 設置某文本控件展現文案爲 Hello World
 TextView textView = (TextView) findViewById(R.id.txt);
 textView.setText("Hello");

 // iOS 設置某文本控件展現文案爲 Hello World
 UILabel *label = (UILabel *)[self.view viewWithTag:100];
 label.text = @"Hello";

　　

與此不一樣的是， Flutter 的視圖開發是聲明式的，其核心設計思想就是將視圖和數據分離， 這與 React 的設計思路徹底一致。

 對咱們來講，若是要實現一樣的需求，則要稍微麻煩點:

除了設計好 Widget 佈局方案之 外，還須要提早維護一套文案數據集，

併爲須要變化的 Widget 綁定數據集中的數據，使 Widget 根據這個數據集完成渲染。

可是，當須要變動界面的文案時，咱們只要改變數據集中的文案數據，並通知 Flutter 框架 觸發 Widget 的從新渲染便可。

這樣一來，開發者將無需再精確關注 UI 編程中的各個過程 細節，只要維護好數據集便可。

比起命令式的視圖開發方式須要挨個設置不一樣組件 (Widget)的視覺屬性，這種方式要便捷得多。

 

總結來講，命令式編程強調精確控制過程細節;而聲明式編程強調經過意圖輸出結果總體。

對應到 Flutter 中，意圖是綁定了組件狀態的 State，結果則是從新渲染後的組件。

 

在 Widget 的生命週期內，應用到 State 中的任何更改都將強制 Widget 從新構建。

其中，對於組件完成建立後就無需變動的場景，狀態的綁定是可選項。

這裏「可選」就區分出了 Widget 的兩種類型，

即:StatelessWidget 不帶綁定狀態，而 StatefulWidget 帶綁 定狀態。

當你所要構建的用戶界面不隨任何狀態信息的變化而變化時，須要選擇使用 StatelessWidget，反之則選用 StatefulWidget。

前者通常用於靜態內容的展現，然後 者則用於存在交互反饋的內容呈現中。

 

2、Widget 選型的基本原則

接下來，我分別和你介紹 StatelessWidget 和 StatefulWidget，總結一些關於 Widget 選型的基本原則。

StatelessWidget

在 Flutter 中，Widget 採用由父到子、自頂向下的方式進行構建，父 Widget 控制着子 Widget 的顯示樣式，其樣式配置由父 Widget 在構建時提供。

用這種方式構建出的 Widget，有些(好比 Text、Container、Row、Column 等)在建立 時，除了這些配置參數以外不依賴於任何其餘信息，

換句話說，它們一旦建立成功就再也不關 心、也不響應任何數據變化進行重繪。

在 Flutter 中，這樣的 Widget 被稱爲 StatelessWidget(無狀態組件)。

這裏有一張 StatelessWidget 的示意圖，以下所示:

 

 

StatelessWidget 示意圖

能夠看到，在構造後，build 方法隨即將子組件 RichText 經過其屬性列表(如文本 data、對齊方式 textAlign、文本展現方向 textDirection 等)初始化後返 回，以後 Text 內部再也不響應外部數據的變化。

那麼，什麼場景下應該使用 StatelessWidget 呢?

一個簡單的判斷規則:父 Widget 是否能經過初始化參數徹底控制其 UI 展現效果?

若是能，那麼咱們就可使用 StatelessWidget 來設計構造函數接口了。

 

 StatefulWidget

與 StatelessWidget 相對應的，有一些 Widget(好比 Image、Checkbox)的展現，除了父 Widget 初始化時傳入的靜態配置以外，

還須要處理用戶的交互(好比，用戶點擊按 鈕)或其內部數據的變化(好比，網絡數據回包)，並體如今 UI 上。

換句話說，這些 Widget 建立完成後，還須要關心和響應數據變化來進行重繪。在 Flutter 中，這一類 Widget 被稱爲 StatefulWidget(有狀態組件)。

這裏有一張 StatefulWidget 的示意圖，以下所示:

 

 

  StatefulWidget 示意圖

以前瞭解到，Widget 是不可變的，發生變化時須要銷燬重建，因此談不上狀態。

其實，StatefulWidget 是以 State 類代理 Widget 構建的設計方式實現的。