如何在推送路由颤动上创建淡入淡出过渡?
Posted
技术标签:
【中文标题】如何在推送路由颤动上创建淡入淡出过渡?【英文标题】:How to create fade transition on push route flutter? 【发布时间】:2019-08-15 19:22:50 【问题描述】:我正在尝试为推送路由创建一个淡入淡出过渡,因为它创建了一个自定义路由,例如
class CustomPageRoute<T> extends MaterialPageRoute<T>
CustomPageRoute(WidgetBuilder builder, RouteSettings settings)
: super(builder: builder, settings: settings);
@override
Widget buildTransitions(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child)
return FadeTransition(opacity:animation, child: child, );
并通过按下按钮调用它
onPressed: ()
Navigator.push(context, CustomPageRoute(builder: (context)
return FirstScreen();
));
但这会给出一个带有滑动+淡入淡出的奇怪动画。 如何避免这里面的滑动动画?
这是我的代码的输出:
【问题讨论】:
【参考方案1】:您应该从PageRoute
扩展而不是MaterialPageRoute
class CustomPageRoute<T> extends PageRoute<T>
CustomPageRoute(this.child);
@override
// TODO: implement barrierColor
Color get barrierColor => Colors.black;
@override
String get barrierLabel => null;
final Widget child;
@override
Widget buildPage(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation)
return FadeTransition(
opacity: animation,
child: child,
);
@override
bool get maintainState => true;
@override
Duration get transitionDuration => Duration(milliseconds: 500);
用法:
final page = YourNewPage();
Navigator.of(context).push(CustomPageRoute(page));
【讨论】:
嗯。我根本看不到动画。不知道为什么这是一个非常简单的例子。 @JoKr 我首先赞成你的评论,但我发现它对我不起作用,因为我有一个空白页面正在转换。我需要添加一个Scaffold
以使其工作以上是关于如何在推送路由颤动上创建淡入淡出过渡?的主要内容,如果未能解决你的问题,请参考以下文章