Flutter自定义AppBar中Badge数值无法通过setState更新

你遇到的问题是MyAppBar.of(context)返回null，导致setAppBarValue方法根本没有被执行。原因在于：context.findAncestorStateOfType是向上查找当前widget的祖先节点，而MyAppBar是MyHomePage的子widget（作为Scaffold的appBar），不属于祖先层级，所以无法通过该方法获取到_MyAppBarState。

推荐两种修复方式，其中状态提升更符合Flutter的状态管理最佳实践：

方案一：状态提升（推荐） #

将Badge的数值状态统一放到MyHomePage中，通过参数传递给MyAppBar，利用Flutter的widget树重建机制自动更新UI：

1. 修改MyAppBar为接收外部数值的StatelessWidget：

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  final int badgeCount;

  const MyAppBar({super.key, required this.badgeCount});

  @override
  Size get preferredSize => const Size.fromHeight(60);

  @override
  Widget build(BuildContext context) {
    return AppBar(
        title: const Text("teste"),
        actions: <Widget>[Center(child: _alertBadge())]);
  }

  Widget _alertBadge() {
    return Badge(
      position: BadgePosition.topEnd(
        top: 0,
        end: 3,
      ),
      badgeStyle: BadgeStyle(
        badgeColor: Colors.red,
      ),
      badgeContent: Text(
        badgeCount.toString(),
        style: TextStyle(color: Colors.white),
      ),
      child: IconButton(
          icon: Icon(Icons.shopping_bag_outlined), onPressed: () {}),
    );
  }
}

2. 在MyHomePage的build方法中，将_counter传递给MyAppBar：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: MyAppBar(badgeCount: _counter), // 传入当前计数
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headline4,
          ),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter, // 只需要更新_counter即可
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    ),
  );
}

这样当点击FAB调用_incrementCounter更新_counter时，MyHomePage会重建，MyAppBar也会接收到最新的badgeCount并自动更新Badge数值。

方案二：使用GlobalKey直接获取状态 #

如果需要保留原有MyAppBar的状态管理方式，可以通过GlobalKey直接获取子widget的状态：

1. 在_MyHomePageState中定义GlobalKey：

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  final GlobalKey<_MyAppBarState> _appBarKey = GlobalKey(); // 添加GlobalKey

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  // ... 其余代码不变
}

2. 给MyAppBar传入这个Key：

appBar: MyAppBar(key: _appBarKey),

3. 修改FAB的点击事件，通过GlobalKey调用setAppBarValue：

floatingActionButton: FloatingActionButton(
  onPressed: () {
    _incrementCounter();
    _appBarKey.currentState?.setAppBarValue(_counter);
  },
  tooltip: 'Increment',
  child: const Icon(Icons.add),
),

同时确保MyAppBar的构造函数支持接收Key：

class MyAppBar extends StatefulWidget implements PreferredSizeWidget {
  const MyAppBar({super.key}); // 保留Key参数

  // ... 其余代码不变
}

内容的提问来源于stack exchange，提问作者Lucas Barreto Luz