（一） Flutter中的路由
Flutter 中的路由通俗的讲就是页面跳转。在 Flutter 中通过 Navigator 组件管理路由导航。
并提供了管理堆栈的方法。如：Navigator.push（跳转页面） 和 Navigator.pop（弹出页面）
Flutter 中给我们提供了两种配置路由跳转的方式：
1、基本路由
2、命名路由
（二）Flutter 中的基本路由使用
比如我们现在想从 HomePage 组件跳转到 SearchPage 组件
1、需要在 HomPage 中引入 SearchPage.dart
import ‘…/SearchPage.dart’;
2、在 HomePage 中通过下面方法跳转
RaisedButton(
child: Text("跳转到搜索页面"), onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context){
return SearchPage();
}
)
);
},color: Theme.of(context).accentColor, textTheme: ButtonTextTheme.primary
)
（三）Flutter 中的基本路由跳转传值
比如我们现在想从 HomePage 组件跳转到 SearchPage 组件传值。
1、需要在 HomPage 中引入 SearchPage.dart
import ‘…/SearchPage.dart’;
2、在 HomePage 中通过下面方法跳转
RaisedButton(
child: Text("跳转到搜索页面"), onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context){
return 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: {
'/':(contxt)=>Tabs(),
'/search':(contxt) =>SearchPage(),
'/form': (context) => FormPage(), }, );
}
}
2、路由跳转
bash
RaisedButton(
child: Text("跳转到搜索页面"), onPressed: (){
Navigator.pushNamed(context, '/search');
},
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 {
final Map<String, Function> routes = {
'/': (contxt) => Tabs(),
'/search': (contxt) => 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;
}
}
});
}
}
下面些代码有点难搞懂，不用记，用的时候直接c过来就行了
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'}")
);
}
}
（六）命名路由单独抽离的方法
首先将要抽离的页面导入新建的Routs.dart；
然后将定义的路由抽离；
将传值方法抽离；
import 'package:flutter/material.dart';
import '../pages/Tabs.dart';
import '../pages/Form.dart';
import '../pages/Search.dart';
import '../pages/Product.dart';
import '../pages/ProductInfo.dart';
//配置路由,定义 Map 类型的 routes,Key 为 String 类型，Value 为 Function 类型
final Map<String, Function> routes = {
'/': (context) => Tabs(),
'/form': (context) => FormPage(),
'/product': (context) => ProductPage(),
'/productinfo': (context, {
arguments}) =>
ProductInfoPage(arguments: arguments),
'/search': (context, {
arguments}) => SearchPage(arguments: arguments),
};
//固定写法
var onGenerateRoute = (RouteSettings settings) {
//String? 表示 name 为可空类型
final String? name = settings.name;
//Function? 表示 pageContentBuilder 为可空类型
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;
}
}
};
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
);
}
}
（七）返回到上一级页面
Navigator.of(context).pop();
（八）替换路由
比如我们从用户中心页面跳转到了 registerFirst 页面，然后从 registerFirst 页面通过pushReplacementNamed 跳转到了 registerSecond 页面。这个时候当我们点击 registerSecond的返回按钮的时候它会直接返回到用户中心。
Navigator.of(context).pushReplacementNamed(‘/registerSecond’);
（九） 返回到根路由
比如我们从用户中心跳转到 registerFirst 页面，然后从 registerFirst 页面跳转到registerSecond页面，然后从 registerSecond 跳转到了 registerThird 页面。这个时候我们想的是 registerThird注册成功后返回到用户中心。 这个时候就用到了返回到根路由的方法。
Navigator.of(context).pushAndRemoveUntil(
new MaterialPageRoute(builder: (context) => new Tabs(index:1)), (route) => route == null
);