Question

我有一个MaterialApp，其中有一个IndexedStack作为其主页，可用于BottomBarNavigation。现在，我希望在其中一个“标签”中完成页面转换，就像在iOS中一样。

部分技巧可以通过使用Navigator.push中的CupertinoPageRoute完成，如下所示：

Navigator.of(context, rootNavigator: true).push(CupertinoPageRoute<bool>(
      //fullscreenDialog: true,
      builder: (BuildContext context) => new DescriptionPage(),

    ));

这将导致新页面作为iOS应用从右侧滑动。但是，正如CupertinoPageRoute的文档中所述，我也希望将第一页视差右移：

当另一页进入覆盖时，页面也会视差向左移动。

如果通过“ Navigator.push（CupertinoPageRoute ...”）创建了第一页本身，则将完成此操作，但是正如我提到的，我的第一页是应用程序主页的主要页面之一。

当前过渡样式： the new page slides in from right, but the current page does not shift to left

如您所见，当前页面不会向左移动。可能有一种方法可以使当前页面的窗口小部件充当CupertinoPageRoute构建的窗口小部件，以使当前页面本身在新页面进入时向左滑动。

Answer 1

在MaterialApp的theme:参数中，尝试以下操作：

MaterialApp(
  theme: ThemeData( //or replace with your custom ThemeData.copywith()
    pageTransitionsTheme: PageTransitionsTheme(
      builders: {
        TargetPlatform.android: CupertinoPageTransitionsBuilder(),
        TargetPlatform.iOS: CupertinoPageTransitionsBuilder()
      }
    ),
  ),
)

Answer 2

如果运行下面的代码，您将看到“第一个选项卡”正在执行您所看到的，而第二个选项卡正在执行您所期望的。

fruitBasketMap = 
    basketMap.entrySet()
             .stream()
             .collect(groupingBy(Entry::getKey,
                                 toMap(e -> Food.FRUITS, Entry::getValue)));

使用Navigator.of（ctx）.push时，应用程序尝试在根导航器上推送新屏幕，在您的情况下，该页面为标签栏，但无法替换标签栏，因此您看到的动画不完整。但是，使用第二种方法时，您已在相关选项卡中定义了路线并使用“推送名称”，该应用将使用分配给该选项卡的导航器，从而获得预期的结果。

快乐编码！

在底部导航栏上按下新屏幕时出现Flutter Transition Animation问题

2 个答案: