Flutter中如何使用多个ChangeNotifierProvider？

嘿，很高兴你已经上手单个ChangeNotifierProvider的用法啦！当需要同时管理多个状态类时，Flutter提供了两种简洁好用的方案，我给你详细拆解下：

1. 嵌套ChangeNotifierProvider（基础方案） #

这是最直接的实现方式——把多个Provider一层一层嵌套，每个Provider单独负责一个状态类。假设你除了Reader，还有另一个状态类BookmarkManager，代码可以这么写：

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ChangeNotifierProvider<Reader>(
        create: (context) => Reader(),
        child: ChangeNotifierProvider<BookmarkManager>(
          create: (context) => BookmarkManager(),
          child: _HomeBody(),
        ),
      ),
    );
  }
}

之后在子组件里，你依然可以用Provider.of<Reader>(context)和Provider.of<BookmarkManager>(context)分别获取对应的状态实例。不过如果需要管理的状态类超过3个，嵌套结构会显得有点繁琐，这时候可以用下面的优化方案。

2. 使用MultiProvider（推荐方案） #

Provider包专门提供了MultiProvider组件，能让你在一个统一的地方声明所有Provider，代码结构会清爽很多。写法如下：

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MultiProvider(
        providers: [
          ChangeNotifierProvider<Reader>(create: (context) => Reader()),
          ChangeNotifierProvider<BookmarkManager>(create: (context) => BookmarkManager()),
          // 有更多状态类的话，直接在这里继续添加就行
        ],
        child: _HomeBody(),
      ),
    );
  }
}

这种方式和嵌套的功能完全一致，但可读性和维护性更高，是管理多个状态类的首选方式。

子组件中访问多个状态的示例 #

不管用哪种方式，子组件里访问状态的逻辑和单个Provider时一样，比如在_HomeBody中：

class _HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 获取Reader状态实例
    final reader = Provider.of<Reader>(context);
    // 获取BookmarkManager状态实例
    final bookmarkManager = Provider.of<BookmarkManager>(context);
    
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text("当前页码：${reader.currentPage}"),
          const SizedBox(height: 16),
          ElevatedButton(
            onPressed: () => bookmarkManager.addBookmark(reader.currentPage),
            child: const Text("添加当前页到书签"),
          ),
        ],
      ),
    );
  }
}

如果想更精准地控制组件重建范围，也可以用Consumer组件来监听单个状态的变化，避免不必要的UI刷新哦～

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