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

Question

我正在寻找更新默认页面过渡以删除默认发生的从左到右的页面过渡，而是零过渡。我看到支持文档允许创建 PageRouteBuilder 并将持续时间设置为零秒，但我不确定如何为命名路由执行此操作。

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

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

如何更改默认设置，使所有页面过渡都为零过渡？

Answer 1

MaterialApp 小部件有一个 pageTransitionsTheme 字段，您可以在其中将特定 PageTransitionBuilder 映射到特定平台。您可以阅读有关 PageTransitionsTheme 的更多信息 here

Answer 2

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

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

但是 TargetPlatform 不适用于 web，事实上它获取的不是目标平台，而是 OS 应用运行上。

作为解决此问题的方法，您可以使用来自 flutter foundation 包的 kIsWeb 布尔值，另一件事是您需要一个没有动画的自定义 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
              },
        ),

Answer 3

寻找 1.duration 在动画中并将其设置为零，或者 2.put 动画为 Animation.none 这可能对你有帮助。

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

Flutter Web - remove default page transition on named routes

dart

flutter

flutter-web