如何删除默认导航路线动画

Posted 2023-02-23

【中文标题】如何删除默认导航路线动画

【英文标题】：How to remove default navigation route animation

【发布时间】：2020-01-06 10:38:21

【问题描述】：

我在颤振文档中给出的页面路由代码下方

// Within the `FirstRoute` widget
onPressed: () 
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );

但它在推送和弹出路由时提供了一些动画。

对于android，页面的入口过渡滑动页面 向上并淡入。退出过渡是相同的，但在 反向。

过渡适应平台，在 ios 上，页面滑动 从右侧进入并反向退出。页面也切换到 当另一个页面进入以覆盖它时，它会留在视差中。 （这些 方向在从右到左阅读的环境中翻转 方向。）

有没有办法在没有任何动画的情况下路由到下一页？

编辑： 请检查整个代码：

class MyApp extends StatelessWidget 
  final routes = <String, WidgetBuilder>
    SecondRoute.tag: (context) => SecondRoute(),
  ;

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: "Flutter Routes",
      home: new FirstRoute(),
      routes: routes,
      onGenerateRoute: (routeSettings) 
        if (routeSettings.name == SecondRoute.tag)
          return PageRouteBuilder(pageBuilder: (_, a1, a2) => SecondRoute());

        return null;
      ,
    );
  


class FirstRoute extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () 
            Navigator.of(context).pushNamed(SecondRoute.tag);

          ,
        ),
      ),
    );
  


class SecondRoute extends StatelessWidget 
  static String tag = 'second-route';

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () 
            Navigator.pop(context);
          ,
          child: Text('Go back!'),
        ),
      ),
    );
  

【参考方案1】：

对于@​​987654321@

Navigator.push(
  context,
  PageRouteBuilder(pageBuilder: (_, __, ___) => SecondRoute()),
)

对于@​​987654323@

首先，将此添加到您的MaterialApp

MaterialApp(
  onGenerateRoute: (settings) 
    if (settings.name == '/second') 
      return PageRouteBuilder(pageBuilder: (_, __, ___) => SecondRoute());

    return null;
  ,
)

现在，您可以使用：

Navigator.pushNamed(context, '/second');

【讨论】：

这里的 routeSettings 是什么？

routeSettings 是需要传递给onGenerateRoute 的参数，你能告诉我解决方案是否有效吗？

我在 Android 上检查过，它不起作用，它为 pushNamed 提供了相同的动画。

它现在对我有用，会接受你的回答。但可以详细说明为什么不需要路由属性以及为什么会导致问题？

@CopsOnRoad: 另外(_, a1, a2) 是什么意思？正如在 Rémi Rousselet 的回答中，我看到 _, __, ___

【参考方案2】：

由于 Flutter 现在正在迁移到 Navigator 2.0 以获得更多支持，我建议您查看他们的 migration guide，了解如何将 TransitionDelegate 添加到 Navigator。将此类的实例添加到您的导航器以实现预期结果：

import 'package:flutter/widgets.dart';

class NoAnimationTransitionDelegate extends TransitionDelegate<void> 
  @override
  Iterable<RouteTransitionRecord> resolve(
    List<RouteTransitionRecord> newPageRouteHistory,
    Map<RouteTransitionRecord, RouteTransitionRecord> locationToExitingPageRoute,
    Map<RouteTransitionRecord, List<RouteTransitionRecord>> pageRouteToPagelessRoutes,
  ) 
    final List<RouteTransitionRecord> results = <RouteTransitionRecord>[];

    for (final RouteTransitionRecord pageRoute in newPageRouteHistory) 
      // Renames isEntering to isWaitingForEnteringDecision.
      if (pageRoute.isWaitingForEnteringDecision) 
        pageRoute.markForAdd();
      
      results.add(pageRoute);

    
    for (final RouteTransitionRecord exitingPageRoute in locationToExitingPageRoute.values) 
      // Checks the isWaitingForExitingDecision before calling the markFor methods.
      if (exitingPageRoute.isWaitingForExitingDecision) 
        exitingPageRoute.markForRemove();
        final List<RouteTransitionRecord> pagelessRoutes = pageRouteToPagelessRoutes[exitingPageRoute];
        if (pagelessRoutes != null) 
          for (final RouteTransitionRecord pagelessRoute in pagelessRoutes) 
            pagelessRoute.markForRemove();
          
        
      
      results.add(exitingPageRoute);

    
    return results;
   
 

【参考方案3】：

用这个替换你的MyApp。

class MyApp extends StatelessWidget 
  final routes = <String, WidgetBuilder>SecondRoute.tag: (context) => SecondRoute();

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: "Flutter Routes",
      home: new FirstRoute(),
      onGenerateRoute: (routeSettings) 
        if (routeSettings.name == SecondRoute.tag)
          return PageRouteBuilder(
            pageBuilder: (_, a1, a2) => FadeTransition(opacity: a1 ,child: SecondRoute()),
            transitionDuration: Duration(seconds: 5),
          );

        return null;
      ,
    );
  

【参考方案4】：

动画由MaterialPageRoute执行。如果您不想要它，只需使用其他东西：

Navigator.push(
  context,
  PageRouteBuilder(pageBuilder: (_, __, ___) => MyRoute()),
)

【讨论】：

另外，我发现 Navigator.of(context).pushNamed(SecondRoute.tag);也做同样的动画，我们怎么能避免呢？

@jitsm555 这也是在内部使用MaterialPageRoute 完成的。

@CopsOnRoad：我们如何从那里删除动画？

@jitsm555 你可以在MaterialApp onGenerateRoute 做到这一点。

@jitsm555 看看我的回答。