一地淀、Flutter 中的路由

Flutter 中的路由通俗的講就是頁面跳轉(zhuǎn)失球。

在 Flutter 中通過 Navigator 組件管理路由導(dǎo)航，并提供了管理堆棧的方法帮毁。

如：Navigator.push 和 Navigator.pop

二实苞、基本路由

需求：HomePage 組件跳轉(zhuǎn)到 SearchPage 組件

1. 在 HomPage 中引入 SearchPage.dart

import '../SearchPage.dart';

2. 在 HomePage 中通過下面方法跳轉(zhuǎn)

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

三璧微、基本路由跳轉(zhuǎn)傳值

需求：從 HomePage 組件跳轉(zhuǎn)到 SearchPage 組件傳值

1. 在 HomPage 中引入 SearchPage.dart

import '../SearchPage.dart';

2. 在 HomePage 中通過下面方法跳轉(zhuǎn)和傳值

 RaisedButton(
     child: Text("跳轉(zhuǎn)到搜索頁面"),
     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. 路由跳轉(zhuǎn)

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

五硬梁、命名路由跳轉(zhuǎn)傳值

官方文檔：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) {
                // 統(tǒng)一處理
                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. 跳轉(zhuǎn)傳值

RaisedButton(
    child: Text("跳轉(zhuǎn)到表單演示頁面"),
    onPressed: () {
        Navigator.pushNamed(context, '/form', arguments: {
            "id":20
        });
    },
    color: Theme.of(context).accentColor, 
    textTheme: ButtonTextTheme.primary
    )

3. 接收參數(shù)

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) { // 統(tǒng)一處理
    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
        );
    }
}