Flutter Navigator 2.0 页面过渡

Question

我正在使用 Navigator 的声明性方法:

Navigator(
      pages: [
        MaterialPage(child: _screen),
      ],
      onPopPage: (route, result) {
        return route.didPop(result);
      },
);

如何在屏幕之间添加过渡？

Answer 1

您可以设置 pageTransitionsTheme在 theme您的应用程序的属性。
例如:

void main() {
  runApp(
    MaterialApp(
      routes: {
        '/': (_) => HomePage(),
        '/page2': (_) => Page2(),
      },
      theme: ThemeData(
        pageTransitionsTheme: PageTransitionsTheme(
          builders: {
            // Set your transitions here:
            TargetPlatform.android: CupertinoPageTransitionsBuilder(),
            TargetPlatform.iOS: FadeUpwardsPageTransitionsBuilder(),
            TargetPlatform.macOS: FadeUpwardsPageTransitionsBuilder(),
          },
        ),
      ),
    ),
  );
}

但正如你提到的，你正在使用 routemaster package(我个人从未使用过它)，您仍然可以通过执行以下操作来实现该行为:

MaterialApp.router(
  routerDelegate: RoutemasterDelegate(routesBuilder: (_) => routes),
  routeInformationParser: RoutemasterParser(),
  theme: ThemeData.dark().copyWith(
    pageTransitionsTheme: PageTransitionsTheme(
      builders: {
        // Set your transitions here:
        TargetPlatform.android: CupertinoPageTransitionsBuilder(),
        TargetPlatform.iOS: FadeUpwardsPageTransitionsBuilder(),
        TargetPlatform.macOS: FadeUpwardsPageTransitionsBuilder(),
      },
    ),
  ),
)

完整代码(使用 routemaster 包)

void main() => runApp(MyApp());

final routes = RouteMap(
  routes: {
    '/': (_) => MaterialPage(child: HomePage()),
    '/page2': (_) => MaterialPage(child: Page2()),
  },
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return
    MaterialApp.router(
      routerDelegate: RoutemasterDelegate(routesBuilder: (_) => routes),
      routeInformationParser: RoutemasterParser(),
      theme: ThemeData(
        pageTransitionsTheme: PageTransitionsTheme(
          builders: {
            // Set your transitions here:
            TargetPlatform.android: CupertinoPageTransitionsBuilder(),
            TargetPlatform.iOS: FadeUpwardsPageTransitionsBuilder(),
            TargetPlatform.macOS: FadeUpwardsPageTransitionsBuilder(),
          },
        ),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('HomePage')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Routemaster.of(context).push('/page2'),
          child: Text('Page2'),
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(appBar: AppBar(title: Text('Page2')));
}