flutter如何使模态路径动画来自底部

2ic8powd  于 2023-01-06  发布在  Flutter
关注(0)|答案(2)|浏览(170)

我需要使模态路线动画来自底部时,单击,但唯一的动画,我设法做到的是淡出和旋转动画。
它是一个覆盖层,当用户单击按钮对其进行解释时会调用它。
这是构建页面

@override        
Widget buildPage(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
  ) {
    return Material(
      type: MaterialType.transparency,
      // make sure that the overlay content is not cut off
      child: SafeArea(
        child: _buildOverlayContent(context),
      ),
    );
  }

这是构建转换:

@override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    // You can add your own animations for the overlay content
    return FadeTransition(
      opacity: animation,
      child: ScaleTransition(
        scale: animation,
        child: child,
      ),
    );
  }

我试过从几种方式使用幻灯片过渡,但似乎每次我尝试都不起作用。它要么导致错误,要么根本不起作用。
(One我的尝试)

Animation<Offset> animated() {

   Animation<Offset> anime;
    return anime;
  }

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    //You can add your own animations for the overlay content
    return SlideTransition(
      position: animated(),
      child: child,
    );
  }

我该怎么办?

qyzbxkaa

qyzbxkaa1#

这应该可以实现您的期望:

@override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {

    return SlideTransition(
      position: Tween(
        begin: const Offset(0.0, 1.0),
        end: Offset.zero,
      ).animate(animation),
      child: child,
    );
  }
toe95027

toe950272#

您可以使用page_transition软件包:
https://pub.dev/packages/page_transition
您可以使用bottomToTop转换来实现这一点。

Navigator.push(
  context, 
  PageTransition(
    type: PageTransitionType.bottomToTop, 
    child: DetailScreen()
  )
);

相关问题