本文地址：/qq_40785165/article/details/116900126,转载需附上此地址
大家好，我是小黑，一个还没秃头的程序员~~~
你多学一样本事，就少说一句求人的话！
说实话，学的时候真痛苦，与原生Android还是有区别的，但是毕竟是一种趋势，学到就是赚到，今天分享的是Flutter中的路由，开发中可以利用这个进行页面跳转。效果如图：
源码地址：/fjjxxy/flutter-study.git
（一）先介绍基本的路由，没有对路由进行管理，直接引入页面组件，使用push/pop进行跳转/返回,对应demo中的首页跳转到第二个页面，RaisedButton是按钮，设置了点击事件以及内部组件，代码如下，
RaisedButton(onPressed: () {Navigator.of(context).push(MaterialPageRoute(builder: (context) {return SecondPage(arguments: {"id":1},);}));}, //这个属性不能为空，不然背景颜色无效child: Text("路由",style: TextStyle(color: Colors.white),),color: Colors.red,)
（二）基本路由跳转传值，通过定义构造函数进行传值，上面的代码中已进行传值，参数名为arguments，值为1；对应Demo中第二个页面的构造方法中的arguments可选参数，代码如下：
import 'package:flutter/material.dart';class SecondPage extends StatefulWidget {final arguments;SecondPage({Key key, this.arguments}) : super(key: key);@override_SecondPageState createState() => _SecondPageState(arguments: this.arguments);}class _SecondPageState extends State<SecondPage> {Map arguments;_SecondPageState({this.arguments});@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Content(arguments: arguments,),),appBar: AppBar(title: Text("第二个页面"),),);}}class Content extends StatelessWidget {Map arguments;Content({this.arguments});@overrideWidget build(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text("这是第二个页面:id=${arguments["id"]}"),RaisedButton(onPressed: () {Navigator.pushNamed(context, "/third");},child: Text("命名路由跳转第三个页面"),)],);}}
（三）命名路由，对所有的路由进行管理，使用Map中的key进行跳转，Demo中除了上例中的跳转之外，其他使用的都是命名路由，首先先定义一个路由文件，对路由的路径以及配置进行统一管理，代码如下：
Routes.dart
import 'package:flutter/material.dart';import 'MainPage.dart';import 'SecondPage.dart';import 'ThirdPage.dart';import 'ForthPage.dart';//管理路由,main.dart直接导入这个路由管理就行//arguments代表跳转时传的值final routes = {'/': (context) => MainPage(), //配置根目录,默认首页'/second': (context, {arguments}) => SecondPage(arguments: arguments),'/third': (context) => ThirdPage(),'/forth': (context, {arguments}) => ForthPage(arguments: arguments),};var 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;}}};
接着在main.dart中设置厨师路由以及路由配置，代码如下：
import 'package:flutter/material.dart';import 'Routes.dart';void main() {runApp(MyApp());}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(//设置完命名路由不能只是热加载，要重新运行,真的气！//路由页面不能用MaterialApp包裹，不然没有返回键//跳转的时候构造方法中没有接收参数就别传参数，会报错initialRoute: "/",//初始路由，首页onGenerateRoute: onGenerateRoute,//路由的配置theme: ThemeData(primarySwatch: Colors.red),);}}
跳转代码如下，Demo中为页面二跳转页面三：
RaisedButton(onPressed: () {Navigator.pushNamed(context, "/third");},child: Text("命名路由跳转第三个页面"),)
如果需要传值，可以按照上例基本路由中，给下个页面组件定义带参数的构造方法，并在跳转的方法中添加参数arguments，获取传值的方法与基本路由一致，使用$获取即可，如下代码所示：
RaisedButton(onPressed: () {Navigator.pushNamed(context, "/third",arguments: {"id":1});},child: Text("命名路由跳转第三个页面"),)
（四） 返回的代码如下：
RaisedButton(onPressed: () {Navigator.pop(context);},child: Text("普通返回"),)
(五)讲完了普通的路由跳转，还有其他几个跳转Api介绍一下：
（1）替换路由：Navigator.pushReplacementNamed
适用场景：Page1->Page2->Page3->Page4,这个时候返回到Page2，而不是Page3，这个时候需要在Page3跳转到Page4的时候把Page3的路由替换，这样返回的时候就变成了返回到Page2，传值依然可以用定义带参构造方法来实现，代码如下：
RaisedButton(onPressed: () {Navigator.pushReplacementNamed(context, "/forth", arguments: {"content":"替换路由会加载下一个页面并让下一个页面替换当前的路由,\n即page1->page2->page3(这时候替换路由并跳转)->page4,这时候返回会回到page2,因为page3被替换了"});},child: Text("替换路由并跳转到第四个页面,返回到第二个页面"),)
（2）清除之前的路由直到你想要的旧页面：
Navigator.pushNamedAndRemoveUntil 适用于命名路由Navigator.pushAndRemoveUntil 适用于基本路由
适用场景：直接返回到某操作的开始页面或者App首页，这个Api可以在跳转中清除之前的路由，直到你设置的终点页面，代码如下：
RaisedButton(onPressed: () {//这种方式用构造方法传值，适用于基本路由跳转// Navigator.pushAndRemoveUntil(context, MaterialPageRoute(builder: (context)=> MainPage()), (route) => false);//这种方式可以用arguments参数传值，适用于命名路由跳转//第三个参数为true->可以返回，false->无法返回Navigator.pushNamedAndRemoveUntil(context, "/", (route) => false);},child: Text("移除之前的路由并返回"),)
（六）注意事项
注意事项：1.设置完命名路由不要只是热加载，报错的时候可以重新运行试试,真的气！2.路由页面不能用MaterialApp包裹，不然没有返回键3.跳转的时候构造方法中没有接收参数就别传参数，会报错
到此为止，Flutter的路由跳转就介绍完毕了，还是有些坑的，需要多尝试多总结，源码地址，最后，希望喜欢我文章的朋友们可以帮忙点赞、收藏、评论，也可以关注一下，如果有问题可以在评论区提出，后面我会持续更新Flutter的学习记录，与大家分享，谢谢大家的支持与阅读!
