flutter中可以携带参数的命名路由

创建一个可以携带参数的flutter命名路由

MaterialApp提供了一个属性onGenerateRoute,需要一个返回Route<dynamic>,并接受RouteSettings参数的函数

首先创建一个Router类，并且创建一个静态函数,settings包括路由的名称和参数

class Router {
    static Route<dynamic> generateRoute(RouteSettings settings) {
        switch(settings.name) {
            case '/': return MaterialPageRoute(
                builder: (_) => Home()
            ),
            case '/feed': return MaterialPageRoute(
                builder: (_) => Feed()
            ),
            default: return MaterialPageRoute(
                builder: (_) => Scaffold(
                    body: Center(
                        child: Text('没有路由')
                    )
                )
            )
        }
    }
}

为了避免我们的代码出现错误，我们将采用硬编码的方式定义路由名称，并放到全局可以访问的constant.dart文件中

const String homeRoute = '/';
const String feedRoute = '/feed';

switch case语句之后更改为

case homeRoute: return MaterialPageRoute(
    builder: (_) => Home()
),
case feedRoute: return MaterialPageRoute(
    builder: (_) => Feed()
),

之后，在定义MaterialApp应用程序时，generateRoute函数传递给onGenerateRoute,通过initialRoute配置起始视图

class MyApp extends StatelessWidget {
    @override
    Widget build (BuildContext context) {
        return MaterialApp (
            onGenerateRoute: Router.generateRoute,
            initialRoute: homeRoute
        )
    }
}

这时，当你需要导航时，只需要使用

Navigator.pushNamed(context, feedRoute);

如果需要传递参数

Navigator.pushNamed(context, feedRoute, arguments: '传递的参数');
case feedRoute: 
    var data = settins.arguments as String;
    return MaterialPageRoute(
        builder: (_) => Feed(data)
    ),