Flutter/Dart - 在 PageView 中编辑页面，然后刷新并滚动回同一位置？答案

【问题标题】：Flutter/Dart - Edit Page in PageView, then Refresh and Scroll back to Same Place?Flutter/Dart - 在 PageView 中编辑页面，然后刷新并滚动回同一位置？
【发布时间】：2020-12-24 13:00:57
【问题描述】：

目前，我可以将编辑提交到 PageView 中的单个页面，然后将 Navigator.push 提交到新创建的单个编辑页面，或者将 Navigator.pop 返回到包含未编辑页面的原始 Pageview。

但我更愿意在更新/刷新的网页浏览中弹回同一位置。我在想我可以在原始 PageView 页面上执行此操作：

       Navigator.pushReplacement(context,new MaterialPageRoute(
           builder: (BuildContext context) => EditPage()),);

但是在编辑之后，我怎样才能弹出一个刷新的 PageView 并滚动到现在更新的原始页面？或者，还有更好的方法？有人提到了钥匙，但我还没有学会使用它们。

【问题讨论】：

标签： flutter dart flutter-pageview flutter-routes

【解决方案1】：

问题涉及 Reactive App-State 的概念。处理此问题的正确方法是使用应用状态管理解决方案，例如 Bloc 或 Redux。

说明：应用程序状态负责您正在编辑的数据。 EditPage 只是告诉商店（App-State 容器）编辑该数据，而框架会处理应该在 PageView 中更新的数据。

作为临时解决方案，您可以使用对 Navigation.push() 的异步调用，并在 EditPage 返回后刷新 PageView 状态。您还可以使用 pop() 的重载版本来返回成功条件，这有助于条件 setState()。

【讨论】：

但这不会让我遇到同样的问题，即新刷新的 PageView 从当前索引中的第一页而不是已编辑的页面开始？
您能否引导我了解有关如何使用 Bloc 更新单个 PageView 的信息或教程？
我找到了这个redux tutorial。 Bloc 用于存在大量状态变化的应用程序中，例如每秒刷新股票图的股票市场应用程序。如果您真的想使用它，请向创作者学习 - bloc。

【解决方案2】：

您知道Navigator.pushReplacement(...) 返回一个Future<T>，当您最终返回原始上下文时它完成？那么你将如何利用这个事实呢？假设您要更新原始页面的String：

String itWillBeUpdated="old value";

@override
Widget build(BuildContext ctx)
{
.
.
.
onPressesed:() async {

itWillBeUpdated= await Navigator.pushReplacement(context,new MaterialPageRoute(
           builder: (BuildContext context) => EditPage()),);

setState((){});
 
},

}

在您的编辑页面上，您可以像这样定义Navigator.pop(...)：

Navigator.pop<String>(context, "new string");

通过这样做，您可以将任何数据提供回原始页面，并通过调用setState((){})，您的页面将反映更改

【讨论】：

我同意@Sushanth Kille 的观点，即这是一种临时解决方案，适用于简单的应用程序。对于更复杂的应用程序，您应该考虑使用一些状态管理库技术，例如 provider 、 bloc 、redux 等。
我似乎无法调用“setState”。我猜是因为 onPressed 函数在 PageViewer 的 createViewItem 中。
你需要一个 StatefulWidget 类来拥有 setState((){})

【解决方案3】：

这并不理想，但有些作用。首先我创建了一个provider 类并添加了以下内容；

class AudioWidgetProvider with ChangeNotifier {

int refreshIndex;

 setRefreshIndex (ri) {
    refreshIndex = ri;
    return refreshIndex;
  }
}

然后在我第一页的PageView Builder 中，我这样做了；

Widget build(context) {
    var audioWidgetProvider = Provider.of<AudioWidgetProvider>(context);
    return
      PreloadPageView.builder(
      controller: PreloadPageController(initialPage: audioWidgetProvider.refreshIndex?? 0),

然后进入 EditPage（第二个屏幕），我这样做了；

onPressed: () async {
                                                
 audioWidgetProvider.setRefreshIndex(currentIndex);

 Navigator.pushReplacement(context,new MaterialPageRoute(builder: (BuildContext context) => EditPage()),); }

最后我这样做是为了返回一个重新加载的 PageView 滚动到已编辑的页面；

 Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) =>HomePage()));

现在唯一的问题是 PageView 列表来自 PHP/Mysql 查询，如果从 Mysql 数据库将新项目添加到列表中，我不确定该怎么办。这意味着 currentIndex 将是错误的。但我想这是另一个问题的主题。

【讨论】：