Flutter自定义AppBar中ChangeNotifier与Consumer状态更新失效问题

在Flutter应用首页使用MultiProvider功能正常，但自定义AppBar中嵌套ChangeNotifierProvider和Consumer后，调用notifyListener()时AppBar无法收到通知。怀疑是MultiProvider放在Scaffold的body中导致，或是AppBar不能包含Consumer，求解决方法。

HomeScreen 代码 #

/// Home screen.
class HomeScreen extends StatefulWidget {
  /// Constructor
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  final _homeViewModel = HomeViewModel();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: const CustomAppBar(),
        body: MultiProvider(
            providers: [
              ChangeNotifierProvider.value(value: _homeViewModel),
              ChangeNotifierProxyProvider<HomeViewModel, SecondViewModel>(
                  create: (context) => SecondViewModel(),
                  update: (context, homeViewModel, secondViewModel) =>
                      secondViewModel!..load()),
            ],
            child: Container()
        )
    );
  }
}

CustomDropAppBar 代码 #

/// Custom App Bar.
class CustomDropAppBar extends cs.AppBar {
  /// Title.
  final Widget? appBarTitle;

  /// Constructor.
  const CustomDropAppBar(
      {Key? key,
      this.appBarTitle,})
      : super(key: key);

  @override
  State<CustomMenuAppBar> createState() => _CustomMenuAppBarState();
}

/// App bar state.
class _CustomMenuAppBarState extends State<CustomMenuAppBar> {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
        create: (context) => CustomMenuViewModel(),
        child: Consumer<CustomMenuViewModel>(
            builder: (context, viewModel, child) => cs.AppBar(
                    title: widget.appBarTitle,
                    actions: [Container()])));
  }
}

核心问题分析 #

根本原因是CustomMenuViewModel在AppBar的build方法中重复创建：每次AppBar重建时，ChangeNotifierProvider(create: ...)都会生成新的CustomMenuViewModel实例，你调用notifyListener()的可能是旧实例，而Consumer监听的是新实例，自然收不到通知。和MultiProvider放在body里无关，AppBar也完全可以使用Consumer。

具体修复步骤 #

1. 在AppBar的State类中初始化CustomMenuViewModel实例，避免每次build重建：

class _CustomMenuAppBarState extends State<CustomMenuAppBar> {
  late final CustomMenuViewModel _viewModel;

  @override
  void initState() {
    super.initState();
    _viewModel = CustomMenuViewModel();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider.value(
      value: _viewModel,
      child: Consumer<CustomMenuViewModel>(
        builder: (context, viewModel, child) => cs.AppBar(
          title: widget.appBarTitle,
          actions: [
            // 示例：触发notifyListener的按钮
            IconButton(
              icon: const Icon(Icons.refresh),
              onPressed: () => viewModel.triggerUpdate(),
            )
          ],
        ),
      ),
    );
  }
}

2. 确保调用notifyListener()的是同一个ViewModel实例：
   • 若在AppBar内部调用，直接用State里的_viewModel即可；
   • 若需从外部访问，可通过Provider.of<CustomMenuViewModel>(context, listen: false)获取，或者把ViewModel实例通过构造函数传入AppBar。

额外优化建议 #

如果CustomMenuViewModel需要和页面其他组件共享，建议把它的Provider提升到Scaffold外层，和HomeScreen的MultiProvider合并，这样AppBar和body都能访问同一个实例：

@override
Widget build(BuildContext context) {
  return MultiProvider(
    providers: [
      ChangeNotifierProvider.value(value: _homeViewModel),
      ChangeNotifierProxyProvider<HomeViewModel, SecondViewModel>(
        create: (context) => SecondViewModel(),
        update: (context, homeViewModel, secondViewModel) =>
            secondViewModel!..load(),
      ),
      ChangeNotifierProvider(create: (context) => CustomMenuViewModel()),
    ],
    child: Scaffold(
      appBar: const CustomAppBar(),
      body: Container(),
    ),
  );
}

此时AppBar的State里无需自己嵌套Provider，直接用Consumer监听即可：

@override
Widget build(BuildContext context) {
  return Consumer<CustomMenuViewModel>(
    builder: (context, viewModel, child) => cs.AppBar(
      title: widget.appBarTitle,
      actions: [Container()],
    ),
  );
}

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