编辑本页 提Issue

导航到新页面并返回

大多数应用程序包含多个页面。例如，我们可能有一个显示产品的页面，然后，用户可以点击产品，跳到该产品的详情页。

在Android中，页面对应的是Activity，在iOS中是ViewController。而在Flutter中，页面只是一个widget！

在Flutter中，我们那么我们可以使用Navigator在页面之间跳转。

步骤

  1. 创建两个页面。
  2. 调用Navigator.push导航到第二个页面。
  3. 调用Navigator.pop返回第一个页面。

1. 创建两个页面

我们创建两个页面，每个页面包含一个按钮。点击第一个页面上的按钮将导航到第二个页面。点击第二个页面上的按钮将返回到第一个页面。页面结构如下：

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('First Screen'),
      ),
      body: new Center(
        child: new RaisedButton(
          child: new Text('Launch new screen'),
          onPressed: () {
            // Navigate to second screen when tapped!
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Second Screen"),
      ),
      body: new Center(
        child: new RaisedButton(
          onPressed: () {
            // Navigate back to first screen when tapped!
          },
          child: new Text('Go back!'),
        ),
      ),
    );
  }
}

2. 调用Navigator.push导航到第二个页面

为了导航到新的页面，我们需要调用Navigator.push方法。 该push方法将添加Route到由导航器管理的路由栈中！

该push方法需要一个Route，但Route从哪里来？我们可以创建自己的，或直接使用MaterialPageRoute。 MaterialPageRoute很方便，因为它使用平台特定的动画跳转到新的页面(Android和IOS屏幕切换动画会不同)。

在FirstScreen Widget的build方法中，我们添加onPressed回调：

// Within the `FirstScreen` Widget
onPressed: () {
  Navigator.push(
    context,
    new MaterialPageRoute(builder: (context) => new SecondScreen()),
  );
}

3. 调用Navigator.pop返回第一个页面。

现在我们在第二个屏幕上，我们如何关闭它并返回到第一个屏幕？使用Navigator.pop方法！ 该pop方法将Route从导航器管理的路由栈中移除当前路径。代码如下：

// Within the SecondScreen Widget
onPressed: () {
  Navigator.pop(context);
}

完整的例子

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: 'Navigation Basics',
    home: new FirstScreen(),
  ));
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('First Screen'),
      ),
      body: new Center(
        child: new RaisedButton(
          child: new Text('Launch new screen'),
          onPressed: () {
            Navigator.push(
              context,
              new MaterialPageRoute(builder: (context) => new SecondScreen()),
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Second Screen"),
      ),
      body: new Center(
        child: new RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: new Text('Go back!'),
        ),
      ),
    );
  }
}