Flutter 过渡退出 [英] Flutter Transition Exit

问题描述

在Android API上我们可以使用

overridePendingTransition(int enterAnim, int exitAnim)

定义进入和退出转换.

如何在 Flutter 中做到这一点?

我已经实现了这段代码

class SlideLeftRoute extends PageRouteBuilder {最终小部件进入小部件；SlideLeftRoute({this.enterWidget}): 极好的(pageBuilder:(BuildContext上下文，Animation动画，AnimationsecondaryAnimation){返回 enterWidget;},transitionsBuilder: (BuildContext context, Animation animation, Animation secondaryAnimation, Widget child) {返回 SlideTransition(位置:新的 Tween(开始:const Offset(1.0, 0.0),结束:Offset.zero，).animate(动画),孩子:孩子);},);}

但它只定义了输入转换.我如何定义退出转换?

更新

假设我有两个屏幕(Screen1 和 Screen2)，当我执行时

 Navigator.push(上下文，SlideLeftRoute(enterWidget: Screen2()));

我想将动画应用到 Screen1 和 Screen2 而不仅仅是 Screen2

---

我使用了不同的方式，但diegodeveloper提供的逻辑类似

完整代码:

void main() =>runApp(MaterialApp(home: Page1()));类 Page1 扩展 StatelessWidget {@覆盖小部件构建(BuildContext 上下文){返回脚手架(backgroundColor: Colors.grey,appBar: AppBar(title: Text('Page 1')),身体:中心(孩子:ElevatedButton(onPressed: () =>导航器.push(语境，我的自定义页面路由(家长:这个，构建器:(上下文)=>第2页()，),),孩子:文本('第二页')，),),);}}类 Page2 扩展了 StatelessWidget {@覆盖小部件构建(BuildContext 上下文){返回脚手架(backgroundColor: Colors.blueGrey,appBar: AppBar(title: Text('Page 2')),身体:中心(孩子:ElevatedButton(onPressed: () =>Navigator.pop(上下文)，孩子:文本('返回')，),),);}}类 MyCustomPageRoute扩展 MaterialPageRoute{最终的 Widget 父级；我的自定义页面路由({需要 this.parent,所需的 WidgetBuilder 构建器，路由设置?设置，}) : super(builder: builder, settings: settings);@覆盖Widget buildTransitions(_, Animation<double> animation, __, Widget child) {var anim1 = Tween(开始:Offset.zero，结束:Offset(-1.0, 0.0)).animate(animation);var anim2 = Tween(开始:Offset(1.0, 0.0)，结束:Offset.zero).animate(animation);返回堆栈(孩子们:<小部件>[SlideTransition(位置:anim1，孩子:父母)，SlideTransition(位置:anim2，孩子:孩子)，],);}}

On Android API we can use

overridePendingTransition(int enterAnim, int exitAnim) 

to define the enter and exit transitions.

How to do it in Flutter?

I have implemented this code

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

  );
}

but it only defines the enter transition. How can i define de exit transition?

UPDATE

Imagine that i have two screens (Screen1 and Screen2), when i execute

 Navigator.push(
        context, SlideLeftRoute(enterWidget: Screen2()));

i'd like to apply an animation to both Screen1 and Screen2 and not only to Screen2

example

解决方案

Screenshot (Null Safe):

---

I used a different way, but similar logic provided by diegodeveloper

Full code:

void main() => runApp(MaterialApp(home: Page1()));

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(title: Text('Page 1')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.push(
            context,
            MyCustomPageRoute(
              parent: this,
              builder: (context) => Page2(),
            ),
          ),
          child: Text('2nd Page'),
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      appBar: AppBar(title: Text('Page 2')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.pop(context),
          child: Text('Back'),
        ),
      ),
    );
  }
}

class MyCustomPageRoute<T> extends MaterialPageRoute<T> {
  final Widget parent;

  MyCustomPageRoute({
    required this.parent,
    required WidgetBuilder builder,
    RouteSettings? settings,
  }) : super(builder: builder, settings: settings);

  @override
  Widget buildTransitions(_, Animation<double> animation, __, Widget child) {
    var anim1 = Tween<Offset>(begin: Offset.zero, end: Offset(-1.0, 0.0)).animate(animation);
    var anim2 = Tween<Offset>(begin: Offset(1.0, 0.0), end: Offset.zero).animate(animation);
    return Stack(
      children: <Widget>[
        SlideTransition(position: anim1, child: parent),
        SlideTransition(position: anim2, child: child),
      ],
    );
  }
}

这篇关于Flutter 过渡退出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！