【Flutter 基礎】State x Widget

林小帥發表於2021-07-19

Flutter

注：本文從個人公眾號（島前嶼端）中遷移重新發布

Flutter 是谷歌的移動 UI 框架，可以從單個程式碼庫快速的為移動端(iOS & Android)、Web、桌面端、嵌入式裝置上構建高質量的原生使用者介面和應用程式。

前置閱讀：【Flutter 基礎】Hello World

上一篇中我們主要說一下簡單的 Hello World 是如何實現的。那麼這次我就來說說，關於元件的兩個形式。

但是在此之前，我覺得還是有必要簡單的來說一說關於 Dart 語言的一些東西。

關於 Dart

Dart 語言是由谷歌公司開發的網路程式語言，於2011年10月10日釋出。Dart是一個小型的編譯型語言。

Dart 主要支援和麵向 3 個不同平臺的開發需求：

Dart webdev 開發瀏覽器應用。
Flutter 開發移動應用。
Dart VM 開發指令碼或者伺服器應用。

Dart 的特性

Dart 吸收了一些後端語言和前端語言的一部分特點。在 Dart 中所有的東西都是物件，function 是物件；String 是物件；Number是物件；null 也是物件。（是不是有內味兒了？）

這是一個強型別的語言，可以做型別推斷。
一切資料型別都派生自 Object。
若無初始化的變數均為 null 預設值。
擁有動態型別、泛型以及運算子過載。
擁有頂級函式 main。
沒有宣告類關鍵字 "public" "private"，以 "_" 開頭則表示僅對當前域有效，既是私有的。
final 單次宣告，既只可賦值一次，之後再次賦值無效。

Ok，關於 Dart 語言就簡單介紹這點好了。更多的 Dart 語言內容請參考：dart.dev/

State x Widget 繼承關係

在簡單介紹關於 Dart 語言後，就可以說說 StatelessWidget 和 StatefulWidget 了。上一篇中說到 StatelessWidget 和 StatefulWidget 均繼承自 Widget，都是 Widget 的抽象類。【傳送門】

（StatelessWidget 的繼承關係）

（StatefulWidget 的繼承關係）

從原始碼中我們可以看出且證實了 StatelessWidget 和 StatefulWidget 均繼承自 Widget 且都是 Widget 的抽象類 abstract。

這裡我將他們的關係整理了一下。

（StatelessWidget 和 StatefulWidget 的繼承關係圖）

如圖所示，而這也從側面證實了 Dart 中所有物件都是 Object。

在之前的文章中我也有提到過 StatelessWidget 和 StatefulWidget 雖然都是 Widget 的抽象類。但是他們之間還是有區別的，它們分別用於實現不同場景下使用的 Widget 元件。

State x Widget 有狀態與無狀態

StatelessWidget - 無狀態

StatelessWidget 是無狀態的，意味著無法通過資料變更而更新。

這樣，我們來實現一個小?，你就知道了。

專案依然是我們的 MyApp，我們要先實現一個名叫 UnchangeWidget 的類，讓它 繼承於 StatelessWidget。

再來實現一個按鈕，通過按鈕的點選事件來更新我們的文字內容。

// 繼承 StatelessWidget 意味著無法通過資料變更而改變內容
class UnchangeWidget extends StatelessWidget {
  String setText = '我是原來的文字'; // 宣告變數文字 - 預設值

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      children: <Widget>[
        Text(setText), // 使用變數 setText 來設定 Text 的內容
        RaisedButton(
          child: Text('改變內容'),
          onPressed: () { // 按鈕點選事件 - 改變內容
            print('觸發了按鈕');
            setText = '我是新的文字'; // 賦值新文字內容
          },
        )
      ],
    ));
  }
}
複製程式碼

結果如下：

（文字內容並沒有更新）

即使觸發了按鈕，且對 setText 進行了賦值，但是我們的 Text 內容依然沒有更新。

StatefulWidget - 有狀態

StatefulWidget 是有狀態的，意味著可以通過資料變更而更新，需要通過 setState 來管理狀態。

Ok，那麼我們再來改寫一下這個 UnchangeWidget ，將它改寫為 繼承於 StatefulWidget。

這裡可以通過編輯器的快速修復功能來進行程式碼的改寫。

// 繼承 StatefulWidget 意味著可以通過資料變更而改變內容
class UnchangeWidget extends StatefulWidget {
  String setText = '原來的內容'; // 變數設定文字 - 預設值

  @override // 建立狀態控制類的簡寫方式，這裡的 new 也可以省略
  _UnchangeWidgetState createState() => _UnchangeWidgetState();
}

class _UnchangeWidgetState extends State<UnchangeWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(children: <Widget>[
        Text(widget.setText), // 使用變數 setText 來設定 Text 的內容
        RaisedButton(
          child: Text('改變內容'),
          onPressed: () { // 按鈕點選事件 - 改變內容
            print('觸發了按鈕');
            setState(() { // 呼叫狀態變更函式
              widget.setText = '我是新的文字'; // 賦值新文字內容
              print('狀態變更文字更新');
            });
          },
        ),
      ]),
    );
  }
}
複製程式碼