如何在颤振中为相对于前一个的路由转换设置动画

如何解决如何在颤振中为相对于前一个的路由转换设置动画

我正在尝试在路由上实现类似 coupertino 页面转换的功能。（简要说明如何定位之前和当前路线并为其设置动画）。

我检查了这个包 page_transition，但使用的逻辑似乎与它重建以前的上下文小部件并试图在新路线中破解动画有关。

即使在文档中，它似乎也只是关于导航堆栈顶部的路线。

你最终会得到这样的结果：

 Navigator.of(context).push(AnimatedRoute(
                      prevPage: widget,nextPage: Page2()));

class AnimatedRoute extends PageRouteBuilder {

  final Widget nextPage;
  final Widget prevPage;

  AnimatedRoute({this.prevPage,this.nextPage}) : super(
    transitionDuration: Duration(milliseconds: 700),pageBuilder: (
      BuildContext context,Animation<double> animation,Animation<double> secondaryAnimation,) {
      return nextPage;
    },maintainState: true,transitionsBuilder: (
      BuildContext context,Widget child,) {
      return Material(
        child: Stack(
          overflow: Overflow.visible,children: <Widget>[
            SlideTransition(
              position: Tween<Offset>(
                begin: const Offset(0.0,0.0),end: const Offset(-0.3,).animate(animation),child: prevPage,),SlideTransition(
              position: Tween<Offset>(
                begin: const Offset(1.0,end: Offset.zero,child: AnimatedBuilder(
                animation: animation,builder: (c,w) {
                  return Material(
                    shadowColor: Colors.black,// elevation: 10.0 * animation.value,child: nextPage
                  );
                },)
          ],);
    }
  );
}

除了重建之外，这也没有考虑旧小部件的状态。

一种更好的处理方式值得赞赏

解决方法

您可以使用 char word[80]; 来处理您正在过渡的页面和您正在过渡到的页面的过渡，如下所述：

注意：80 需要 3 个参数：上下文、动画和辅助动画。 PageRouteBuilder 用于页面导航，pageBuilder 用于页面导航。

假设我们有两个页面，A 和 B。

对于页面 A：

animation

对于页面 B：

secondaryAnimation

这将导致类似于下面的 gif 的过渡：

Transition sample

（gif 说明：第一页随着缩小而移出，第二页像幻灯片过渡一样进入）

还有其他软件包，例如您可以使用 getx，尽管它的功能很臃肿，但它仍然有很多过渡来应用黑白两个页面。如果需要，您也可以查看他们的源代码。

另外，你为什么不使用 Cupertino Transition，它很棒，并且受到 Flutter 的支持？