当前位置:网站首页>将新增和编辑的数据同步更新到列表
将新增和编辑的数据同步更新到列表
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
边栏推荐
- Aviation core technology sharing | overview of safety characteristics of acm32 MCU
- Kubernetes 入门教程
- CGC: contractual graph clustering for community detection and tracking
- C, calculation code of parameter points of two-dimensional Bezier curve
- NPDP|产品经理如何做到不会被程序员排斥?
- Realize several "Postures" in which a box is horizontally and vertically centered in the parent box
- Kubernets Getting started tutoriel
- uni-app 原生APP-云打包集成极光推送(JG-JPUSH)详细教程
- Object. The disorder of key value array after keys
- Jiachen chapter Genesis "inner universe" joint Edition
猜你喜欢
[csnote] ER diagram
Softbank vision fund entered the Web3 security industry and led a new round of investment of US $60 million in certik
STM32 control stepper motor (ULN2003 + 28byj)
Everything can be expected in the future | one 2022 campus recruitment officially opened
梳理网络IP代理的几大用途
Unlock openharmony technology day! The annual event is about to open!
进程虚拟地址空间区域划分
SSM framework series - JUnit unit test optimization day2-3
【蓝桥杯】4月17日省赛刷题训练(前3道题)
QT double buffer drawing
随机推荐
云原生KubeSphere部署Redis
Resolve disagrees about version of symbol device_ create
Object.keys后key值数组乱序的问题
大家帮我看一下这是啥情况,MySQL5.5的。谢了
软件测试周刊(第68期):解决棘手问题的最上乘方法是:静观其变,顺水推舟。
XinChaCha Trust SSL Organization Validated
BUUCTF WEB [GXYCTF2019]禁止套娃
STM32CubeProgrammer基础使用说明
Source code analysis of synchronousqueue
Introduction to metalama 4 Use fabric to manipulate items or namespaces
如何防止网站被黑客入侵篡改
Markdown grammar learning
Softbank vision fund entered the Web3 security industry and led a new round of investment of US $60 million in certik
A graphic designer's fantasy world | ones characters
【蓝桥杯】4月17日省赛刷题训练(前3道题)
[Blue Bridge Cup] April 17 provincial competition brushing training (the first three questions)
leetcode:437. Path sum III [DFS selected or not selected?]
STM32工程移植:不同型号芯片工程之间的移植:ZE到C8
甲辰篇 創世紀《「內元宇宙」聯載》
Use source insight to view and edit source code