Flutter

关于flutter命名路由传递参数的问题

路由跳转是常见的功能了，当我们在flutter中想要统一管理我们的路由这个时候就需要使用命名路由了，当然如果不需要管理路由基本路由也能满足日常需求。言归正传：
在lib目录下创建一个routes文件夹，在创建一个routes.dart文件（非必须，也可以在main.dart中写）

1. 首先把需要跳转的页面引入
   如下：

import 'package:flutter/material.dart';
import '../searchDetail.dart';
import '../detail.dart';

下一步定义一个常量 给页面命名：

final routes = {
  // 未传递参数
  '/detail': (context) => DetailPage(),
  // 传递参数
  '/searchDetail': (context, {arguments}) =>
      SearchDetailPage(arguments: arguments)
};

这里是命名路由的固定写法：

// 路由传参的固定写法
var onGenerateRoute = (RouteSettings settings) {
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  // 判断是否传递参数
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route =
          MaterialPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  }
};

在main.dart引入此文件，在MaterialApp组件输入：onGenerateRoute: onGenerateRoute，代码如下：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //home: Tabs(),
      onGenerateRoute: onGenerateRoute
    );
  }
}

跳转之前的页面：

RaisedButton(
            child: Text('跳转到搜索详情'),
            onPressed: (){
              Navigator.pushNamed(context, '/searchDetail',arguments: {
                'id':1222
              });
            },
          )

跳转的页面：

class SearchDetailPage extends StatelessWidget {
  final arguments;
  SearchDetailPage({this.arguments});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('搜索详情'),
      ),
      body: Text('搜索详情页面${arguments != null ? arguments["id"] : "0"}'),
    );
  }
}

这样命名路由传递参数的问题就解决了。 效果图如下：