【问题标题】: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!'),
        ),
      ),
    );
  }
}

【问题讨论】:

    标签: flutter flutter-animation flutter-navigation


    【解决方案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 看看我的回答。
        猜你喜欢
        • 1970-01-01
        • 2019-10-03
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-09-25
        • 2021-12-12
        相关资源
        最近更新 更多