2.2.2. 路由管理

路由传值

很多时候，在路由跳转时我们需要带一些参数。

创建TipRoute路由

它接收一个提示文本参数，负责将传入它的文本显示在页面上，另外添加一个返回按钮，点击后在返回上一个路由的同时会带上一个返回参数。

class TipRoute extends StatelessWidget {

  final String text;

  TipRoute({
    Key key,
    @required this.text // 接收一个text参数
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(title: new Text("提示")),
      body: new Padding(
        padding: EdgeInsets.all(18),
        child: new Center(
          child: new Column(
            children: <Widget>[
              new Text(text),
              RaisedButton(
                onPressed: () => Navigator.pop(context,"我是返回值"),
                child: new Text("返回"),
              )
            ],
          ),
        ),
      ),
    );
  }
}

打开新路由的代码

class RouterTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("RouterTestRoute"),
      ),
      body: new Center(
        child: new RaisedButton(
          onPressed: () async {
            var result = await Navigator.push(context,
                MaterialPageRoute(builder: (context) {
              return new TipRoute(text: "我是路由XXX");
            }));
            print("路由返回值: $result");
          },
          child: new Text("打开提示页"),
        ),
      ),
    );
  }
}

点击返回按钮和导航栏箭头后，显示的内容。

I/flutter: 路由返回值: 我是返回值
I/flutter: 路由返回值: null

命名路由

命名路由即有名字的路由，可以先给路由起一个名字，然后就可以通过路由名字直接打开新的路由了。

路由表

先提供并注册一个路由表，这样程序才知道哪个名字与哪个路由组件相对应。
路由表的定义如下:

Map<String, WidgetBuilder> routes;

它是一个Map，key为路由的名字，是个字符串；value是个builder回调函数，用于生成相应的路由widget。

注册路由表

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: "Flutter Demo",
        theme: new ThemeData(primarySwatch: Colors.blue),
        // 注册路由表
        routes: {
          "new_route": (context) => new NewRoute(),
        },
        home: new MyHomePage(title: "Flutter Demo Home Page")
    );
  }
}

home注册为命名路由

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: "Flutter Demo",
        initialRoute: "/", // 名为"/"的路由作为应用的home(首页)
        theme: new ThemeData(primarySwatch: Colors.blue),
        // 注册路由表
        routes: {
          "new_route": (context) => new NewRoute(),
          "/": (context) => MyHomePage(title: "Flutter Demo Home Page") // 注册首页路由
        },
        // home: new MyHomePage(title: "Flutter Demo Home Page")
    );
  }
}

在路由表中注册一下MyHomePage路由，然后将其名字作为MaterialApp的initialRoute属性值即可，该属性决定应用的初始路由页是哪一个命名路由。

通过路由名打开新路由页

要通过路由名称来打开新路由，可以使用Navigator的pushNamed方法：

Future pushNamed(BuildContext context, String routeName,{Object arguments})

除了pushNamed方法，还有pushReplacementNamed等其他管理命名路由的方法。

onPressed: () {
   // 导航到新路由
   Navigator.pushNamed(context, "new_route");
},

命名路由参数传递

先注册一个路由

// 注册路由表
routes: {
  "new_route": (context) => new EchoRoute(),
},

在打开路由时传递参数

onPressed: () {
    // 导航到新路由
    Navigator.pushNamed(context, "new_route",arguments: "Hi");
},

在路由页通过RouteSetting对象获取路由参数：

class EchoRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var args = ModalRoute.of(context).settings.arguments;
    print(args);
    ...
  }

}

输出：

I/flutter: Hi

适配

routes: {
   "new_route": (context) => new EchoRoute(),
   "/": (context) => MyHomePage(title: "Flutter Demo Home Page"),
   "tip_route": (context){
      return new TipRoute(text: ModalRoute.of(context).settings.arguments);
   },
},