当我按下“返回按钮”时,如何重新加载Flutter数据?

lnxxn5zx  于 2023-05-19  发布在  Flutter
关注(0)|答案(1)|浏览(176)

我有这样的流量:
1.一个名为“帖子”的页面。在这个页面中,你可以点击其中一个帖子上的编辑按钮,然后被重定向到
1.“Post Page”.在这里你可以点击编辑,看到第3页“编辑文章”页面
1.“编辑帖子”页面。现在我可以在这里修改页面,然后单击“返回按钮”,这会执行navigator.of(context).pop();,当我返回到第1页时,我想重新获取帖子列表。
我的简化的不完整代码看起来像:
文章页面

@override
void initState() {
  super.initState();
  _initFuture();
}

_initFuture() {
  _future = _postsService.getUserPosts();
}

return FutureBuilder(
      future: _future,
      builder: (context, snapshot) {
        ...it builds the posts and on edit click navigates to editPost page
        Navigator.push(context, PostPage)
}

PostPage显示了单个帖子,并有一个笔编辑按钮。单击时会显示

onPressed: () {
                      Navigator.of(context).pop();
                      Navigator.push(
                          context, EditPostPage.route(postId: widget.postId));
                    },

EditPost页面有一个scaffold,它可以修改帖子,点击按钮会做“navigator.of(context).pop()”
另一个达到我想要的结果的问题是:当页面显示为从页面堆栈中带回的“返回”按钮的结果时,我如何实际触发initState或一些重新呈现。例如:一个页面执行navigator.of(context).pop(),并显示ThePage。有没有办法让“ThePage”知道这一点,并再次调用一个API,而不是使用预先存在的状态数据

tpgth1q7

tpgth1q71#

从你的“Post”传递一个函数到你的“PostPage”。在此函数中,您使用新数据调用setState。
为此,您必须在PostPage中声明一个Function类型的变量。

Function onResultCallback;

在PostPage构造函数中接受一个Function:

PostPage(this.onResultCallback);

如果你导航到PostPage,传递一个函数,它接受你的新数据或你想要的任何东西,并调用setState来刷新ui:

Navigator.push(context, PostPage(
(dynamic newData){
setState(() { myData = newData; });
})

只需要等待Navigator.push,让你的函数async for await关键字。
它应该看起来像这样:

var result = await Navigator.push(context, EditPostPage.route(postId: widget.postId));

现在,在检索到新数据后调用回调函数。

this.onResultCallback(result).call();

这将调用“Posts”中的setState函数并使用新数据更新您的ui。
既然你在你的问题中说“当我回到第1页时想重新获取帖子列表。”你也可以直接调用

_postsService.getUserPosts();

在你的onResultCallback中,因为它似乎会为你获取帖子。这样就不必向函数传递参数了,但我还是把它放在那里,以防您想向父小部件传递数据。
小提示:使用这个例子,您可以看到当您想要从子更新父时,这是多么愚蠢。现在假设它嵌套得更深,那么您必须将回调传递到小部件的更深处。
因此,根据项目的复杂程度,值得考虑Provider、Riverpod、BLoC或类似的状态管理解决方案。

相关问题