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

更新於 2024/11/23發佈於 2024/11/23閱讀時間約 8 分鐘

【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 方法，增加計數器的值。