时间戳

首页 > 解决方案 > 如何在 Flutter 中创建自定义后退导航

flutter - 如何在 Flutter 中创建自定义后退导航

问题描述

我正在尝试在我的 Flutter 应用程序中实现自定义导航。

在我的主页上，我有以下可能的路线：

选项1

主 --> 仪表板 --> 用户交易列表 --> 交易页面 --> 详细信息页面

选项 2

主 --> 登录 --> 仪表板 --> 用户交易列表 --> 交易页面 --> 详细信息页面

我在选项 1 中遇到的问题是，当想要从详细信息页面向后导航选项 1 时，我希望能够转到交易页面，但导航会将我带回 Main。

在登录后的选项 2 中，当在仪表板上时，用户应该转到主页而不是返回登录页面。

我尝试使用 WillPopScope 如下：

Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () async {

       Navigator.pop(context,  MaterialPageRoute(builder: (context) => BuyerDealPage()),);
       return false;
   },
   child: MaterialApp(

     home: Scaffold(

但是通过上述方式，应用程序仍会一直导航回主页，而不是返回交易页面。

我尝试移动WillPopScope下面的 Material 应用程序，这也不起作用。

我使用WillPopScope不正确吗？我的想法是WillPopScope覆盖后退按钮？

我也尝试过替换Navigator.pop，Navigator.push但这似乎也不起作用。

不确定它是否有帮助，但我已经WillPopScope在我的所有页面上实现了，因为我想确保我指定后退导航。

编辑：关于我如何在页面之间推送的代码（例如用户交易列表 --> 交易页面）

Navigator.push(context,MaterialPageRoute(builder: (context) => BuyerDealPage()));

标签： flutterdartflutter-navigation

解决方案

如果您使用orNavigator.of(context).pop()推送下一页，我认为只有一个标准应该适用于您的情况。Navigator.of(context).push()Navigator.of(context).pushNamed()

对于第二种情况，登录后推送仪表板页面时，可以使用Navigator.of(context).pushReplacement()方法，将登录页面替换为仪表板页面。这样，当您尝试从仪表板页面返回时，您将直接进入主页面。

如果你想用 Android 后退按钮实现相同的行为，你需要WillPopScope像你一样包装你的页面，但在onWillPop使用中：

WillPopScope(
   onWillPop: () async {
       Navigator.of(context).pop();
       return false;
   },
   child: ...yourNextWidgetHere...

推荐阅读