概念	比喻
StatefulWidget	會變魔術的電視機
State	電視機的小腦袋（記信息）
build 方法	電視機變身顯示新畫面
setState	按遙控器按鈕改變狀態
Scaffold	電視機的外殼

1. StatefulWidget：創建一個按鈕組件。
2. State：保存點贊數（比如?int likes = 0）。
3. build () 方法：顯示按鈕和當前點贊數。
4. 點擊按鈕時：調用?setState(() { likes++; })。
5. Flutter 自動觸發：再次調用?build()?方法，更新 UI 顯示新的點贊數。

Scaffold 是什么？

Scaffold?是 Flutter 提供的一個?基礎頁面框架，就像蓋房子的 "腳手架" 一樣，幫你快速搭建出一個符合?Material Design 設計規范的頁面。

它提供了這些東西：

• 頂部的導航欄（AppBar）
• 中間的內容區域（body）
• 底部的導航欄（BottomNavigationBar）
• 浮動按鈕（FloatingActionButton）
• 側邊欄（Drawer）
• 底部彈窗（SnackBar）

Scaffold 的常用屬性

屬性名	作用
appBar	頂部導航欄，顯示標題、操作按鈕（如搜索、菜單）等。
body	頁面的主體內容區域，可以是文本、圖片、列表等任何組件。
floatingActionButton	懸浮按鈕，通常在右下角，用于執行主要操作（如 "添加"）。
bottomNavigationBar	底部導航欄，用于在不同頁面 / 功能之間切換（如微信底部的 "微信、通訊錄" 等）。
drawer	側邊欄，從左側滑出，通常用于顯示菜單或用戶信息。
backgroundColor	頁面背景顏色。

下面是一個包含 Scaffold 所有主要部分的代碼：

import 'package:flutter/material.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(// 1. 頂部導航欄appBar: AppBar(title: const Text('Scaffold 示例'),actions: [IconButton(icon: const Icon(Icons.search),onPressed: () {},),],),// 2. 中間內容區域body: const Center(child: Text('這是頁面的主體內容！'),),// 3. 懸浮按鈕（右下角）floatingActionButton: FloatingActionButton(onPressed: () {},child: const Icon(Icons.add),),// 4. 底部導航欄bottomNavigationBar: BottomNavigationBar(items: const [BottomNavigationBarItem(icon: Icon(Icons.home),label: '首頁',),BottomNavigationBarItem(icon: Icon(Icons.person),label: '我的',),],),// 5. 側邊欄（從左側滑出）drawer: Drawer(child: ListView(children: const [DrawerHeader(child: Text('側邊欄標題'),decoration: BoxDecoration(color: Colors.blue,),),ListTile(title: Text('菜單項 1'),),ListTile(title: Text('菜單項 2'),),],),),),);}
}

運行效果示意圖

+-----------------------------------+
|  <--  |  Scaffold 示例  |  [搜索]  |    ← AppBar（導航欄）
+-----------------------------------+
|                                   |
|                                   |
|        這是頁面的主體內容！        |    ← body（主體內容）
|                                   |
|                                   |
+-----------------------------------+
|  [首頁]        [我的]             |    ← BottomNavigationBar（底部導航）
+-----------------------------------+
|              [+]                  |    ← FloatingActionButton（懸浮按鈕）
+-----------------------------------+

屬性	顯示位置	示例代碼
MaterialApp(title: ...)	操作系統任務管理器、應用列表	MaterialApp(title: '計數器示例')
AppBar(title: ...)	應用內當前頁面的導航欄	AppBar(title: Text('計數器應用'))

完整代碼

import 'package:flutter/material.dart';void main() {// 啟動Flutter應用，運行MyApp組件runApp(const MyApp());
}// 應用的根組件（無狀態組件）
class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(title: '計數器示例',theme: ThemeData(primarySwatch: Colors.blue, // 設置主題色為藍色),home: const CounterPage(), // 設置首頁為CounterPage);}
}// 計數器頁面（有狀態組件）
class CounterPage extends StatefulWidget {const CounterPage({Key? key}) : super(key: key);@override_CounterPageState createState() => _CounterPageState();
}// 計數器頁面的狀態類
class _CounterPageState extends State<CounterPage> {int _counter = 0; // 聲明一個變量存儲計數器的值，初始值為0// 增加計數器值的方法void _incrementCounter() {setState(() {// 修改狀態：將_counter的值加1// 調用setState后，Flutter會自動重新調用build()方法更新UI_counter++;});}// 減少計數器值的方法void _decrementCounter() {setState(() {if (_counter > 0) {_counter--; // 只有當計數器大于0時才減1}});}@overrideWidget build(BuildContext context) {// Scaffold是Material Design風格的頁面框架return Scaffold(appBar: AppBar(title: const Text('計數器應用'), // 設置導航欄標題),body: Center( // 將子組件居中顯示child: Column( // 垂直排列子組件mainAxisAlignment: MainAxisAlignment.center, // 垂直方向居中對齊children: <Widget>[const Text('當前計數:',style: TextStyle(fontSize: 20),),Text('$_counter', // 顯示計數器的值style: Theme.of(context).textTheme.headline3, // 使用主題中的大字體),const SizedBox(height: 20), // 添加間距Row( // 水平排列子組件mainAxisAlignment: MainAxisAlignment.center, // 水平方向居中對齊children: [ElevatedButton(onPressed: _decrementCounter, // 點擊時調用減少計數的方法child: const Icon(Icons.remove), // 按鈕圖標：減號),const SizedBox(width: 20), // 按鈕之間的間距ElevatedButton(onPressed: _incrementCounter, // 點擊時調用增加計數的方法child: const Icon(Icons.add), // 按鈕圖標：加號),],),],),),);}
}