按下后退按钮后如何刷新页面答案

【问题标题】：How to refresh a page after back button pressed按下后退按钮后如何刷新页面
【发布时间】：2018-09-30 16:14:55
【问题描述】：

我有一个“列表页”。和一个添加页面。用户单击“添加页面”，转到他们添加一些实体的新页面。然后我弹出导航器，用户返回“列表页面”。

此时，我想以某种方式收到通知 - 也许是回调？重写一个方法，我不太确定 - 并从数据库中重新读取信息。

Flutter 中有这样的钩子吗？还是我应该使用另一种模式？

【问题讨论】：

看这个：medium.com/@najeira/… 你可以使用 NavigatorObserver 和 RouteObserver 来接收与屏幕转换相关的事件。
Flutter - Always execute a function when the page appears的可能重复
Force Flutter navigator to reload state when popping的可能重复

标签： flutter dart

【解决方案1】：

Navigator.push 方法返回 Route 的泛型类型的未来：

Navigator.of(context)
  .push(new MaterialPageRoute<String>(...))
  .then((String value) {
    print(value);
  });

在新路线内，当你拥有你需要的价值时：

Navigator.of(context).pop('String');

【讨论】：

如何使用那个字符串？

【解决方案2】：

如果在您的列表页面上，您创建函数，比如说 retrieveData() 来读取数据列表，然后在 initState 中调用它，如果您使用的是 pushNamed 路由，那么简单的解决方案是

Navigator.pushNamed(context, '/adddatapage').whenComplete(retrieveData());

如果你使用推送路由，

Navigator.of(context).push(new MaterialPageRoute(builder: (context) => AddPage())).whenComplete(retrieveData);

应该够了。无需在添加页面上添加额外代码。如果用户再次按下返回按钮，这将有效，而无需在添加页面中添加额外代码。

【讨论】：

我使用的是Get，所以我不直接处理Navigator.of(context)，而是更简单的Get.to()。 .whenComplete() 帮助了
@CsabaToth 是的，这里的神奇工具是 whenComplete() 方法本身。

【解决方案3】：

为@ian 的回答添加一个选项

Navigator.of(context)
  .push(new MaterialPageRoute<String>(...))
  .then((value) => setState(() => {}));

这对我有用。这将在页面加载时重建。

【讨论】：

你添加了什么，setState 电话？你可以编辑他的答案而不是自己写。

【解决方案4】：

我将回调方法作为导航器路由参数传递到“添加”页面。回调是我列表页面中的一种方法。 “添加”页面在退出时执行回调。回调方法然后简单地刷新数据并调用 setState 来刷新屏幕。

我的架构使用 Provider 和 viewmodel，但在标准应用程序中也应该是直截了当的。

【讨论】：

【解决方案5】：

对于命名路线：

Navigator.pushNamed(context, '/page2').then((_) {
  // This block runs when you have returned back to the 1st Page from 2nd.
  setState(() {
    // Call setState to refresh the page.
  });
});

对于未命名的路线：

Navigator.push(context, MaterialPageRoute(builder: (_) => Page2())).then((_) {
  // This block runs when you have come back to the 1st Page from 2nd.
  setState(() {
    // Call setState to refresh the page.
  });
});

【讨论】：

【解决方案6】：

在重定向到屏幕 2 时编写以下代码，

Navigator.pushNamed(context, '/screen2').then((_) {
  // This block runs when you have returned back from screen 2.
  setState(() {
    // code here to refresh data
  });
});

使用

Navigator.pop(上下文);

在屏幕 2 中返回屏幕 1

【讨论】：

【解决方案7】：

我使用Navigator.pushAndRemoveUntil，它将刷新页面并再次加载数据，这是示例：

Navigator.pushAndRemoveUntil(
        context,
        MaterialPageRoute(
            builder: (context) =>
                CustomerMainPage()),
            (Route<dynamic> route) =>
        false);

【讨论】：