Flutter开发中的路由参数处理

navigator 的 push 和 pop方法

navigator 导航器的 push 和 pop 方法可以携带参数在页面间传递，其他变形的方法也一样。pushnamed 方法原型如下：

future<t?> pushnamed<t extends object?>(
  string routename, {
  object? arguments,
}) {
  return push<t>(_routenamed<t>(routename, arguments: arguments)!);
}

除了 routename 的命名路由以外，还有个可选参数 arguments 用于在路由页面传递参数。pop 方法也一样：

void pop<t extends object?>([ t? result ]) {
  //...
}

可以携带一个 result 回传到上级页面。

代码实现

我们使用一个列表跳转到详情页来演示路由参数获取（列表构建文章请看）。点击列表行时携带列表数据项的 id 跳转到详情页。从详情页返回时再把该 id 回传。列表项的 widget 新增了一个 id属性，由构建列表时初始化得到。

class dynamicitem extends statelesswidget {
  final int id;
  final string title;
  final string imageurl;
  final int viewcount;
  static const double item_height = 100;
  static const double title_height = 80;
  static const double margin_size = 10;
  const dynamicitem(this.id, this.title, this.imageurl, this.viewcount,
      {key key})
      : super(key: key);
  //...
}

列表的容器使用 gesturedetector 包裹，以便响应点击事件。 ontap 方法定义为一个 async 方法，以便使用 await 获取导航返回时的参数，并使用一个 snackbar 显示返回的 id。这里 pushnamed 携带了一个 map 对象将列表的 id传递到详情页。

@override
widget build(buildcontext context) {
  return gesturedetector(
    child: container(
      margin: edgeinsets.all(margin_size),
      child: row(
        crossaxisalignment: crossaxisalignment.start,
        children: [
          _imagewrapper(this.imageurl),
          expanded(
            child: column(
              crossaxisalignment: crossaxisalignment.start,
              children: [
                _titlewrapper(context, this.title),
                _viewcountwrapper(this.viewcount.tostring()),
              ],
            ),
          )
        ],
      ),
    ),
    ontap: () async {
      map<string, dynamic> routeparams = {'id': id};
      var arguments = await navigator.of(context)
          .pushnamed(routertable.dynamicdetail, arguments: routeparams);
      scaffoldmessenger.of(context).showsnackbar(snackbar(
        content: text("从动态${(arguments as map<string, dynamic>)['id']}返回"),
      ));
    },
  );
}

这里还使用了一个 arguments变量 接收导航返回的参数，导航若有返回参数，会返回一个 future 对象，使用 await 即可接收。然后在使用 as 转换为实际的类型进行使用。 在详情页中，flutter 提供了一个modalroute的类从当前上下文获取路由配置参数，代码如下所示：

class dynamicdetail extends statelesswidget {
  const dynamicdetail({key key}) : super(key: key);

  @override
  widget build(buildcontext context) {
    map<string, dynamic> routeparams =
        modalroute.of(context).settings?.arguments;

    return willpopscope(
      child: scaffold(
        appbar: appbar(
          title: text('动态详情'),
          brightness: brightness.dark,
        ),
        body: center(
          child: text("产品 id: ${routeparams['id']}"),
        ),
      ),
      onwillpop: () async {
        navigator.of(context).pop({'id': routeparams['id']});
        return true;
      },
    );
  }
}

实际上这个modalroute.of(context).settings就是我们上一篇路由拦截中的ongenerateroute的 settings 参数，因此假设我们需要增加额外的路由参数（例如全局参数），则可以在 ongenerateroute 方法中重新组装路由参数。 这里有个地方需要注意，因为返回时要携带参数，因此我们需要拦截返回响应事件，这时候整个组件可以使用 willpopscope 包裹，该方法带有两个参数：

• child：子组件，即原有的页面组件；
• onwillpop：返回前拦截处理，返回一个 future<bool>对象，若为 false，则不会返回。若为 true，则返回上一级。这里我们调用了 携带参数的 pop 方法以便将参数回传。实际这里往往做一些其他处理，例如表单没有保存询问是否确认李可，还有广大电商的活动页询问你是“忍痛离开”或是“再看一会”的处理。
  

最终效果

最终运行效果如下图所示，详情页获取到了 id 参数，返回的时候也接收到了对应的 id。

以上就是flutter开发中的路由参数处理的详细内容，更多关于flutter 路由参数处理的资料请关注其它相关文章！