Flutter页面跳转传递参数

一、路由传值

直接通过路由的构造方法传递值。

我们创建一个TipRoute路由，它接受一个提示文本参数，负责将传入它的文本显示在页面上，另外TipRoute中我们添加一个“返回”按钮，点击后在返回上一个路由的同时会带上一个返回参数，下面我们看一下实现代码。

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

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

下面是打开新路由TipRoute的代码：

class RouterTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () async {
          // 打开`TipRoute`，并等待返回结果
          var result = await Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) {
                return TipRoute(
                  // 路由参数
                  text: "我是提示xxxx",
                );
              },
            ),
          );
          //输出`TipRoute`路由返回结果
          print("路由返回值: $result");
        },
        child: Text("打开提示页"),
      ),
    );
  }
}

二、命名路由传参

我们先注册一个路由：

 routes:{
   "new_page":(context) => EchoRoute(),
  } ,

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

class EchoRoute extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    //获取路由参数  
    var args=ModalRoute.of(context).settings.arguments;
    //...省略无关代码
  }
}

在我们项目中通过如上方式无法获取到传参。后面我发现，项目中使用onGenerateRoute 代替了routes做路由跳转。

需要注意的是：onGenerateRoute 只有没在routes中注册的路由才会被回调。

通过onGenerateRoute 这种方式拦截，参数传递到onGenerateRoute 中的setting了，所以，我们无法在widget中通过ModalRoute.of(context).settings.arguments获取参数。

我们可以在onGenerateRoute 中通过方式一：路由传值 来实现。