Flutter基础之Navigate的路由表

在《Flutter基础之Navigate教程》中我们学会了通过创建一个新route来跳转到新的页面。

如果我们在一个页面的多个位置都需要跳转到某个页面，还继续使用《Flutter基础之Navigate教程》中方法就会造成代码重复。（开发一个重要原则，尽量不要复制粘贴代码）。在这种情况下，我们可以使用“named route”（路由表）来解决。
在Flutter中，我们可以通过 Navigator.pushNamed函数来使用named routes功能，下面我们将改造之前的demo，使用named route解决跳转问题。

介绍

1. 创建两个页面
2. 定义routes
3. 使用Navigator.pushNamed 导航到第二个页面
4. 使用Navigator.pop 返回第一个页面

demo

1. 创建连个页面

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

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

2.定义routes

接下来，我们将使用MaterialApp的constructor里的initialRoute 和 routes来定义我们的routes

initialRoute属性定义了我们的app应该从那个路径开始。
routes 属性定义了可用的name routes和其即将跳转到的widget

MaterialApp(
  // Start the app with the "/" named route. In our case, the app will start
  // on the FirstScreen Widget
  initialRoute: '/',
  routes: {
    // When we navigate to the "/" route, build the FirstScreen Widget
    '/': (context) => FirstScreen(),
    // When we navigate to the "/second" route, build the SecondScreen Widget
    '/second': (context) => SecondScreen(),
  },
);

注意：当我们使用initialRoute时，请不要使用 home属性了。

3. 跳转到第二个页面

好了，widget和routes都准备好了，我们可以开始跳转了。在这个案例里面，我们使用Navigator.pushNamed 函数。这函数将告诉Flutter构建路由表中定义的widget并且载入页面。

我们更新一下FirstScreen Widget中的onPressed回调函数

onPressed: () {
  // Navigate to the second screen using a named route
  Navigator.pushNamed(context, '/second');
}

4. 返回首页

// Within the SecondScreen Widget
onPressed: () {
  // Navigate back to the first screen by popping the current route
  // off the stack
  Navigator.pop(context);
}

整个项目

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Named Routes Demo',
    // Start the app with the "/" named route. In our case, the app will start
    // on the FirstScreen Widget
    initialRoute: '/',
    routes: {
      // When we navigate to the "/" route, build the FirstScreen Widget
      '/': (context) => FirstScreen(),
      // When we navigate to the "/second" route, build the SecondScreen Widget
      '/second': (context) => SecondScreen(),
    },
  ));
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Launch screen'),
          onPressed: () {
            // Navigate to the second screen using a named route
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            // Navigate back to the first screen by popping the current route
            // off the stack
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}