11. Flutter——Navigator 路由(页面跳转)

1. Flutter 中的路由

• 在 Flutter 中通过 Navigator 组件管理路由导航。 并提供了管理堆栈的方法。如：Navigator.push 和 Navigator.pop
• Flutter 中给我们提供了两种配置路由跳转的方式：1、基本路由 2、命名路由

---

2. Flutter 中的基本路由使用

• 比如我们现在想从 HomePage 组件跳转到 SearchPage 组件。
• 1、需要在 HomePage 中引入 SearchPage.dart：

import'../SearchPage.dart';

• 2、在 HomePage 中通过下面方法跳转：

RaisedButton(
	child:Text("跳转页面"), 
	onPressed:(){ 
		Navigator.of(context).push( 
			MaterialPageRoute( 
				builder:(BuildContextcontext){ 
					returnSearchPage(); 
				} 
			) 
		);
	}, 
	color:Theme.of(context).accentColor, 
	textTheme:ButtonTextTheme.primary
)

---

3. Flutter 中的基本路由跳转传值

• 比如我们现在想从 HomePage 组件跳转到 SearchPage 组件传值。
• 1、需要在 HomePage 中引入 SearchPage.dart：

import'../SearchPage.dart';

• 2、在 HomePage 中通过下面方法跳转：

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

---

4. Flutter 中的命名路由

• 1、配置路由：

import'package:flutter/material.dart';
import'pages/Tabs.dart';
import'pages/Search.dart'; 
import'pages/Form.dart';
voidmain()=>runApp(MyApp()); 
classMyAppextendsStatelessWidget{ 
	@override 
	Widgetbuild(BuildContextcontext){ 
		returnMaterialApp( 
		//home:Tabs(), 
		initialRoute:'/', 
		routes:{ 
			'/':(contxt)=>Tabs(), 
			'/search':(contxt)=>SearchPage(), 
			'/form':(context)=>FormPage(), 
			}, 
		); 
	} 
}

• 2、路由跳转：

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

---

5. Flutter 中的命名路由跳转传值

• 1、配置路由：

import'package:flutter/material.dart'; 
import'pages/Tabs.dart'; 
import'pages/Search.dart'; 
import'pages/Form.dart';
voidmain()=>runApp(MyApp());
classMyAppextendsStatelessWidget{ 
	finalroutes={ 
		'/':(contxt)=>Tabs(), 
		'/search':(contxt)=>SearchPage(), 
		'/form':(context,{arguments})=>FormPage(arguments:arguments), 
	};
	@override 
	Widgetbuild(BuildContextcontext){ 
		returnMaterialApp( 
			home:Tabs(), 
			onGenerateRoute:(RouteSettingssettings){ 
				finalStringname=settings.name;
				finalFunctionpageContentBuilder=this.routes[name];
				if(pageContentBuilder!=null){ 
					if(settings.arguments!=null){
						finalRouteroute=MaterialPageRoute( 
							builder:(context)=>pageContentBuilder(context,
								arguments:settings.arguments)); 
							returnroute;
					 }else{ 
					 	finalRouteroute=MaterialPageRoute( 
					 		builder:(context)=>pageContentBuilder(context));
					 		returnroute; 
					 } 
				} 
			}); 
	} 
}

• 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';
classFormPageextendsStatelessWidget{ 
	finalMaparguments; 
	FormPage({this.arguments});
	@override 
	Widgetbuild(BuildContextcontext){ 
		returnScaffold( 
			appBar:AppBar( 
				title:Text("搜索"), 
			), 
		body:Text("我是一个表单页面 ${arguments!=null?arguments['id']:'0'}")
		);
	}
}

---

6. Flutter 中的命名路单独抽离到一 个文件

import'package:flutter/material.dart'; 
import'../pages/Tabs.dart'; 
import'../pages/Search.dart'; 
import'../pages/Form.dart';
finalMap<String,Function>routes={ 
	'/':(contxt,{arguments})=>Tabs(), 
	'/search':(contxt,{arguments})=>SearchPage(arguments:arguments),
	'/form':(context,{arguments})=>FormPage(arguments:arguments), 
};
varonGenerateRoute=(RouteSettingssettings){ 
	// 统一处理 
	finalStringname=settings.name;
	finalFunctionpageContentBuilder=routes[name];
	if(pageContentBuilder!=null){ 
		finalRouteroute=MaterialPageRoute( 
			builder:(context)=>
				pageContentBuilder(context,arguments:settings.arguments));
			returnroute; 
		}
};

import'package:flutter/material.dart'; 
import'routes/Routes.dart'; 
voidmain()=>runApp(MyApp());

classMyAppextendsStatelessWidget{ 
	@override
	Widgetbuild(BuildContextcontext){ 
		returnMaterialApp( 
			initialRoute:'/', 
			onGenerateRoute:onGenerateRoute 
		); 
	} 
}