Flutter>导航（一）>导航到一个新页面和返回

关于路由与导航，看了Flutter中文网： https://flutterchina.club/routing-and-navigation/，需要查看英文文档，不方便。
这里推荐大家在这里学习查看： https://flutter.cn/docs/cookbook/navigation

我们通常会用“屏”来表示应用的不同页面（界面）。比如，某个应用有一“屏”展示商品列表，当用户点击某个商品的图片，会跳到新的一“屏”展示商品的详细信息。

术语: 在 Flutter 中，屏 (screen) 和 页面 (page) 都叫做 路由 (route)，在下文中统称为“路由 (route)”。

在 Android 开发中，Activity 相当于“路由”，在 iOS 开发中，ViewController 相当于“路由”。在 Flutter 中，“路由”也是一个 Widget。

怎么样从一个“路由”跳转到新的“路由“呢？你需要使用 Navigator 类。

然后发现flutter中文网提供的例子不太友好，可以看这里：[路由和导航]https://flutter.cn/docs/development/ui/navigation

导航到一个新页面和返回

怎么样从一个“路由”跳转到新的“路由“呢？你需要使用 Navigator 类。
步骤

下面来展示如何在两个路由间跳转，总共分三步：
创建两个路由
用 Navigator.push() 跳转到第二个路由
用 Navigator.pop() 回退到第一个路由

创建两个路由
首先，我们来创建两个路由。这是个最简单的例子，每个路由只包含一个按钮。点击第一个路由上的按钮会跳转到第二个路由，点击第二个路由上的按钮，会回退到第一个路由。
首先来编写界面布局代码：

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: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => SecondRoute()));
            }),
      ),
    );
  }
}

// SecondRoute 第二个页面不用MaterialApp， 直接Scaffold，可以箭头返回
class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
            child: Text('Go back!'),
            onPressed: () {
              Navigator.pop(context);
            }),
      ),
    );
  }
}

用 Navigator.push() 跳转到第二个路由
使用 Navigator.push()方法跳转到新的路由。push() 方法会添加一个 Route 对象到导航器的堆栈上。那么这个 Route 对象是从哪里来的呢？你可以自己实现一个，或者直接使用 MaterialPageRoute 类。使用 MaterialPageRoute 是非常方便的，框架已经为我们实现了和平台原生类似的切换动画。

在 FirstRoute widget 的 build() 方法中，我们来修改 onPressed() 回调函数：

// 位于 FirstRoute widget (Within the `FirstRoute` widget)
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

用 Navigator.pop() 回退到第一个路由
怎么关闭第二个路由回退到第一个呢? 使用 Navigator.pop() 方法，pop() 方法会从导航器堆栈上移除 Route 对象。

我们来修改 SecondRoute widget 的 onPressed() 回调函数，实现返回第一个路由的功能：

// 位于 SecondRoute widget (Within the SecondRoute widget)
onPressed: () {
  Navigator.pop(context);
}

完整样例:

class NavigatorTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Basics',
      home: FirstRoute(),
    );
  }
}

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: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => SecondRoute()));
            }),
      ),
    );
  }
}

// SecondRoute 第二个页面不用MaterialApp， 直接Scaffold，可以箭头返回
class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
            child: Text('Go back!'),
            onPressed: () {
              Navigator.pop(context);
            }),
      ),
    );
  }
}

最后编辑于：2019.10.31 15:30:48