路由: 外围是 路由映射表
.
如:名字 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?…