Flutter命名路由跳转页面及传值

这篇文章说一下命名路由跳转页面和传值的方式，目录结构就不贴了，在上一篇文章里就有，直接上代码

首先实现以下在分类页面点击按钮跳转到分类详情页面

这里需要注意，配置命名路由需要在main.dart，入口文件里配置，或者单独配置成一个文件然后在main.dart里调用也可以

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

import 'pages/mine.dart';
import 'pages/type.dart';
import 'pages/Tabs.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeContent(),
      //这里配置路由名称，后面需要跳转页面的地方跟这个地方的名称对应上就行
      routes: {
        "/form" : (context) => TypePage(),
      },
    );
  }
}

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

class CategoryPage extends StatefulWidget {
  CategoryPage({Key key}) : super(key: key);
  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text("分类"),
      ) ,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
              child: Text("跳转到分类页面"),
              onPressed: () {
                //普通路由跳转并传值
                Navigator.pushNamed(context, "/form");  //此处实现了跳转到Type.dart页面
              },
              color: Theme.of(context).accentColor,
              textTheme: ButtonTextTheme.primary
          ),
          SizedBox(height: 20),
        ],
      )
    );
  }
}

下面实现命名路由跳转页面并传值，在Myself页面点击按钮跳转到Mine页面，并传递一个参数

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

import 'pages/mine.dart';
import 'pages/type.dart';
import 'pages/Tabs.dart';

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

class MyApp extends StatelessWidget {
  //统一配置路由，并传递可选参数arguments
  final routes = {
    "/mine" : (context, {arguments}) => MinePage(arguments : arguments)
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeContent(),
      onGenerateRoute: (RouteSettings settings) {
        final String name = settings.name;   //路由的名称
        print(name);   //打印之后就是——/mine
        final Function pageContentBuilder = this.routes[name];   //名称对应的页面
        print(pageContentBuilder);   //打印后就是——MinePage
        //此处是固定写法，判断pageContentBuilder和settings是否为空
        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;
          }
        }
      },
    );
  }
}

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

class MyselfPage extends StatefulWidget {
  MyselfPage({Key key}) : super(key: key);
  _MyselfPageState createState() => _MyselfPageState();
}

class _MyselfPageState extends State<MyselfPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text("个人中心"),
      ) ,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
              child: Text("个人中心页面"),
              onPressed: () {
                //普通路由跳转并传值，此处arguments里就是定义要传的值
                Navigator.pushNamed(context, "/mine", arguments: {
                  "id" : 123
                });
              },
              color: Theme.of(context).accentColor,
              textTheme: ButtonTextTheme.primary
          ),
          SizedBox(height: 20),
        ],
      ),
    );
  }
}

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

class MinePage extends StatelessWidget {
  //这里定义arguments常量来接收上一个页面的传值
  final arguments;
  MinePage({this.arguments});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text("个人中心新页面"),
      ) ,
      //如果上一个页面定义了arguments值，那么跳转后的页面显示的就是传递的id的值，否则显示0
      body: Text("${arguments != null ? arguments["id"] : '0'}"),
    );
  }
}

对于写项目的话，感觉还是对路由统一管理比较好，这样每创建一个页面需要跳转的话只需要在路由里多配置一条就好了，下面来实现一下，新建一个文件Routes.dart用来配置所有的路由和，刚进程序时加载的路由，目录结构

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

import 'routes/Routes.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: "/",   //初始化时加载的路由
      onGenerateRoute: onGenerateRoute
    );
  }
}

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

import '../pages/Mine.dart';
import '../pages/Search.dart';
import '../pages/Settings.dart';
import '../pages/Tabs.dart';
import '../pages/type.dart';

final routes = {
  "/" :(context) => HomeContent(),   //初始化时加载的路由
  "/mine" : (context, {arguments}) => MinePage(arguments : arguments),
  "/search" : (context) => SearchPage(),
  "/setting" : (context) => SettingsPage(),
  "/type" : (context) => TypePage(),
};

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;
    }
  }
};