命名路线的动画

Question

在 Flutter 中，我们可以通过扩展 PageRoute（或使用扩展它的类）来自定义视图更改动画。

例如，我通过使用CupertinoPageRoute 将MaterialApplication 中的动画更改为“幻灯片”：

Navigator.of(context).pushReplacement(
  CupertinoPageRoute(builder: (context) => Calendar()),
);

现在我想通过使用main.dart 文件中定义的命名视图来改变它：

return MaterialApp(
  title: 'Demo',
  theme: myTheme, // => Theme.of(context).copyWith(...)
  initialRoute: '/',
  routes: {
    '/': (context) => Login(),
    '/calendar': (context) => Calendar(),
  }
);

这样我就可以打电话了

Navigator.of(context).pushReplacementNamed('/calendar');

IMO 更清晰且与视图无关。

这种方法的问题是我无法定义PageRoute，因此我无法自定义视图更改动画。

有没有办法做到这一点？

Answer 1

我接受了 chemamolins 的建议并以类似的方式解决了它，但使用了地图。

我“提取”了routes 对象并将其放在MaterialApp 之外：

var routes = {
  '/': (context) => Login(),
  '/calendar': (context) => Calendar()
};

然后我在onGenerateRoute里面使用了：

Widget build(BuildContext context) {
  var routes = {
    '/': (context) => Login(),
    '/calendar': (context) => Calendar()
  };

  return MaterialApp(
    title: 'Demo',
    theme: myTheme,
    initialRoute: '/',
    onGenerateRoute: (settings) {
      return CupertinoPageRoute(builder: (context) => routes[settings.name](context));
    }
  );
}

Answer 2

您可以利用onGenerateRoute()

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  Route onGenerateRoute(RouteSettings settings) {
    Route page;
    switch (settings.name) {
      case "/":
        page = CupertinoPageRoute(builder: (context) => Login());
        break;
      case "/calendar":
        page = CupertinoPageRoute(builder: (context) => Calendar());
        break;
    }
    return page;
  }

  @override
  Widget build(BuildContext context) {
    return new WidgetsApp(
      onGenerateRoute: onGenerateRoute,
      initialRoute: "/",
    );
  }
}

让我们看一下 Flutter 代码本身。

有一个框架提供的onGenerateRoute()方法被调用来生成路由。

看下面从框架中的app.dart文件中提取的sn-p。

  Route<dynamic> _onGenerateRoute(RouteSettings settings) {
    final String name = settings.name;
    WidgetBuilder builder;
    if (name == Navigator.defaultRouteName && widget.home != null) {
      builder = (BuildContext context) => widget.home;
    } else {
      builder = widget.routes[name];
    }
    if (builder != null) {
      return new MaterialPageRoute<dynamic>(
        builder: builder,
        settings: settings,
      );
    }
    if (widget.onGenerateRoute != null)
      return widget.onGenerateRoute(settings);
    return null;
  }

如果routes: 为给定名称提供构建器，则默认使用MaterialPageRoute 生成路由。如果没有提供，它会使用您的onGenerateRoute() 方法生成它。