Flutter中的路由

1.概述

Flutter支持所有的路由场景，包括push页面、pop页面，以及页面间的参数传递等。flutter里面的路由可以分为如下两种。

• 静态路由：直接注册，不能传递参数。
• 动态路由：要自己构造实例，可以传递参数。

静态路由

采用静态路由，首先创建路由的时候就已经明确知道了要跳转的页面和对应的值，在新建一个MaterialDesign风格的App的时候，可以传入一个routes参数来定义路由。但是这里定义的路由是静态的，它不可以向下一个页面传递参数。
具体的举例代码如下：

class StaticRouter extends StatelessWidget {
  @override
  Widget build(BuildContext buildContext) {
    return new MaterialApp(
      title: 'flutter静态路由',
      theme: new ThemeData(primarySwatch: Colors.blue //主题设置为蓝色
          ),
      routes: {
        "router/pageTwo": (buildContext) => SecondPage(), //指向第二个界面的路由(注意：这里就是静态路由的声明方式!)
      },
      home: new FirstPage(title: '第一个界面'),
    );
  }
}

//第一个界面
class FirstPage extends StatefulWidget {
  FirstPage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '测试静态路由跳转',
            ),
          ],
        ),
      ),
      floatingActionButton: FlatButton(
        onPressed: () {
        Navigator.of(context).pushNamed('router/pageTwo');//静态方式
          //或者使用： Navigator.pushNamed(context, 'router/pageTwo');
        },
        child: Icon(Icons.arrow_forward),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

//第二个界面
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第二个界面'),
        centerTitle: true,
      ),
      body: Center(
          //添加一个子组件（网络图片）
          child: new Image.network(
        //图片的URL
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565087162924&di=85acfb591abca70d556ae455e7d129c6&imgtype=0&src=http%3A%2F%2Fpic60.nipic.com%2Ffile%2F20150129%2F6448355_204110337000_2.jpg',
        //填充模式
        fit: BoxFit.fill,
      )),
    );
  }
}

动态路由

需要向下一个页面传递参数时，就要用到动态路由了。动态路由的使用主要是依靠Navigator.push()或者Navigator.of()来完成的，返回时如果需要带着参数那么就要用到pop()方法。具体的代码举例如下

class StaticRouter extends StatelessWidget {
  @override
  Widget build(BuildContext buildContext) {
    return new MaterialApp(
      title: 'flutter动态路由',
      theme: new ThemeData(primarySwatch: Colors.blue), //主题设置为蓝色
      home: new FirstPage(),
    );
  }
}

//第一个界面
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('第一个界面'),
          centerTitle: true,
        ),
        body: Center(
            //添加一个按钮
            child: new FlatButton(
          color: Colors.blue,
          textColor: Colors.white,
          child: new Text('跳转'),
          onPressed: () {
            Future future = Navigator.of(context).push(MaterialPageRoute(builder: (context) {
              return new SecondPage(title: "我和我的祖国，一刻也不能分割");
            }));
            future.then((value) { //在这里处理返回值
              showDialog(
                  context: context,
                  child: new AlertDialog(
                    title: new Text(value),
                  ));
            });
          },
        )));
  }
}

//第二个界面
class SecondPage extends StatefulWidget {
  SecondPage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第二个界面'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '接收的参数是： ' + widget.title,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(child:new Icon(Icons.arrow_back),onPressed: (){
        Navigator.of(context).pop("我是第二个页面的返回值");
      }),
    );
  }
}

路由总结

Flutter中主要使用Navigator来管理Route，具体的管理机制就是利用一个栈不停压入、弹出。

• 压入（入栈）：使用Navigator.of(context).pushName(“path“)或者Navigator.pushName(context,“path“)，可以进行静态路由的跳转前提是需要在route属性里面注册。使用push(Route)可以进行态路由的跳转，动态路由可以传入未知数据。
• 弹出（出栈）：使用pop()可以进行路由的出栈并且可以传递参数，可以使用Future接收上个页面返回的值。