第 4 课：状态提升与回调

日期：2026-09-02
课程序号：第 4 课
知识点：父级 State、只读参数与 VoidCallback

用途

让显示计数和增加计数的组件共享一份交互状态。

核心概念

共同父组件持有 count，子组件只接收当前值和操作回调。
子组件不再保存另一份 count，父级 setState 触发新的配置下发。

最小代码或操作示例

dart

import "package:flutter/material.dart";
void main() => runApp(const MaterialApp(home: Scaffold(body: CounterPage())));
class CounterPage extends StatefulWidget {
  const CounterPage({super.key});
  @override
  State<CounterPage> createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
  int count = 0;
  @override
  Widget build(BuildContext context) => Center(
    child: CounterButton(
      count: count,
      onAdd: () => setState(() => count += 1),
    ),
  );
}
class CounterButton extends StatelessWidget {
  const CounterButton({super.key, required this.count, required this.onAdd});
  final int count;
  final VoidCallback onAdd;
  @override
  Widget build(BuildContext context) => ElevatedButton(
    onPressed: onAdd, child: Text("练习 $count 次"),
  );
}

3～5 分钟练习

把按钮包进 Column，同时在按钮上方显示父级 count，确认每次点击两处同时变化。

参考答案

dart

// 替换 Center 的 child
Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text("父级计数：$count"),
    CounterButton(count: count, onAdd: () => setState(() => count += 1)),
  ],
)

与上一课的联系

上一课在 State 内维护计数；本课拆出无状态按钮，保持交互状态只有一个持有者。