当前位置:网站首页>将新增和编辑的数据同步更新到列表
将新增和编辑的数据同步更新到列表
2022-04-23 12:49:00 【InfoQ】
前言
Dio
- 详情页面界面构建;
- 更新详情查看次数接口实现;
- GetIt 简介;
- 使用 GetIt 注册全局对象;
- 使用 GetIt 实现页面间的数据同步。
详情页面
CustomerScrollView
ScrollView
CustomerScrollView
Sliver
CustomScrollView
slivers
- 标题:使用
Container
包裹以便调整布局。
- 查看次数:和列表的查看次数类似。
- 图片:为了避免图片占据太高的高度,将图片高度限制在240。
- 内容:和标题类似,只是字体调小了2号
slivers
的子组件的内容都使用SliverToBoxAdapter转换为
Sliver
详情查看次数更新

http://localhost:3900/api/dynamics/view/:id
if (response.statusCode == 200) {
setState(() {
_dynamicEntity = DynamicEntity.fromJson(response.data);
});
_updateViewCount();
}
//...
void _updateViewCount() async {
try {
var response = await DynamicService.updateViewCount(_dynamicEntity.id);
if (response.statusCode == 200) {
setState(() {
_dynamicEntity.viewCount = response.data['viewCount'];
GetIt.instance.get<DynamicListener>().dynamicUpdated(
_dynamicEntity.id,
_dynamicEntity,
);
});
}
} catch (e) {
print(e.toString());
}
}
GetIt 简介
GetIt
Provider
Map
// 注册对象:一般是单例
GetIt.instance.registerSingleton<T>(T object);
// 懒加载方式注册
GetIt.instance.registerLazySingleton<T>(FactoryFunc<T> func)
// 获取容器中的对象
GetIt.instance.get<T>();
注册动态改变监听对象

dynamic_listener.dart
DynamicListener
_DynamicPageState
import 'package:home_framework/models/dynamic_entity.dart';
abstract class DynamicListener {
void dynamicUpdated(String id, DynamicEntity updatedDynamic);
void dynamicAdded(DynamicEntity newDynamic);
}
- 新增响应方法:当有新增动态时,将新增动态插入到开头处;
- 更新方法:使用新的动态替换旧的动态数据。
initState
class _DynamicPageState extends State<DynamicPage> implements DynamicListener {
// ...
@override
void initState() {
super.initState();
// 注册到 GetIt容器
GetIt.instance.registerSingleton<DynamicListener>(this);
}
void dynamicUpdated(String id, DynamicEntity updatedDynamic) {
int index = _listItems.indexWhere((element) => element.id == id);
if (index != -1) {
setState(() {
_listItems[index] = updatedDynamic;
});
}
}
void dynamicAdded(DynamicEntity newDynamic) {
setState(() {
_listItems.insert(0, newDynamic);
});
}
// ...
}
页面间数据更新
- 新增页面:新增成功后调用
dynamicAdded
方法更新列表页面;
- 编辑页面:编辑成功后调用
dynamicUpdated
方法更新列表页面;
- 详情页面:更新查看次数后调用
dynamicUpdated
方法更新列表页面。
//新增页面
var response = await DynamicService.post(newFormData);
if (response.statusCode == 200) {
Dialogs.showInfo(context, '添加成功');
GetIt.instance
.get<DynamicListener>()
.dynamicAdded(DynamicEntity.fromJson(response.data));
Navigator.of(context).pop();
}
//-------------------------------------
//编辑页面
if (response.statusCode == 200) {
Dialogs.showInfo(context, '保存成功');
//处理成功更新后的业务
_handleUpdated(newFormData);
Navigator.of(context).pop();
}
// 处理更新,如果图片更新了才更新动态图片内容
void _handleUpdated(Map<String, String> newFormData) {
_dynamicEntity.title = newFormData['title'];
_dynamicEntity.content = newFormData['content'];
if (newFormData.containsKey('imageUrl')) {
_dynamicEntity.imageUrl = newFormData['imageUrl'];
}
GetIt.instance.get<DynamicListener>().dynamicUpdated(
_dynamicEntity.id,
_dynamicEntity,
);
}
//-------------------------------------
//详情页面
void _updateViewCount() async {
try {
var response = await DynamicService.updateViewCount(_dynamicEntity.id);
if (response.statusCode == 200) {
setState(() {
_dynamicEntity.viewCount = response.data['viewCount'];
GetIt.instance.get<DynamicListener>().dynamicUpdated(
_dynamicEntity.id,
_dynamicEntity,
);
});
}
} catch (e) {
print(e.toString());
}
}
运行效果

总结
- 重复代码很多:比如
try...catch
代码块;
- 暴露了 Dio 的细节;
- 界面参与了业务对象的构建,没有与业务逻辑分离。

版权声明
本文为[InfoQ]所创,转载请带上原文链接,感谢
https://xie.infoq.cn/article/b4c91137736b562fea25b5903
边栏推荐
- Analysis of InnoDB execution process in MySQL
- Labels and paths
- C, calculation code of parameter points of two-dimensional Bezier curve
- Metalama简介4.使用Fabric操作项目或命名空间
- How to prevent the website from being hacked and tampered with
- SSL证书退款说明
- flask项目跨域拦截处理以及dbm数据库学习【包头文创网站开发】
- Homomorphic encryption technology learning
- Message queuing overview
- 在线计算过往日期天数,计算活了多少天
猜你喜欢
I changed to a programmer at the age of 31. Now I'm 34. Let me talk about my experience and some feelings
网站首页文件被攻击篡改的形式有哪些
Object. The disorder of key value array after keys
0基础可以考CPDA数据分析师证书吗
Can I take the CPDA data analyst certificate for 0 foundation
对话PostgreSQL作者Bruce:“转行”是为了更好地前行
98. Error s.e.errormvcautoconfiguration $staticview reported by freemaker framework: cannot render error page for request
Analysis of InnoDB execution process in MySQL
如何实现点击一下物体播放一次动画
天梯赛赛前练习
随机推荐
Idea的src子文件下无法创建servlet
AD20补充笔记3—快捷键+持续更新
QT one process runs another
Kubernetes 入門教程
Resolve disagrees about version of symbol device_ create
Try the server for one month for free, and attach the tutorial
Buuctf Web [gxyctf2019] no dolls
What are the forms of attack and tampering on the home page of the website
Labels and paths
风尚云网学习-input属性总结
Unlock openharmony technology day! The annual event is about to open!
SSL certificate refund instructions
BUUCTF WEB [BJDCTF2020]ZJCTF,不过如此
【微信小程序】z-index失效
leetcode-791. 自定义字符串排序
BUUCTF WEB [BUUCTF 2018]Online Tool
Unable to create servlet under SRC subfile of idea
STM32CubeProgrammer基础使用说明
S2-062 远程命令执行漏洞复现(cve-2021-31805)
CGC: contractual graph clustering for community detection and tracking