Flutter - Drawer：如果存在则显示现有页面，而不是新实例

Question

我正在开发的应用尝试尽可能地为 Android 和 iOS 用户采用最原生的体验。

为此，应用运行CupertinoApp 和MaterialApp。

在 iOS 上，我使用 CupertinoScaffold 显示 CupertinoTabBar 和 BottomNavigationBarItems。它的表现和预期的一样好：

• 页面只创建一次，我第一次点击标签时；
• 页面在返回到之前显示的选项卡时恢复：在我的一个选项卡中，有一个列表，并且它的滚动位置始终保持不变。

在 Android 上，情况有所不同：我使用的是 Drawer 小部件。 当我点击一个条目时，我调用Navigator#push 来显示相关页面。但是，这将继续在堆栈中添加每个条目页面的新实例。

我似乎无法返回到现有页面。至少，我不能用 iOS 做到这一点。

看着Navigator，我看到似乎实现了我正在寻找的功能：

• popUntil => 将显示我现有的屏幕，但会显示在所有其他屏幕的广阔范围内，因此只会为了一页而做出牺牲。无所事事……
• pushReplacement => 将显示目标页面的新实例并销毁当前页面。不可取。

我错过了什么？我怎样才能实现CupertinoTabBar 似乎能够做到的事情？

Answer 1

好吧，我通过另一个方向解决了我的问题。

简单地说，我认为没有办法，用Navigator 来实现我想要的。

我找到的解决方案是：Keep state of widgets with Bottom Navigation Bar in Flutter

本指南建议使用IndexedStack，在保持其状态的同时只显示一个孩子。

这就是我设法使它工作的方法：

1. 创建您的MaterialApp
2. 将其home 设置为一个名为MaterialHomePage 的自定义有状态小部件
3. 这个MaterialHomePage 构建了一个Scaffold：
   • 带有AppBar 及其标题（活动页面的标题）；
   • 带有drawer 及其参数（稍后会详细介绍）
   • 而body就是所谓的精彩IndexedStack：
     • 将其children 设置为页面/小部件列表，与抽屉中可用的页面相同
     • 将index 设置为您的MaterialHomePage 的属性_selectedPageIndex
   • 并且具有在用户选择要导航到的页面时触发的功能，在这种情况下，通常会调用setState，您可以在其中更新_selectedPageIndex属性以及_selectedPageIndexproperty `。
4. Drawer:
   • 采用两个参数：
     • 当前活动页面索引（应用启动时默认为 0）
     • 带有目标页面标题和索引的Function
   • 必须列出与您在IndexedStack 中声明的页面一样多的条目（通常是ListTile），该页面显示在MaterialHomePage 中。
   • 在点击条目时，它会调用上述函数并传递被点击条目的索引以及相关的页面标题。

最后会发生什么：

1. 用户打开抽屉。
2. 用户选择了一个新的目的地（比如说：条目 #3）。
3. MaterialHomePage 收到通知（通过回调）用户选择触发setStage，这将：
   • 感谢IndexedStack 和index = 3 更新当前页面
   • 并更新其AppBar 的标题

和瞧你去：每个页面都被保留，没有状态丢失和流畅的导航。

注意：如果用户使用 Android 的后退按钮功能，此时它将关闭应用程序，因为 Navigator 堆栈为空。如果用户在另一个页面中，如果您希望默认为第一个条目/页面（在启动时显示），也许有一种方法可以监听此类事件。

NB2：我也想知道是否有一种方法可以为页面过渡设置动画。

PS：让我知道答案是否是一个很好的解决方案，在这种情况下我会验证它。或者，如果您找到了实现它的适当方法。