ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Flutter 入门与实战(十五),androidapp开发工具

2021-11-17 18:34:53  阅读:179  来源: 互联网

标签:settings androidapp id 开发工具 参数 arguments context Flutter 路由


列表的容器使用 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就是我们上一篇路由拦截中的onGenerateRoutesettings 参数,因此假设我们需要增加额外的路由参数(例如全局参数),则可以在 onGenerateRoute 方法中重新组装路由参数。 这里有个地方需要注意,因为返回时要携带参数,因此我们需要拦截返回响应事件,这时候整个组件可以使用 WillPopScope 包裹,该方法带有两个参数:

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

最终效果

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

路由参数拦截

路由参数可以通过 onGenerateRoute拦截进行额外处理,示例代码如下。需要注意,这里仅仅是示例,由于 settings。arguments 可能为任意类型,因此可能会导致转换失败。实际业务中最好是约定路由参数传递类型,避免参数形式不统一导致异常出现。

static Route onGenerateRoute(RouteSettings settings) {
var arguments = settings.arguments as Map<String, dynamic>;
if (arguments != null) {
arguments[‘event’] = ‘路由拦截增加的参数’;
}
RouteSettings newSettings =
settings.copyWith(name: settings.name, arguments: arguments);

return CupertinoPageRoute(
settings: newSettings,
builder: (context) {
String name = settings.name;
if (routeTables[name] == null) {
name = notFoundPath;
}
Widget widget = routeTablesname;
return widget;
},
);
}

总结

本篇介绍了路由参数的传递示例以及路由拦截后参数修改,在实际过程中一般是往下级传递路由参数,需要尽量避免来回传参来

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

开源分享完整内容戳这里

实现数据传递导致上下级页面耦合严重,最好通过状态管理实现。目前这种路由管理也会存在一定的不便之处,比如无法像网页的 url 一样在路径名传递可变参数,以及无法控制页面跳转的转场动画。在 pub 上fluro 路由管理非常流行,下一篇介绍如何使用 fluro 实现页面路由。

管理也会存在一定的不便之处,比如无法像网页的 url 一样在路径名传递可变参数,以及无法控制页面跳转的转场动画。在 pub 上fluro 路由管理非常流行,下一篇介绍如何使用 fluro 实现页面路由。

标签:settings,androidapp,id,开发工具,参数,arguments,context,Flutter,路由
来源: https://blog.csdn.net/m0_64319112/article/details/121384675

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有