如何在颤动中弹出动画答案

【问题标题】：how to POP with animation in flutter如何在颤动中弹出动画
【发布时间】：2019-02-19 21:02:13
【问题描述】：

我正在做 Navigator.pop 操作，我想淡出过渡到页面。我已经尝试过 Fluro，但没有兴趣实现它。

这是我在做什么：-

 Widget build(BuildContext context) {
return Scaffold(
  appBar: new AppBar(
    title: new Text("Cart"),
    leading: Hero(
      tag: "cartIcon",
      child: Icon(Icons.shopping_cart, color: Colors.yellow),
    ),
    actions: <Widget>[
      IconButton(
          icon: Icon(Icons.close),
          onPressed: () {
            Navigator.pop(context);
          })
    ],
  ),
);

}

【问题讨论】：

标签： flutter flutter-animation

【解决方案1】：

没有人回答，但我找到了解决方案，你可以使用 MaterialPageRoute 类这样做

类：-

import 'package:flutter/material.dart';
class CustomNavRoute<T> extends MaterialPageRoute<T> {
  CustomNavRoute({WidgetBuilder builder, RouteSettings settings})
      : super(builder: builder, settings: settings);

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    if (settings.isInitialRoute) return child;

    return new FadeTransition(opacity: animation, child: child);
  }
}

然后像这样调用类：-

 Navigator.pushReplacement(context,CustomNavRoute(builder: (context) => IntroScreen()));

也在推送中

Navigator.push(context, CustomNavRoute(builder: (context) => LoginSignup()));

这会将 PUSH 和 POP 上的淡入淡出转换应用到页面！

【讨论】：

这不是流行音乐！想象一下，我来 IntroPage 是为了登录 Page。我将再次在介绍页面上推送介绍页面
请检查它是否也在pop上显示动画。

【解决方案2】：

pop 方法使用与 push 方法相同的 Route，因此您可以将所需的动画放在 push 方法中，只需确保在路由中添加 reverseTransitionDuration 以使其动画更明显。

//push to page2
Navigator.of(context).push(
  PageRouteBuilder(
    transitionDuration: Duration(seconds: 1),
    reverseTransitionDuration: Duration(seconds: 1),
    pageBuilder: (context, animation, secondaryAnimation) => page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      final tween = Tween(begin: 0.0, end: 1.0);
      final fadeAnimation = animation.drive(tween);
      return FadeTransition(
        opacity: fadeAnimation,
        child: child,
      );
    },
  ),
);


//pop from page2
Navigator.of(context).pop();

【讨论】：

【解决方案3】：

如果您有任何数据结构方面的知识，那么您就会了解堆栈。如果你对堆栈有基本的了解，那么你就会知道 push 和 pop。

ElevatedButton(
       onPressed:(){
       Navigator.of(context).pushNamed('/screen2');
    },
       child: new Text("Push to Screen 2"),
    ),

您可以通过这一行导航回到上一页。

Navigator.of(context).pop();

【讨论】：