提供程序未更新导航屏幕中的值答案

【问题标题】：Provider not updating values in navigated screen提供程序未更新导航屏幕中的值
【发布时间】：2021-07-12 07:03:20
【问题描述】：

我有两个屏幕：

screen A：有一个按钮，当用户点击该按钮时，方法addLogFolder被调用，并通知所有监听器新的值。然后导航到屏幕 B。
屏幕 B：此屏幕有一个容器，它正在监听模型中的变化，在屏幕 A 中单击按钮后，它应该将颜色变为红色。

发生了什么：

按钮改变了模型中的值✓（我已经调试过了，我已经看到模型中的值改变了）
从屏幕 A 导航到屏幕 B 没有错误 ✓
屏幕 B 的 UI 已更新，因为模型中的值已更改 ✗

屏幕 B 保持不变。当我调试时，我发现它甚至没有收到新值的通知，所以它继续使用旧值。为什么会这样？

代码如下：

构建屏幕 A 的小部件：

return Scaffold(
body: Container(
child: lightTurquoiseElevatedButton(
                   'Proceed', () {
                    Provider.of<LogFoldersModel>(context, listen: false).changeColor();

                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) =>
                            MyHomePage.customConstructor(1), //go to log list
                      ),
                    );
                  }),
),);

构建屏幕 B 的小部件：

return ChangeNotifierProvider(
    create: (context) => LogFoldersModel(),
    child: Scaffold(
      body: Consumer<LogFoldersModel>(
                    builder: (_, logfolder, __) {
                      return Container(
                        height: 47,
                        width: 276,
                        color: logfolder.color, //color should change here
                        child: Text(
                            'Box that has to change color',
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 13,
                                fontWeight: FontWeight.w200)),
                      );
                    },
                  ),
    ),
);

LogFoldersModel() 中的 changeColor 方法

class LogFoldersModel extends ChangeNotifier {
  Color color = new Color(0xff707070);

  changeColor() {
    color = Color(0xff664411);
    notifyListeners();
  }
}

注意：当按钮在屏幕 B 中时它工作正常，但现在我想更新另一个屏幕中的值然后导航到屏幕 B，它不会工作。所以我认为问题可能是我在导航中做错了什么......？

【问题讨论】：

标签： flutter dart flutter-provider state-management

【解决方案1】：

我相信您的 ChangeNotifierProvider 应该将您的 MaterialApp 小部件包装在 main.dart 中，并且不应在屏幕 B 中包装任何内容。

这将确保您的所有路由/页面都可以访问 Provider 及其持有的状态对象/值。

我解释Provider scope in depth in this answer。

如果你有一个 ChangeNotifierProvider 包装 both MaterialApp 和屏幕 B，那么屏幕 B 中的那个在屏幕 B 内时会从 MaterialApp 隐藏提供程序。因此，你赢了不能从屏幕 A → 屏幕 B 共享状态。屏幕 B 在其自己的 Provider 范围内。

【讨论】：