我通过以下实现进行了简单的淡入淡出页面转换:
return new PageRouteBuilder( opaque: true, pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) { return new FadeTransition(opacity: animation, child: route); });
当进入新页面时,它会起到欺骗作用,它会在新页面中淡入淡出,但是旧页面仍然可见,而新页面并未100%淡入。
理想情况下,我希望这种方式的工作方式是先淡出上一页,然后淡出新页面。我知道我可以以某种方式使用secondaryAnimation,但目前无法弄清楚。我试着FadeTransition在小时候嵌套另一个并使用它,但是在这种情况下,我的路线会很快消失并消失(因为第二个现在为0)
FadeTransition
编辑 :这不使用MaterialApp,其基于WidgetsApp
MaterialApp
WidgetsApp
Edit2 :发现我也可以isInitialRoute从路由器的设置中使用,我可以以某种方式在这里应用它吗?
isInitialRoute
从Flutter源代码注释中:
/// Signature for the [PageRouteBuilder] function that builds the route's /// transitions. /// /// See [ModalRoute.buildTransitions] for complete definition of the parameters. typedef Widget RouteTransitionsBuilder(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child);
并进一步:
/// We've used [PageRouteBuilder] to demonstrate the [buildTransitions] method /// here. The body of an override of the [buildTransitions] method would be /// defined in the same way. /// /// When the [Navigator] pushes a route on the top of its stack, the /// [secondaryAnimation] can be used to define how the route that was on /// the top of the stack leaves the screen. Similarly when the topmost route /// is popped, the secondaryAnimation can be used to define how the route /// below it reappears on the screen. When the Navigator pushes a new route /// on the top of its stack, the old topmost route's secondaryAnimation /// runs from 0.0 to 1.0. When the Navigator pops the topmost route, the /// secondaryAnimation for the route below it runs from 1.0 to 0.0. /// /// The example below adds a transition that's driven by the /// [secondaryAnimation]. When this route disappears because a new route has /// been pushed on top of it, it translates in the opposite direction of /// the new route. Likewise when the route is exposed because the topmost /// route has been popped off. /// /// ```dart /// transitionsBuilder: ( /// BuildContext context, /// Animation<double> animation, /// Animation<double> secondaryAnimation, /// Widget child, /// ) { /// return new SlideTransition( /// position: new AlignmentTween( /// begin: const Offset(0.0, 1.0), /// end: Offset.zero, /// ).animate(animation), /// child: new SlideTransition( /// position: new TweenOffset( /// begin: Offset.zero, /// end: const Offset(0.0, 1.0), /// ).animate(secondaryAnimation), /// child: child, /// ), /// ); /// } /// ``` /// /// In practice the `secondaryAnimation` is used pretty rarely. /// /// The arguments to this method are as follows: /// /// * `context`: The context in which the route is being built. /// * [animation]: When the [Navigator] pushes a route on the top of its stack, /// the new route's primary [animation] runs from 0.0 to 1.0. When the [Navigator] /// pops the topmost route this animation runs from 1.0 to 0.0. /// * [secondaryAnimation]: When the Navigator pushes a new route /// on the top of its stack, the old topmost route's [secondaryAnimation] /// runs from 0.0 to 1.0. When the [Navigator] pops the topmost route, the /// [secondaryAnimation] for the route below it runs from 1.0 to 0.0. /// * `child`, the page contents. /// /// See also: /// /// * [buildPage], which is used to describe the actual contents of the page, /// and whose result is passed to the `child` argument of this method.
我个人的建议是文档模糊不清或缺少代码;)
最好