Flutter中setState无法更新全局变量score的显示问题求助

问题根源 #

核心问题是状态管理范围不匹配：

• 全局变量score在Numb组件的setState()里被更新，但这个setState()只会触发Numb自身的重建，而显示分数的Container在Body组件里，不会感知到全局变量的变化，所以界面不会更新。
• 用全局变量管理状态不符合Flutter的状态管理逻辑，应该把状态放到需要使用它的组件树的共同父节点中。

修复方案 #

把状态提升到Body的状态类中，通过回调让子组件通知父组件更新状态，具体步骤：

1. 将全局score移到_BodyState中作为成员变量
2. 给Numb组件添加一个点击回调参数，用于传递点击的数值
3. 在Body中实现更新分数的方法，传递给每个Numb
4. Numb不需要维护自己的状态，改成StatelessWidget更简洁

修改后的完整代码 #

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.deepPurple,
          centerTitle: true,
          elevation: 3,
        ),
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("My Application"),
      ),
      body: const Body(),
    );
  }
}

class Body extends StatefulWidget {
  const Body({Key? key}) : super(key: key);

  @override
  State<Body> createState() => _BodyState();
}

class _BodyState extends State<Body> {
  // 将score移到这里，作为组件状态
  int score = 5;

  // 定义更新分数的方法
  void updateScore(int addValue) {
    setState(() {
      score += addValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          height: 50,
          width: 200,
          decoration: const BoxDecoration(color: Colors.grey),
          child: Center(child: Text(score.toString())),
        ),
        const SizedBox(
          height: 70,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Numb(
              color: Colors.pink,
              numb: 1,
              onTap: () => updateScore(1),
            ),
            Numb(
              color: Colors.pink,
              numb: 2,
              onTap: () => updateScore(2),
            ),
            Numb(
              color: Colors.pink,
              numb: 3,
              onTap: () => updateScore(3),
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Numb(
              color: Colors.pink,
              numb: 4,
              onTap: () => updateScore(4),
            ),
            Numb(
              color: Colors.pink,
              numb: 5,
              onTap: () => updateScore(5),
            ),
            Numb(
              color: Colors.pink,
              numb: 6,
              onTap: () => updateScore(6),
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Numb(
              color: Colors.pink,
              numb: 7,
              onTap: () => updateScore(7),
            ),
            Numb(
              color: Colors.pink,
              numb: 8,
              onTap: () => updateScore(8),
            ),
            Numb(
              color: Colors.pink,
              numb: 9,
              onTap: () => updateScore(9),
            ),
          ],
        ),
      ],
    );
  }
}

// 改成StatelessWidget，因为不需要自己维护状态
class Numb extends StatelessWidget {
  final int numb;
  final Color color;
  final VoidCallback onTap; // 添加点击回调

  const Numb({
    Key? key,
    required this.numb,
    required this.color,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap, // 使用父组件传递的回调
      child: Container(
        margin: projectPadding.allPad * 0.5,
        decoration: BoxDecoration(color: color),
        height: MediaQuery.of(context).size.height * 0.06,
        width: MediaQuery.of(context).size.width * 0.1,
        child: Center(
          child: Text(numb.toString()),
        ),
      ),
    );
  }
}

class projectPadding {
  static const EdgeInsets horizantalPad = EdgeInsets.symmetric(horizontal: 20);
  static const EdgeInsets verticalPad = EdgeInsets.symmetric(vertical: 20);
  static const EdgeInsets allPad = EdgeInsets.all(20);
}

关键修改说明 #

• 把全局score移到_BodyState中，调用setState()时会触发Body组件的重建，分数显示区域也会同步更新。
• Numb组件新增onTap回调，点击时通知父组件更新分数，不再直接修改全局变量。
• Numb改成StatelessWidget，因为它只负责展示和传递点击事件，不需要维护自身状态。

内容的提问来源于stack exchange，提问作者hasannn2666