0

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

为此，应用程序运行 aCupertinoApp和 a MaterialApp。

在 iOS 上，我使用CupertinoScaffold显示 a CupertinoTabBarwith BottomNavigationBarItems。它按预期表现得非常好：

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

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

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

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

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

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

4

1 回答 1

0

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

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

我找到的解决方案是：在 Flutter 中使用底部导航栏保持小部件的状态

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

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

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

最后，会发生什么：

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

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

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

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

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

于 2021-05-12T15:16:31.030 回答