和iOS的NavigationController原理相同,都是使用堆栈的原理来管理页面。
在组件里可以使用Navigator.of(content)来获得父组件里的导航器
有两种方式来实现路由跳转
1,构建路由跳转
该builder方法中可以携带参数
push、pop都可以携带参数,而所携带的参数都是Future
Widget build(BuildContext context) {
return Container(
child: RaisedButton(
child: Text('push'),
onPressed: () => Navigator.of(context).push(MaterialPageRoute(
builder: (content) {
return deee(str: 'demo');
},
)),
),
);
}
class deee extends StatelessWidget {
final Sting str;
//带参数的组件初始化方式
const _ListTodoDetail({Key key,@required this.str}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text('${this.str}'),
),
);
}
}
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
child: Text('push'),
//pop回来的值类型为Future,必须使用await来获取,而await必须在async异步线程中使用
onPressed: () async {
final va = await Navigator.of(context).push(MaterialPageRoute(
builder: (context) => _PopPage()
));
print('$va');
}),));
}
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text('pop'),
),
body: Center(
child: Center(
child: RaisedButton(
child: Text('pop'),
onPressed: () => Navigator.of(context).pop('we are coming'),
),)));
}
2,命名路由跳转
//在app最顶端的组件MaterialApp中设置,一般做一些通用跳转,不能传一些动态的参数
return MaterialApp(
title: 'Demo',
routes: {
'/back': (context) => Navigator.of(context).pop(),
}
)
//任意位置调用:
Navigator.pushNamed(context, '/back');