Flutter Navigator基础使用

Flutter Navigator基础使用

Navigator的使用分为两部分：

本节说一些基本操作，如果你已经掌握了Navigator的基本跳转姿势

1.路由最基本的使用-跳转和退出

大多数App都包含了许多页面用来呈现不同种类的信息。例如：一个app可能存在“商品列表页”，当点击item的时候又会跳转到对应“商品详情”页面。

在Flutter中，页面被称之为route（路由）。在android中路由等同于Activity，ios中路由等同于ViewController，然后在Flutter中路由只是一个widget。

两个路由之间的跳转需要经历下面三个步骤

1. 创建两个route
2. Navigate到第二个route使用Navigator.push()
3. 返回到第一个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