如何使用 Flutter 更改导航动画答案

【问题标题】：How to change navigation animation using Flutter如何使用 Flutter 更改导航动画
【发布时间】：2018-10-16 05:44:24
【问题描述】：

在 Flutter 中导航到/从页面时，有什么方法可以更改默认动画？

【问题讨论】：

标签： animation flutter navigation

【解决方案1】：

您可以使用PageRouteBuilder。

以下示例在您导航到第二个屏幕时显示FadeTransition。

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (c, a1, a2) => Page2(),
    transitionsBuilder: (c, anim, a2, child) => FadeTransition(opacity: anim, child: child),
    transitionDuration: Duration(milliseconds: 2000),
  ),
);

【讨论】：

很好，谢谢！

【解决方案2】：

您可以继承 MaterialPageRoute 并覆盖 buildTransitions。

例如：

class MyCustomRoute<T> extends MaterialPageRoute<T> {
  MyCustomRoute({ 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;
    // Fades between routes. (If you don't want any animation,
    // just return child.)
    return new FadeTransition(opacity: animation, child: child);
  }
}

使用：

new RaisedButton(
                child: new Text('Goto'),
                onPressed: (){
                  Navigator.push(
                    context,
                    new MyCustomRoute(builder: (context) => new SecondPage()),
                  );
                }),

用你的动画替换淡入淡出

【讨论】：

感谢您的回答。我检查了颤振文档中的buildTransitions (docs.flutter.io/flutter/widgets/ModalRoute/…)，看来我必须从头开始为我的动画编写代码。在那种情况下，我认为使用CupertinoPageRoute 会更简单。尽管如此，该解决方案还是很有帮助的。
仅仅用我们的动画替换 Fade 对我们没有帮助，因为不同的动画有不同的参数。
如何在Navigation的名称替换中使用它？

【解决方案3】：

您可以使用CupertinoPageRoute 来实现此目的。请检查以下代码。

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';


void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Transition Animation Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new FirstPage(),
    );
  }
}

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => new _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('First Page'),
      ),
      body: new Center(
        child: new RaisedButton(
          child: new Text('Goto Second Page'),
          onPressed: () {
            Navigator.of(context).push(new SecondPageRoute());
          },
        ),
      ),
    );
  }
}

class SecondPageRoute extends CupertinoPageRoute {
  SecondPageRoute()
      : super(builder: (BuildContext context) => new SecondPage());


  // OPTIONAL IF YOU WISH TO HAVE SOME EXTRA ANIMATION WHILE ROUTING
  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return new FadeTransition(opacity: animation, child: new SecondPage());
  }
}

class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => new _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Second Page'),
      ),
      body: new Center(
        child: new Text('This is the second page'),
      ),
    );
  }
}

一些动画游戏

  // OPTIONAL IF YOU WISH TO HAVE SOME EXTRA ANIMATION WHILE ROUTING
  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return new RotationTransition(
        turns: animation,
        child: new ScaleTransition(
          scale: animation,
          child: new FadeTransition(
            opacity: animation,
            child: new SecondPage(),
          ),
        ));
  }

【讨论】：

感谢您的回答。我在现有的应用程序代码中将MaterialPageRoute 替换为CupertinoPageRoute 并获得了滑动动画。
@nlern 关注这个。我已经测试过并且可以正常工作：stackoverflow.com/a/55340515/3743245

【解决方案4】：

我通过在pageTransitionsTheme 中为应用级主题提供我自己的builders 和自定义地图来做到这一点。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator Tile',
      home: RandomWords(),
      theme: new ThemeData(
        primaryColor: Colors.white,
        // Add the line below to get horizontal sliding transitions for routes.
        pageTransitionsTheme: PageTransitionsTheme(builders: {TargetPlatform.android: CupertinoPageTransitionsBuilder(),}),
      ),
    );
  }
}

当然，我没有为 ios 添加地图条目，因为TargetPlatform 仅使用 android。

【讨论】：

【解决方案5】：

您也可以从https://pub.dev/packages/page_transition 签出page_transition 包。该软件包包含以下不同的转换。褪色，右到左，左到右，从上到下，向下向上，比例（对齐），旋转（对齐），大小（对齐）， rightToLeftWithFade, leftToRightWithFade

【讨论】：