Flutter开发中的路由参数处理

 更新时间:2021年06月17日 16:11:07   作者:岛上码农  
在实际开发中,我们经常会需要在页面跳转的时候携带路由参数,典型的例子就是从列表到详情页的时候,需要携带详情的 id,以便详情页获取对应的数据。同时,有些时候还需要返回时携带参数返回上一级,以便上级页面根据返回结果更新。本篇将介绍这两种情形的实现。

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 回传到上级页面。

代码实现

我们使用一个列表跳转到详情页来演示路由参数获取(列表构建文章请看//www.jb51.net/article/213052.htm)。点击列表行时携带列表数据项的 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 路由参数处理的资料请关注脚本之家其它相关文章!

相关文章

  • Flutter自定义底部导航栏的方法

    Flutter自定义底部导航栏的方法

    这篇文章主要为大家详细介绍了Flutter自定义底部导航栏的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Android AutoValue使用和扩展库

    Android AutoValue使用和扩展库

    今天小编就为大家分享一篇关于Android AutoValue使用和扩展库的文章,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-10-10
  • Android Studio preview 不固定及常见问题的解决办法

    Android Studio preview 不固定及常见问题的解决办法

    preview 可以帮助您预览您的布局文件将如何在用户的设备上呈现。这篇文章主要介绍了Android Studio preview 不固定及常见问题的解决办法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 札记:android手势识别功能实现(利用MotionEvent)

    札记:android手势识别功能实现(利用MotionEvent)

    现在手势识别的应用已经很广泛了。本篇文章主要介绍了android手势识别功能实现,具有一定的参考价值,有兴趣的可以了解一下。
    2016-11-11
  • Android实现屏幕手写签名

    Android实现屏幕手写签名

    这篇文章主要为大家详细介绍了Android实现屏幕手写签名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • android中ListView多次刷新重复执行getView的解决方法

    android中ListView多次刷新重复执行getView的解决方法

    以前倒是没有注意listview的getView会重复执行多次,在测试的时候去断点跟踪,发现同一条数据不断的重复执行,下面与大家分享下正确的解决方法,希望对你有所帮助
    2013-06-06
  • Android实现保存图片到本地并在相册中显示

    Android实现保存图片到本地并在相册中显示

    这篇文章主要为大家详细介绍了Android实现保存图片到本地并在相册中显示的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 点击微信内网页a标签直接跳转打开淘宝APP的方法实例

    点击微信内网页a标签直接跳转打开淘宝APP的方法实例

    这篇文章主要给大家介绍了关于如何实现点击微信内网页a标签直接跳转打开淘宝APP的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-11-11
  • Android  回调详解及简单实例

    Android 回调详解及简单实例

    这篇文章主要介绍了Android 回调详解及简单实例的相关资料,需要的朋友可以参考下
    2017-01-01
  • Android利用listview控件操作SQLite数据库实例

    Android利用listview控件操作SQLite数据库实例

    我们利用SQLiteOpenHelper类建立一个数据库,并写好增、删、查等方法,通过SimpleCursorAdapter连接listview实现数据库的增加、查询以及长按删除的功能。
    2017-04-04

最新评论