Flutter 颤振：设置到命名管线的过渡动画

当我使用

Navigator.pushNamed（context，“/someRoute”），有一个最小的动画从屏幕底部沿新路线滑动（在Android上，在iOS上可能看起来不同）

如何将自定义动画添加到此过渡

我发现，它有一些非常简洁的未命名的路由示例代码。它们实现了自己的类，该类继承自
PageRouteBuilder
，可以这样使用：
Navigator.push（上下文，SlideRightRoute（page:Screen2（））
。但是
PageRouteBuilder
不是小部件，不能在
MaterialApp
中注册为路由。因此，我不知道如何将此应用于命名路由。
您需要在
MaterialApp
小部件中使用
ongeneraterout

onGenerateRoute: (settings) {
  if (settings.name == "/someRoute") {
    return PageRouteBuilder(
      settings: settings, // you need to pass this to make method like popUntil(), pushNamedAndRemoveUntil() works
      pageBuilder: (_, __, ___) => SomePage(),
      transitionsBuilder: (_, a, __, c) => FadeTransition(opacity: a, child: c)
    );
  }
  // unknown route
  return MaterialPageRoute(builder: (_) => UnknownPage());
},

在不使用生成路线的情况下，可以使用动画路线

onGenerateRoute

如果您正在使用

MaterialApp

的

routes

映射来定义命名路由，以下是如何定义命名路由（其名称将不为

null

）

只需扩展

PageRouteBuilder

，即可创建您的路线：

import 'package:flutter/material.dart';

class FadeInRoute extends PageRouteBuilder {
  final Widget page;

  FadeInRoute({this.page, String routeName})
      : super(
          settings: RouteSettings(name: routeName),            // set name here
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              FadeTransition(
            opacity: animation,
            child: child,
          ),
          transitionDuration: Duration(milliseconds: 500),
        );
}

---

使用

OnGeneratorOute

Property它对我有用。我唯一要添加的是

设置

需要传递给

PageRouteBuilder

构造函数，以便包含路由参数。以下是我最后的结论：``onGenerateRoute:（设置）=>PageRouteBuilder（pageBuilder:（上下文，_uu）=>routes[settings.name]（上下文），设置：设置，TransitionBuilder:（，animation1，uuuuuuu，child）=>FadeTransition（不透明：animation1，child:child），``还有，如果在

MaterialApp

上设置

routes

，它似乎忽略了

onGenerateRoute

，如果我使用它，顶部的url似乎不再显示新的路由名称。如果我想说使用pushnamedremoveintill（），这不是一个问题吗？这是关于如何设置最小页面转换的最简单和最好的答案。简单就是好。谢谢。你能解释一下当需要

字符串
时，如何在
导航器中传递参数
FadeInRoute
。pushNamed
作为第二个参数吗？@MikeKokadii我想@Alexandar应该使用
Navigator.push（）
。这种方法非常适合在给定的routeName转换为预先确定的小部件。但是，您需要自己为该页面提供小部件。如果您正在寻找一种简单的方法来替换
Navigator.pushNamed（..）
的转换，那么就不是这样了。@Max谢谢您指出这一点！这绝对是个错误。在我的原始代码中，我使用了
pushReplacement
，因此在编写本文时可能误读了它。答案现在已编辑：）@MikeKokadii请检查这是否适用于您：）
Navigator.push( // or pushReplacement, if you need that
  context,
  FadeInRoute(
    routeName: RouteNames.home,
    page: MyHomeScreen(),
  ),
);