Flutter - 自定义路由转换导致黑屏
Flutter - Custom Route Transition results in a black screen
我正在尝试从我的导航器自定义动画。这就是我当前的路线:
class HelpRoute<T> extends MaterialPageRoute<T> {
HelpRoute({
WidgetBuilder builder,
}): super(builder: builder);
@override
Widget buildTransitions(BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child)
{
if (settings.isInitialRoute)
return child;
return new SlideTransition(
position: new FractionalOffsetTween(
begin: FractionalOffset.topRight,
end: FractionalOffset.topLeft,
)
.animate(
new CurvedAnimation(
parent: animation,
curve: Curves.ease,
)
),
child: child,
);
}
@override Duration get transitionDuration => const Duration(milliseconds: 400);
}
这完全可以正常工作并且从右到左淡入。但现在我想要从左到右的过渡。如果我将开始更改为 topLeft,将结束更改为 topRight,它就会变得疯狂并最终出现黑屏。
是否有我必须使用的其他选项才能实现该功能?提前致谢
您希望新路线完全从屏幕左侧开始,即 -1.0, 0.0 的 FractionalOffset。您希望它以 0.0、0.0、a.k.a FractionalOffset.topLeft
的 FractionalOffset 结束。将构造函数参数更改为 FractionalOffsetTween
,如下所示:
new FractionalOffsetTween(
begin: const FractionalOffset(-1.0, 0.0),
end: FractionalOffset.topLeft,
)
我正在尝试从我的导航器自定义动画。这就是我当前的路线:
class HelpRoute<T> extends MaterialPageRoute<T> {
HelpRoute({
WidgetBuilder builder,
}): super(builder: builder);
@override
Widget buildTransitions(BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child)
{
if (settings.isInitialRoute)
return child;
return new SlideTransition(
position: new FractionalOffsetTween(
begin: FractionalOffset.topRight,
end: FractionalOffset.topLeft,
)
.animate(
new CurvedAnimation(
parent: animation,
curve: Curves.ease,
)
),
child: child,
);
}
@override Duration get transitionDuration => const Duration(milliseconds: 400);
}
这完全可以正常工作并且从右到左淡入。但现在我想要从左到右的过渡。如果我将开始更改为 topLeft,将结束更改为 topRight,它就会变得疯狂并最终出现黑屏。
是否有我必须使用的其他选项才能实现该功能?提前致谢
您希望新路线完全从屏幕左侧开始,即 -1.0, 0.0 的 FractionalOffset。您希望它以 0.0、0.0、a.k.a FractionalOffset.topLeft
的 FractionalOffset 结束。将构造函数参数更改为 FractionalOffsetTween
,如下所示:
new FractionalOffsetTween(
begin: const FractionalOffset(-1.0, 0.0),
end: FractionalOffset.topLeft,
)