Flutter 例程：经典计数器——理解 StatefulWidget
目标
通过官方经典的计数器例子，理解 Flutter 核心概念：Widget 树、StatefulWidget、setState、MaterialApp。
完整代码
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorSchemeSeed: Colors.blue,
useMaterial3: true,
),
home: const MyHomePage(title: '计数器 Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({super.key, required this.title});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
void _decrementCounter() {
setState(() {
if (_counter > 0) _counter--;
});
}
void _resetCounter() {
setState(() {
_counter = 0;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
centerTitle: true,
actions: [
IconButton(
icon: const Icon(Icons.refresh),
onPressed: _resetCounter,
tooltip: '重置',
),
],
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'你已经点了这么多次：',
style: TextStyle(fontSize: 18),
),
const SizedBox(height: 12),
Text(
'$_counter',
style: Theme.of(context).textTheme.displayLarge?.copyWith(
fontWeight: FontWeight.bold,
color: _counter > 10 ? Colors.red : null,
),
),
const SizedBox(height: 24),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton(
onPressed: _decrementCounter,
child: const Icon(Icons.remove),
),
const SizedBox(width: 16),
FloatingActionButton(
onPressed: _incrementCounter,
child: const Icon(Icons.add),
),
],
),
],
),
),
);
}
}
运行步骤
flutter create flutter_counter
flutter run
预期表现
- 点击
+ 按钮计数器加一
- 点击
- 按钮计数器减一（最小为 0）
- 点击 AppBar 刷新图标重置计数器
- 计数器超过 10 时数字变为红色
核心概念
| 概念 |
说明 |
StatelessWidget |
无状态组件，属性不变 |
StatefulWidget |
有状态组件，setState() 触发重建 |
setState() |
通知框架状态已变，需要重新 build |
MaterialApp |
Material Design 根组件 |
Scaffold |
页面脚手架（含 AppBar、body、FAB） |
