一、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，
前者一般用于靜態內容的展示，而后 者則用于存在互動反饋的內容呈現中，
二、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 構建的設計方式實作的，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/272420.html
標籤：Dart
上一篇：當初自學C++時的筆記記錄