推入另一页时滑出页面的最佳方法是什么?

时间:2019-05-13 19:32:54

标签: flutter flutter-navigation

这里已经讨论了这个问题,但是没有一个解决方案是干净的,也不是奇怪的事情,例如两次显示同一页面。 Flutter Transition Exit

我正在尝试做到这一点,以便当您导航到下一页时,当前页面向左滑动,而下一页从右侧进入。但是,我能想到的最好的解决方案是将当前页面的内容包装在SlideTransition中。导航到下一页时,将在开始播放动画以将当前页面滑出的同时,开始在“ SlideRightRoute”动画中打开新页面。

尽管这可行,但是感觉就像我在“针对框架”工作。我的问题是:是否有一种“正确”的方式来动画化页面,或者这目前是框架中的一个漏洞(而这种解决方案实际上是我们目前能做的最好的事情)?

abstract class SlideablePage<T extends StatefulWidget> 
extends State<T> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _offset;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );
    _offset = Tween<Offset>(
      begin: Offset(0.0, 0.0),
      end: Offset(-1.0, 0.0),
    ).animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _offset,
      child: buildContent(context),
    );
  }

  Widget buildContent(BuildContext context);

  Future push(Widget page) async {
    var result = Navigator.push(
      context,
      new SlideRightRoute(widget: page),
    );
    _controller.forward();
    await result;
    _controller.reverse();
  }
}

class SlideRightRoute extends PageRouteBuilder {
  final Widget widget;
  SlideRightRoute({this.widget})
      : super(
          transitionDuration: const Duration(milliseconds: 500),
          pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
            return widget;
          },
          transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
            return new SlideTransition(
              position: new Tween<Offset>(
                begin: const Offset(1.0, 0.0),
                end: Offset.zero,
              ).animate(animation),
              child: child,
            );
          },
        );
}

0 个答案:

没有答案