Flutter的命名路由

不传递参数的命名路由：

import 'package:flutter/material.dart';
// 创建页面
import './tabs/tabs.dart';
import './pages/home.dart';
import './pages/search.dart';
import './pages/detail.dart';
import './pages/me.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Retrieve Text Input',
            home: MyBottomNavigationBar(),
            // 定义路由
            routes: {
                '/home': (context) => HomePage(),
                '/search': (context) => SearchPage(),
                '/detail': (context) => DetailPage(),
                '/me': (context) => MePage(),
            },
        );
    }
}
// 例子： home.dart 页面
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
    @override
    _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
    @override
    Widget build(BuildContext context) {
        return Center(
            child: ElevatedButton(
                child: Text('跳转到详情页面'),
                onPressed: () {
                    // 由于我们在全局定义了路由， 所以这里可以直接使用， 而不需要想普通路由那样，引入需要跳转的页面
                    Navigator.pushNamed(context, '/detail');
                },
            ),
        );
    }
}

传递参数的命名路由：

import 'package:flutter/material.dart';
import './tabs/tabs.dart';
import './pages/home.dart';
import './pages/search.dart';
import './pages/detail.dart';
import './pages/me.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
    final Map routes = {
        '/home': (context) => HomePage(),
        '/search': (context) => SearchPage(),
        '/detail': (context, { arguments }) => DetailPage(arguments: arguments),
        '/me': (context, { arguments }) => MePage(arguments: arguments),
    };
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Retrieve Text Input',
            home: MyBottomNavigationBar(),
            // 固定写法， 可以在任意的命名路由中传递参数
            onGenerateRoute: (RouteSettings settings) {
                // 获取路由名称
                final String name = settings.name;
                // 获取路由
                final Function pageContentBuilder = this.routes[name];
                if(pageContentBuilder != null) {
                    // 判读是否有 参数 ， 注意， 这个参数命名 arguments ， 你可以另取名称
                    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;
                    }
                }
            },
        );
    }
}
// home.dart 传递参数
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
    @override
    _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
    @override
    Widget build(BuildContext context) {
        return Center(
            child: ElevatedButton(
                child: Text('跳转到详情页面'),
                onPressed: () {
                    // 传递参数， 注意 因为你的参数命名为 arguments ， 所以这里要统一，并携带你需要的参数
                    Navigator.pushNamed(context, '/detail',  arguments: { "id": 123 });
                },
            ),
        );
    }
}
//detail.dart 接受参数
import 'package:flutter/material.dart';
class DetailPage extends StatelessWidget {
    // 构造函数内接受参数
    DetailPage({this.arguments});
    final arguments;
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('详情页面'),
            ),
            body: Center(
                // 读取获取到的 id
                child: Text("详情页面${arguments['id']}"),
            ),
        );
    }
}

router 封装:

// 把所有的路由统一一个文件管理起来
import 'package:flutter/material.dart';
import '../pages/Tabs.dart';
import '../pages/home.dart';
import '../pages/search.dart';
import '../pages/detail.dart';
import '../pages/me.dart';
final routes = {
    '/': (context) => MyBottomNavigationBar(),
    '/home': (context) => HomePage(),
    '/search': (context) => SearchPage(),
    '/detail': (context, {arguments}) => DetailPage(arguments: arguments),
    '/me': (context, {arguments}) => MePage(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 中引用这个文件
import 'package:flutter/material.dart';
import 'routes/routes.dart'; // 引入刚刚封装好的路由文件
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Retrieve Text Input',
            // home: MyBottomNavigationBar(), 初始化的时候默认加载后 这个方式可以注释掉了
            initialRoute: '/',     // 初始化的时候加载的路由
            onGenerateRoute: onGenerateRoute, // 使用这个命名路由传参的方法
        );
    }
}