Flutter 15 - Navigator （路由）组件详解1

一、Flutter 中的路由

Flutter 中的路由通俗的讲就是页面跳转。

在 Flutter 中通过 Navigator 组件管理路由导航，并提供了管理堆栈的方法。

如：Navigator.push 和 Navigator.pop

二、基本路由

需求：HomePage 组件跳转到 SearchPage 组件

1. 在 HomPage 中引入 SearchPage.dart

import '../SearchPage.dart';

2. 在 HomePage 中通过下面方法跳转

 RaisedButton(
     child: Text("跳转到搜索页面"),
     onPressed: () {
         // 路由跳转
         Navigator.of(context).push(
             MaterialPageRoute(
                 builder: (context) => SearchPage()
                 )
             );
         },
     color: Theme.of(context).accentColor,
     textTheme: ButtonTextTheme.primary
     )

三、基本路由跳转传值

需求：从 HomePage 组件跳转到 SearchPage 组件传值

1. 在 HomPage 中引入 SearchPage.dart

import '../SearchPage.dart';

2. 在 HomePage 中通过下面方法跳转和传值

 RaisedButton(
     child: Text("跳转到搜索页面"),
     onPressed: () 
     Navigator.of(context).push(
         MaterialPageRoute(
                    builder: (BuildContext context) {
                        SearchPage(title: "表单") // 传值
                    } 
                )
              );
            },
            color: Theme.of(context).accentColor,
            textTheme: ButtonTextTheme.primary
        )

四、命名路由

1. 配置路由

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

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

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp( 
            // home:Tabs(),
            initialRoute: '/',
            routes: {
                '/': (context) => Tabs(), 
                '/search': (context) => SearchPage(), 
                '/form': (context) => FormPage()
            }
        );
    }
}

2. 路由跳转

RaisedButton(
    child: Text("跳转到搜索页面"),
    onPressed: (){ 
        Navigator.pushNamed(context, '/search');
    },
    color: Theme.of(context).accentColor,
    textTheme: ButtonTextTheme.primary
)

五、命名路由跳转传值

官方文档：https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments

1、配置路由

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

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

class MyApp extends StatelessWidget { 
    final routes = {
        '/': (context) => Tabs(),
        '/search': (context) => SearchPage(),
        '/form': (context, {arguments}) => FormPage(arguments: arguments),
    };
    
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Tabs(),
            onGenerateRoute: (RouteSettings settings) {
                // 统一处理
                final String name = settings.name;
                final Function pageContentBuilder = this.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;
                    }
                }
              }); 
    }
}

2. 跳转传值

RaisedButton(
    child: Text("跳转到表单演示页面"),
    onPressed: () {
        Navigator.pushNamed(context, '/form', arguments: {
            "id":20
        });
    },
    color: Theme.of(context).accentColor, 
    textTheme: ButtonTextTheme.primary
    )

3. 接收参数

import 'package:flutter/material.dart'
    
class FormPage extends StatelessWidget { 
    final Map arguments; 
    FormPage({ this.arguments });
    
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text("搜索")
                ),
            body:Text("我是一个表单页面 ${ arguments != null ? arguments['id'] : '0' }")
        );
    }
}

六、命名路单独抽离到一个文件

// Routes.dart

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

final Map<String, Function> routes = { 
    '/':(contxt, {arguments}) => Tabs(),
    '/search':(contxt, {arguments}) => SearchPage(arguments: arguments),
    '/form': (context,{arguments}) => FormPage(arguments: arguments)
};


var onGenerateRoute = (RouteSettings settings) { // 统一处理
    final String name = settings.name;
    final Function pageContentBuilder = routes[name];

    if (pageContentBuilder != null) {
        final Route route = MaterialPageRoute(
            builder: (context) => pageContentBuilder(context,
                                                     arguments: settings.arguments));
        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(
            // home: Tabs(),
            initialRoute: '/',
            onGenerateRoute: onGenerateRoute
        );
    }
}