Flutter Navigator基础使用
Navigator的使用分为两部分:
本节说一些基本操作,如果你已经掌握了Navigator的基本跳转姿势
1.路由最基本的使用-跳转和退出
大多数App都包含了许多页面用来呈现不同种类的信息。例如:一个app可能存在“商品列表页”,当点击item的时候又会跳转到对应“商品详情”页面。
在Flutter中,页面被称之为route(路由)。在android中路由等同于Activity,ios中路由等同于ViewController,然后在Flutter中路由只是一个widget。
两个路由之间的跳转需要经历下面三个步骤
- 创建两个route
- Navigate到第二个route使用Navigator.push()
- 返回到第一个route使用Navigator.pop()
1.1创建两个路由
首先创建两个页面,由于这只是为了演示最基本的导航功能,所以每个页面只包含一个按钮。点击第一个页面的按钮跳转到第二个页面,点击第二个页面的按钮返回到第一个页面
class FirstRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Route'),
),
body: Center(
child: RaisedButton(
child: Text('Open route'),
onPressed: () {
// 点击跳转到第二个route
},
),
),
);
}
}
class SecondRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Route"),
),
body: Center(
child: RaisedButton(
onPressed: () {
// 点击回到第一个route
},
child: Text('Go back!'),
),
),
);
}
}
1.2.使用Navigator.push()来跳转页面
我们使用Navigator.push()来切换页面。这个方法会调价一个新的Route到route栈中,而这个栈是由Navigator来管理的。那么路由栈是从何而来呢?你可以船舰你自己的路由栈,或者直接使用系统提供的MaterialPageRoute。这个组件可以很方便的实现路由跳转动画。
在FirstRoute组件中的onPress方法中,添加相应的跳转代码
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (conte