Question

我有一个登录页面，当我登录进入我正在使用的应用程序的主页面时 Navigator.pushReplacement(context, new MaterialPageRoute(builder: (BuildContext context) => new Page1())); 但它有幻灯片动画，我想禁用它。

这是我的材料应用格式

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Login(title: 'Login'),
      routes: <String, WidgetBuilder>{
        '/screen3': (BuildContext context) => new Page1(),
      },
    );
  }
}

Answer 1

请确保还设置了$ ./parent parent recived: "Child process: Test data to 12345" parent recived: "Child process: Test data to 12346" parent recived: "Child process: Test data to 12347" parent recived: "Child process: Test data to 12348" parent recived: "Child process: Test data to 12349"，否则您可能会在没有动画的情况下推送新路线，但是当您按下“后退”按钮时，会看到一些延迟。

transitionDuration

Answer 2

您可以覆盖 MaterialPageRoute 以将 transitionDuration 设置为零

class CustomPageRoute extends MaterialPageRoute {
  CustomPageRoute({builder}) : super(builder: builder);

  @override
  Duration get transitionDuration => const Duration(milliseconds: 0);
}

...

Navigator.of(context).push(
  CustomPageRoute(
    builder: (BuildContext context) {
      return DashboardView();
    },
  ),
);

Answer 3

您应尝试扩展MaterialPageRoute并重写buildTransitions，如下所示：

class ExPageRoute<T> extends MaterialPageRoute<T> {

 @override
 Widget buildTransitions(BuildContext context, Animation<double> animation,
    Animation<double> secondaryAnimation, Widget child) {
    return child;
 }
}

Answer 4

您需要覆盖buildTransitions方法以防止动画。

import 'package:flutter/material.dart';

class NoAnimationMaterialPageRoute<T> extends MaterialPageRoute<T> {
  NoAnimationMaterialPageRoute({
    @required WidgetBuilder builder,
    RouteSettings settings,
    bool maintainState = true,
    bool fullscreenDialog = false,
  }) : super(
            builder: builder,
            maintainState: maintainState,
            settings: settings,
            fullscreenDialog: fullscreenDialog);

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return child;
  }
}

Answer 5

您可以使用Int。

PageRouteBuilder

Answer 6

如果您愿意使用 the get package，您可以使用 GetMaterialApp 属性禁用过渡动画。

GetMaterialApp(
  defaultTransition: Transition.noTransition, //this would be the solution
  transitionDuration: transitionDuration: Duration(seconds: 0),
);

然后只需添加其他所需的属性。

Answer 7

我的解决方案是使用isInitialRoute:true定义路由。这样可以防止Flutter在按下路线时显示动画。

这是一个可行的示例和屏幕录像：

import 'package:flutter/cupertino.dart'
    show
        CupertinoApp,
        CupertinoButton,
        CupertinoPageRoute,
        CupertinoPageScaffold;
import 'package:flutter/widgets.dart'
    show
        BuildContext,
        Center,
        Column,
        Navigator,
        Route,
        RouteSettings,
        SafeArea,
        Spacer,
        Text,
        runApp,
        Widget;

Widget makeButton(BuildContext context, String routeName) =>
    new CupertinoButton(
      onPressed: () => Navigator.pushReplacementNamed(context, routeName),
      child: Text('Go to \'$routeName\''),
    );

Route generateRoute(RouteSettings settings) {
  switch (settings.name) {
    case 'not-animated':
      return new CupertinoPageRoute(
        settings: RouteSettings(name: settings.name, isInitialRoute: true),
        builder: (context) => CupertinoPageScaffold(
              child: SafeArea(
                child: Center(
                  child: Column(
                    children: [
                      Spacer(),
                      Text('This is \'not-animated\''),
                      makeButton(context, 'animated'),
                      Spacer(),
                    ],
                  ),
                ),
              ),
            ),
      );
    default:
      return null;
  }
}

void main() {
  runApp(
    CupertinoApp(
      onGenerateRoute: generateRoute,
      initialRoute: 'animated',
      routes: {
        'animated': (context) => CupertinoPageScaffold(
              child: SafeArea(
                child: Center(
                  child: Column(
                    children: [
                      Spacer(),
                      Text('This is \'animated\''),
                      makeButton(context, 'not-animated'),
                      Spacer(),
                    ],
                  ),
                ),
              ),
            ),
      },
    ),
  );
}

Answer 8

对于 Navigator 2.0，有两种方式：

使用新的 pages 列表重建导航器，该列表替换了最后一个项目。如果之前的 Page 和替换 Page 都没有 key 或者 key 相同，那么 Flutter 会将它们视为同一个页面，不会进行动画处理。
将 Navigator.transitionDelegate 设置为扩展 TransitionDelegate 的对象。委托必须使用 RouteTransitionRecord.isWaitingForEnteringDecision true 检查新记录并调用其 markForAdd() 方法。 https://github.com/flutter/flutter/issues/69315#issuecomment-833212172 中有一些有用的代码。

如何在没有动画的情况下导航到其他页面

8 个答案: