Flutter命名路由及命名路由传值

上一篇博客我们学习了普通路由和普通路由传值，今天我们学习命名路由和命名路由传值，它更加的适用于中大型项目。能够达到统一管理路由的效果。

我们实现的效果是从首页跳转到商品页面，再跳转到商品详情页面，然后返回上一级页面。

以下是涉及到的所有页面的代码，复制即可运行，涉及到的文件路径参考自己的路径修改i：
main.dart

import 'package:flutter/material.dart';
import 'pages/Form.dart';
import 'pages/Search.dart';
import 'routes/Routes.dart';

void main() => runApp(MyApp());//入口函数

class MyApp extends StatelessWidget {

  final routes = {
    '/form': (context) => Formpage(),
    '/search': (context) => Searchpage()
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //home: Tabs(),
      initialRoute:'/',//初始化加载的路由
      onGenerateRoute: onGenerateRoute//把routes里面的代码给到这里执行
    );
  }
}

Routes.dart路由配置文件。
这是一个很重要的配置文件，记住就好。

import 'package:flutter/material.dart';
import '../pages/Form.dart';
import '../pages/Search.dart';
import '../pages/Tabs.dart';
import '../pages/Product.dart';
import '../pages/Productinfo.dart';


//配置路由，以后所有的跳转的页面都可以再这里完成
final routes = {
  '/':(context)=>Tabs(),//配置根目录
  '/form': (context) => Formpage(),
  'search': (context,{arguments}) => Searchpage(arguments:arguments),
  '/productinfo':(context,{arguments})=>Productinfopage(arguments:arguments),
  'product':(context)=>Productpage()
};

//固定写法，理解不了就记住。
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;
    }
  }
};

Tabs.dart页面的代码跟上一篇普通路由的代码一样。
管理首页导航的页面

home.dart首页

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

class Homepage extends StatefulWidget {
  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
            child: Text("跳转到商品页面"),
            onPressed: () {
              Navigator.pushNamed(context, 'product');
            })
      ],
    );
  }
}

Product.dart商品页面

import 'package:flutter/material.dart';

class Productpage extends StatefulWidget {
  @override
  _ProductpageState createState() => _ProductpageState();
}

class _ProductpageState extends State<Productpage> {
  @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, '/productinfo', arguments: {"pid":"master最帅"});
                })
          ],
        )
      );
  }
}

Productinfo.dart商品详情页面

import 'package:flutter/material.dart';

class Productinfopage extends StatefulWidget {
  var arguments;
  Productinfopage({Key key, this.arguments}) : super(key: key);

  @override
  _ProductinfopageState createState() =>
      _ProductinfopageState(arguments: this.arguments);
}

class _ProductinfopageState extends State<Productinfopage> {
  Map arguments;
  _ProductinfopageState({this.arguments}); //构造函数

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("详情页面"),),
      body: Container(
        child: Text("pid=${arguments["pid"]}"),
      ),
    );
  }
}

实现难点是把各个组件的代码抽离出来，以及路由配置。慢慢理解。

附上效果图：



现在我们实现的是一级一级返回上一页，给大家一个问题，怎么返回到根目录？？
欢迎留言，交流学习~