Flutter Web - 删除命名路由上的默认页面转换

Question

我希望更新默认页面转换，以删除默认情况下发生的从左到右的页面转换，取而代之的是零转换。我已经看到了支持文档，允许创建 PageRouteBuilder 并设置零秒的持续时间，但我不确定如何为命名路由执行此操作。

例如，我希望能够调用并进行零转换：

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

如何更改默认值以使所有页面转换都为零转换？

Answer 1

您可以在 root 中设置导航主题MaterialApp。您可以将导航动画传递到您所定位的每个平台，如下所示。

    MaterialApp(
      theme: ThemeData(
        pageTransitionsTheme: PageTransitionsTheme(
          builders: {
            TargetPlatform.android: ZoomPageTransitionsBuilder(),
            TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
          },
        ),
      ),
    );

但TargetPlatform不适用于网络，事实上它获取的不是目标平台，而是应用程序运行的操作系统。

作为解决此问题的方法，您可以使用kIsWebflutter 基础包中的 Boolean，另一件事是您需要一个PageTransitionsBuilder没有动画的自定义。

风俗PageTransitionsBuilder

class NoTransitionsBuilder extends PageTransitionsBuilder {
  const NoTransitionsBuilder();

  @override
  Widget buildTransitions<T>(
    PageRoute<T>? route,
    BuildContext? context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget? child,
  ) {
    // only return the child without warping it with animations
    return child!;
  }
}

最后pageTransitionsTheme

import 'package:flutter/foundation.dart' show kIsWeb;


        pageTransitionsTheme: PageTransitionsTheme(
          builders: kIsWeb
              ? {
                  // No animations for every OS if the app running on the web
                  for (final platform in TargetPlatform.values)
                    platform:const NoTransitionsBuilder(),
                }
              : const {
                // handel other platforms you are targeting
              },
        ),