如何在Flutter三个类中通过setState回调同步更新count变量？

我来帮你搞定这个问题！你的核心需求是让MyApp2能同步显示MyApp1中被MyApp3更新的count值对吧？先给你梳理下现有代码里的几个小问题，再给你两种实用的解决方案：

先修正代码里的基础错误 #

在动手解决状态同步问题前，得先把代码里的拼写和类匹配问题改掉：

1. 类名和State泛型不匹配（比如MyApp2的State类里写的是MyApp，应该对应MyApp2）
2. callback拼写错误（写成了callbakc）
3. count用了final修饰，无法修改，得改成可变变量
4. MyApp3的构造函数没定义接收回调的参数

方案一：直接传递count给MyApp2（简单父子传值） #

这是最直接的方案，因为MyApp1是MyApp2的父组件，当MyApp1调用setState更新count时，会重新build子组件，把最新的count传递给MyApp2，MyApp2就能自动显示更新后的值。

修改后的代码：

my_app1.dart

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

  @override
  State<MyApp1> createState() => _MyApp1State();
}

class _MyApp1State extends State<MyApp1> {
  int _count = 0; // 去掉final，改成私有可变变量
  
  void callback() { // 修正拼写
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
          MyApp2(count: _count), // 将更新后的_count传递给MyApp2
          MyApp3(callback: callback),
      ],              
    );
  }
}

my_app2.dart

class MyApp2 extends StatefulWidget {
  final int count; // 定义接收count的参数
  const MyApp2({Key? key, required this.count}) : super(key: key);

  @override
  State<MyApp2> createState() => _MyApp2State();
}

class _MyApp2State extends State<MyApp2> {
  @override
  Widget build(BuildContext context) {
    return Container(
      // 使用widget.count获取父组件传递的最新值，转成字符串显示
      child: Text(widget.count.toString()),
    );
  }
}

my_app3.dart

class MyApp3 extends StatelessWidget {
  final VoidCallback callback;
  const MyApp3({Key? key, required this.callback}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 添加按钮，点击触发回调更新count
    return ElevatedButton(
      onPressed: callback,
      child: const Text("点击增加计数"),
    );
  }
}

原理说明：当MyApp3的按钮被点击，触发MyApp1的callback方法，调用setState更新_count，MyApp1会重新执行build方法，把最新的_count传递给MyApp2，MyApp2随之重建，自动显示更新后的数值，不需要手动调用setState。

方案二：使用状态管理库（适合复杂场景） #

如果你的项目组件层级较深，或者多个组件需要共享这个count状态，推荐使用状态管理库（比如Provider），这样可以避免层层传递参数的麻烦。

步骤1：添加依赖

在pubspec.yaml中添加Provider依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.5

步骤2：创建状态管理类

class CountProvider extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // 通知所有监听的组件更新状态
  }
}

步骤3：在顶层提供状态

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CountProvider(),
      child: const MaterialApp(home: MyApp1()),
    ),
  );
}

步骤4：修改组件代码

my_app1.dart

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

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
          const MyApp2(),
          const MyApp3(),
      ],              
    );
  }
}

my_app2.dart

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

  @override
  Widget build(BuildContext context) {
    // 监听CountProvider的状态变化
    final countProvider = Provider.of<CountProvider>(context);
    return Container(
      child: Text(countProvider.count.toString()),
    );
  }
}

my_app3.dart

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

  @override
  Widget build(BuildContext context) {
    // 不需要监听状态，只获取实例调用方法
    final countProvider = Provider.of<CountProvider>(context, listen: false);
    return ElevatedButton(
      onPressed: countProvider.increment,
      child: const Text("点击增加计数"),
    );
  }
}

原理说明：CountProvider统一管理count状态，当调用increment方法时，notifyListeners会通知所有监听该状态的组件（比如MyApp2）自动重建，显示最新的count值，无需手动传递参数。

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