Flutter中提供了兩種配置路由跳轉(zhuǎn)的方式：1诺擅、基本路由；2谴分、命名路由

一锈麸、基本路由

1.引入將要跳轉(zhuǎn)的頁面

import 'package:flutter_learn/search.dart';

2.點(diǎn)擊按鈕跳轉(zhuǎn)

Navigator.of(context)
  .push(MaterialPageRoute(builder: (context) => SearchPage()));

3.如果需要傳值，在SearchPage里面新寫構(gòu)造方法牺蹄，在跳轉(zhuǎn)時(shí)進(jìn)行傳值

//search頁面
import 'package:flutter/material.dart';
class SearchPage extends StatelessWidget {
  String title;
  SearchPage({this.title = "搜索"});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Container(
        child: Text("搜索頁面內(nèi)容區(qū)域"),
      ),
    );
  }
}
//跳轉(zhuǎn)方法
Navigator.of(context).push(MaterialPageRoute(
   builder: (context) => SearchPage(title: "搜索頁面",))
);

4.返回上一級頁面

//返回上一級
Navigator.of(context).pop();

二忘伞、命名路由

為了在項(xiàng)目中可以統(tǒng)一管理跳轉(zhuǎn)，可以使用Flutter提供的命名路由
1.配置路由沙兰，命名路由需要定義在根組件里面

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xffFFFFFF),
      ),
      home: Tabs(),
      //配置命名路由
      routes: {
        '/search': (context)=>SearchPage()
      },
    );
  }
}

2.跳轉(zhuǎn)下一個(gè)頁面

//命名路由跳轉(zhuǎn)氓奈，/search必須與根組件中配置命名路由的名稱一致
Navigator.pushNamed(context, '/search');

三、命名路由的跳轉(zhuǎn)傳值

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final routes = {
    '/search': (context)=>SearchPage()
  };
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xffFFFFFF),
      ),
      home: Tabs(),
      //命名路由的跳轉(zhuǎn)傳值
      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;
          }
        } else {
          final Route route = MaterialPageRoute(
            builder: (context) => pageContentBuilder(context)
          );
          return route;
        }
      },
    );
  }
}
//跳轉(zhuǎn)頁面并傳值
Navigator.pushNamed(context, '/search', arguments: {"title" : "11111"});
//接收頁面接收傳遞參數(shù)
import 'package:flutter/material.dart';
class SearchPage extends StatelessWidget {
  final arguments;
  SearchPage({this.arguments});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.arguments != null ? this.arguments["title"] : "搜索111"),
      ),
      body: Container(
        child: Text("搜索頁面內(nèi)容區(qū)域"),
      ),
    );
  }
}

優(yōu)化

將onGenerateRoute抽離出一個(gè)單獨(dú)的路由配置文件鼎天，方便統(tǒng)一管理
1舀奶、新建routes.dart文件

import 'package:citylifeflutter/search.dart';
import 'package:flutter/material.dart';

final routes = {
  '/search': (context, {arguments})=>SearchPage(arguments: arguments)
};

dynamic 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;
    }
  } else {
    final Route route = MaterialPageRoute(
        builder: (context) => pageContentBuilder(context)
    );
    return route;
  }
};

2、修改main.dart文件斋射，引入routes

class MyApp extends StatelessWidget {
  final routes = {
    '/': (context)=>Tabs(),//tab欄切換
//不需要傳值
    '/shop': (context)=>ShopPage(),
//需要傳值
    '/search': (context, {arguments})=>SearchPage(arguments: arguments)
  };
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xffFFFFFF),
      ),
//      home: Tabs(),
      initialRoute: '/',//配置根路由
      //命名路由的跳轉(zhuǎn)傳值
      onGenerateRoute: onGenerateRoute
    );
  }
}

替換路由

Navigator.of(context).pushReplacementNamed('/routeName');

返回根路由

1育勺、替換路由實(shí)現(xiàn)
2、系統(tǒng)方法(pushAndRemoveUntil)罗岖，將route置為null

Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) {
  return Tabs(index:1);
 }), (route) {
  return route == null;
});