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

Question

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

从我的主页我有以下可能的路线：

选项 1

主页 --> 控制面板 --> 用户交易列表 --> 交易页面 --> 详情页面

选项 2

主页 --> 登录 --> 控制面板 --> 用户交易列表 --> 交易页面 --> 详情页面

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

在登录后的选项 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.push替换Navigator.pop，但似乎也不管用。

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

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

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

Answer 1

如果您使用 Navigator.of(context).push() 或 Navigator.of(context).pushNamed().

推送下一页，我认为标准 Navigator.of(context).pop() 应该适用于您的情况

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

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

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

Answer 2

我最终通过实施命名路线重新设计了导航。然后我在所有需要导航的地方使用 pushNamedreplacement。这包括在 WillPopScope 中。不要使用 pop.context 而是使用 pushnamedreplacement.

此外，作为 Flutter 的新手，我向每个新的小部件添加了 MaterialApp，这是你不应该做的。

这会导致导航混乱。

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

How do you create a custom back navigation in Flutter

flutter

dart

flutter-navigation