【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 隨著狀態的變化而更新。
你可能也想看
