路由:外围是 路由映射表.
如：名字 detail 映射到 DetailPage 页面等
在Flutter中，路由治理次要有两个类：Route和Navigator.
Route
一个页面要想被路由对立治理，必须包装为一个Route
Navigator
治理所有的Route的Widget，通过一个Stack来进行治理.
MaterialApp、CupertinoApp、WidgetsApp它们默认是有插入Navigator的,在须要的时候，只须要间接应用即可.Navigator.of(context)
Navigator罕用办法:
// 路由跳转：传入一个路由对象Future<T> push<T extendsObject>(Route<T> route)// 路由跳转：传入一个名称（命名路由）Future<T> pushNamed<T extendsObject>( String routeName, { Object arguments, })// 路由返回：能够传入一个参数bool pop<T extendsObject>([ T result ])命名路由
- 命名路由是将名字和路由的映射关系，在一个中央进行对立的治理
- 有了命名路由，就能够通过
Navigator.pushNamed()办法来跳转到新的页面
命名路由的地位
放在MaterialApp的 initialRoute 和 routes 中
initialRoute：设置应用程序从哪一个路由开始启动，设置了该属性，就不须要再设置home属性了routes：定义名称和路由之间的映射关系，类型为Map<String, WidgetBuilder>onGenerateRoute: 通过pushNamed进行跳转，然而对应的name没有在routes中有映射关系，那么就会执行onGenerateRoute钩子函数 . 另外,onGenerateRoute也能够作为页面跳转的权限管制.；onUnknownRoute: 如果关上的一个路由名称是基本不存在的，这个时候能够跳转到一个对立的谬误页面。
关上命名路由时，如果指定的路由名在路由表中已注册，则会调用路由表中的builder函数来生成路由组件；如果路由表中没有注册，才会调用onGenerateRoute来生成路由。
残缺代码
import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, splashColor: Colors.transparent), initialRoute: "/", routes: { "/": (context) => MyHomePage(title: 'Flutter Demo Home Page'), //注册首页路由 // "/home": (ctx) => HomePage(), "/detail": (ctx) => DetailPage() }, onGenerateRoute: (settings) { //路由钩子 . 手动创立对应的Route进行返回； if (settings.name == "/about") { //settings.name: 跳转的门路名称 return MaterialPageRoute(builder: (ctx) { return AboutPage(settings.arguments); //settings.arguments：跳转时携带的参数 }); } return null; }, onUnknownRoute: (settings) { return MaterialPageRoute(builder: (ctx) { return UnknownPage(); }); }, ); }}class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> { // final message = ModalRoute.of(context).settings.arguments; var _message = ''; _onPushTop(BuildContext context) { final future = Navigator.of(context) .pushNamed('/detail', arguments: "a home message of naned route"); //被动跳转时arguments传递参数 // 2.获取后果 future.then((res) { setState(() { _message = res; }); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( '显示后果: ' + _message, ), FlatButton( child: Text("跳转下一页", style: TextStyle(color: Colors.black)), onPressed: () => _onPushTop(context), ), RaisedButton( child: Text("关上对于页"), onPressed: () { Navigator.of(context).pushNamed(AboutPage.routeName, arguments: "a home message"); }, ), RaisedButton( child: Text("关上未知页面"), onPressed: () { Navigator.of(context).pushNamed("/abc"); }, ), ], ), ), ); }}class DetailPage extends StatelessWidget { // 按钮点击执行的代码 _onBackTap(BuildContext context) { Navigator.of(context).pop("a detail message"); } @override Widget build(BuildContext context) { //接管下级页面传过来的参数 final message = ModalRoute.of(context).settings.arguments; return new Scaffold( appBar: new AppBar( title: Text('这是第二页'), leading: IconButton( icon: Icon(Icons.arrow_back), onPressed: () { Navigator.of(context).pop("a back detail message"); //pop跳转时间接放入参数 }, ), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( '首页带来的内容: ' + message, ), // child: RaisedButton( child: Text("返回首页"), onPressed: () => _onBackTap(context), ), ]), ), ); }}class AboutPage extends StatelessWidget { static const String routeName = "/about"; final String message; AboutPage(this.message); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("对于页面"), ), body: Center( child: Text( message, style: TextStyle(fontSize: 30, color: Colors.red), ), ), ); }}class UnknownPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("谬误页面"), ), body: Container( child: Center( child: Text("页面跳转谬误"), ), ), ); }}参考文章
Flutter 写的app, 须要源码能够私信~~
- 简繁火星字体转换
- 哄女友神器
- 号码测吉凶
- 电视节目直播表
最好的笔记软件
https://www.wolai.com/signup?...