【Flutter 學習筆記】深入了解 Flutter 的 StatefulWidget：計數器應用程式

【Flutter 學習筆記】🎬 教學影片：連結

【Flutter 學習筆記】📚 文章目錄：連結

今天我們要深入探討 Flutter 中的 StatefulWidget，也就是有狀態的 Widget。在這篇文章中，我將帶領大家逐步了解一個基本的計數器應用程式，並解釋每個部分的功能與用途。

什麼是 StatefulWidget？

在前幾堂課中，我們介紹了如何使用 Empty 範本建立全新的 Flutter 專案，並得到了簡單的 "Hello World" 應用程式。這個應用程式僅顯示純文字，沒有任何互動或 UI 更新，因此我們使用了 StatelessWidget（無狀態的 Widget）。

然而，當我們選擇 Application 範本來建立新的 Flutter 應用程式時，會附帶一個計數器的功能。在這種情況下，我們需要使用 StatefulWidget，因為計數器的數字會隨著使用者的點擊而變化，這需要動態更新 UI。

建立計數器應用程式

接下來，我們使用 Application 範本來建立一個基本的計數器應用程式。首先，讓我們來看看程式的結構。

1. main 函數

void main() {
  runApp(MyApp());
}

這是程式的進入點，使用 runApp 函數來啟動應用程式，並傳入 MyApp 類別。

2. MyApp 類別

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(title: '計數器應用程式'),
    );
  }
}

MyApp 類別繼承自 StatelessWidget，表示這是一個不需要管理狀態的 Widget。在 build 方法中，我們回傳了一個 MaterialApp，並設定 home 參數為 MyHomePage，這是我們的主頁面。

3. MyHomePage 類別

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

MyHomePage 類別繼承自 StatefulWidget，因為我們的計數器需要管理狀態。這裡我們定義了一個 title 屬性，用來顯示在 AppBar 上的標題文字，並使用 required 關鍵字來強制要求這個參數。

4. _MyHomePageState 類別

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('你已經按了這個按鈕這麼多次：'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: Icon(Icons.add),
      ),
    );
  }
}

在 _MyHomePageState 類別中，我們定義了幾個重要的元素：

• _counter 變數：用來暫存按鈕被點擊的次數。_incrementCounter() 方法：當按鈕被點擊時觸發，使用 setState() 更新計數器的值，並重新渲染畫面。build 方法：定義 UI 結構的地方，使用 Scaffold 作為基本頁面的框架，並包含 AppBar、body 和 FloatingActionButton。

5. UI 結構

在 build 方法中，我們使用了以下幾個 Widget：

• Scaffold：這是 Flutter 提供的基本頁面框架，包含了應用程式的主要結構。
• AppBar：用來顯示應用程式的標題列，這裡我們將 title 設定為 widget.title，這樣可以顯示在 MyHomePage 中傳入的標題。
• body：這是頁面的主要內容區域，我們使用 Center Widget 來將內容置中顯示，並使用 Column Widget 來垂直排列內容。
• Text Widget：我們使用了兩個 Text Widget。第一個顯示說明文字，第二個顯示計數器的數字，這裡使用了 _counter 變數來顯示當前的計數值。
• FloatingActionButton：這是畫面右下角的浮動按鈕，當使用者點擊時，會呼叫 _incrementCounter 方法，增加計數器的值。

6. 整體流程

當使用者點擊浮動按鈕時，以下流程會發生：

• _incrementCounter() 方法被呼叫。在這個方法中，我們使用 setState() 來更新 _counter 的值，這會告訴 Flutter 需要重新渲染畫面。當畫面重新渲染時，build 方法會被再次呼叫，並更新顯示的計數器數字。

這就是 Flutter 中 StatefulWidget 的基本結構與運作方式。透過這個計數器應用程式，我們可以清楚地看到如何管理狀態，以及如何讓 UI 隨著狀態的變化而更新。