如何在 Flutter 中使用多个 ChangeNotifierProvider？答案

【问题标题】：How to use more than one ChangeNotifierProvider in Flutter?如何在 Flutter 中使用多个 ChangeNotifierProvider？
【发布时间】：2020-04-09 14:03:53
【问题描述】：

我最近开始使用provider 进行状态管理，并且我知道如何一次使用一个。

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

但是现在我有两个不同的类，我想添加它们并能够在我的小部件树中访问。

如何在Flutter 中添加多个ChangeNotifierProvider？

【问题讨论】：

标签： flutter dart provider

【解决方案1】：

一个选项（不推荐）是嵌套 2 个提供者：

ChangeNotifierProvider<Reader>(
  create: (_) => Reader(),
  child: ChangeNotifierProvider<SomethingElse>(
    create: (_) => SomethingElse(),
    child: ChangeNotifierProvider<AnotherThing>(
      create: (_) => AnotherThing(),
      child: someWidget,
    ),
  ),
),

不建议这样做，因为正如文档所述：

在大型应用程序中注入许多值时，Provider 会迅速变得非常嵌套：

但是，Provider package itself 的另一个建议是使用MultiProvider：

MultiProvider(
  providers: [
    ChangeNotifierProvider<Reader>(create: (_) => Reader()),
    ChangeNotifierProvider<SomethingElse>(create: (_) => SomethingElse()),
    ChangeNotifierProvider<AnotherThing>(create: (_) => AnotherThing()),
  ],
  child: _HomeBody(),
)

两种方法的工作方式相同，但第二种方法更易读。作为文档的话：

两个示例的行为完全相同。 MultiProvider 只会改变代码的外观。

示例改编自 provider flutter package page 并适用于您的情况。

【讨论】：

感谢您的回答！我想知道你为什么在第一个提供者中写ChangeNotifierProvider，然后在第二个提供者中只写Provider。我将我的两个提供商都命名为ChangeNotifierProvider，有什么问题吗？我应该像你一样做吗？
没有。这只是一个例子，因为我不知道您还有哪些其他提供商。 ChangeNotifierProvider 与 Provider 一样有效。 Provider 本身只是一个更通用的用例。他们都是有效的提供者。我可以为您更改示例。
不只是问我是否遗漏了什么。赞赏
或许，您可以更改答案。您可以先显示推荐的，然后再显示另一种选择。这将帮助人们快速找到答案

【解决方案2】：

你可以使用 MultiProvider

本指南对我有所帮助，希望对您也有帮助...

MultiProvider(
  providers: [
    ChangeNotifierProvider<Counter>(builder: (context) => Counter(0)),
    ProxyProvider<Counter, ThemeSwitch>.custom(
      builder: (context, counter, previous) {
        final theme = previous ?? ThemeSwitch(ThemeState.light);
        theme.themeState =
              (counter.value > 5) ? ThemeState.dark : ThemeState.light;
        return theme;
      },
      dispose: (context, value) => value.dispose(),
      providerBuilder: (_, value, child) =>
          ChangeNotifierProvider.value(notifier: value, child: child),
    ),
  ],
)

【讨论】：