Flutter中ListView加载图片数据的优化
时间:2022-07-22
本文章向大家介绍Flutter中ListView加载图片数据的优化,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。
重要消息
在使用ListView懒加载模式时,当ListView的Item中有图片信息时,在快速滚动过程中会大量的浪费流量与内存,甚至会造成在滚动过程中页面的卡顿效果。
在这里提出优化方案,当开始滚动时不加载图片,滚动结束后再加载图片,这个优化方案实现的效果如下图所示,在快速滑动列表数据时,图片未加载,运行内存无明显波动。
实现代码如下:
class ListViewUsePage13 extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return ScrollHomePageState();
}
}
class ScrollHomePageState extends State {
///加载图片的标识
bool isLoadingImage = true;
///网络图片地址
String netImageUrl =
"https://images.gitee.com/uploads/images/2020/0602/203000_9fa3ddaa_568055.png";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: Text("详情"),
),
///列表
body: NotificationListener(
///子Widget中的滚动组件滑动时就会分发滚动通知
child: buildListView(),
///每当有滑动通知时就会回调此方法
onNotification: notificationFunction,
),
);
}
bool notificationFunction(Notification notification) {
///通知类型
switch (notification.runtimeType) {
case ScrollStartNotification:
print("开始滚动");
///在这里更新标识 刷新页面 不加载图片
isLoadingImage = false;
break;
case ScrollUpdateNotification:
print("正在滚动");
break;
case ScrollEndNotification:
print("滚动停止");
///在这里更新标识 刷新页面 加载图片
setState(() {
isLoadingImage = true;
});
break;
case OverscrollNotification:
print("滚动到边界");
break;
}
return true;
}
ListView buildListView() {
return ListView.separated(
itemCount: 10000, //子条目个数
///构建每个条目
itemBuilder: (BuildContext context, int index) {
if (isLoadingImage) {
///这时将子条目单独封装在了一个StatefulWidget中
return Image.network(
netImageUrl,
width: 100,
height: 100,
fit: BoxFit.fitHeight,
);
} else {
return Container(
height: 100,
width: 100,
child: Text("加载中..."),
); //占位
}
},
///构建每个子Item之间的间隔Widget
separatorBuilder: (BuildContext context, int index) {
return new Divider();
},
);
}
}
*** 完结
- 【聊】我个人眼里的ReactJs生态系统
- [WCF REST] Web消息主体风格(Message Body Style)
- apache配置https服务
- [WCF 4.0新特性] 默认绑定和行为配置
- mysql数据库及django用户名启用中文的方法
- 【学习笔记】先行者课程0109-rotate3d_变量、堆、栈
- 通过WCF扩展实现消息压缩
- Linux系统中的信号量机制
- 基于Linux与lpc3250开发板的交叉开发环境搭建
- WCF中关于可靠会话的BUG!!
- [WCF安全系列]谈谈WCF的客户端认证[Windows认证]
- ls命令实现分析
- [WCF安全系列]谈谈WCF的客户端认证[X.509证书认证]
- Openstack Trove概要
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- [GO] 变参函数-GO中函数传递变长参数
- 基于Android-Skin-Loader实现换肤效果
- 通过 Nginx 实现最简单的Nas服务器(文件分享)
- 解决Android Studio xml 格式化不自动换行的问题
- GitHub代码仓库服务的那些事
- Android之自定义实现BaseAdapter(通用适配器三)
- Android实现音乐播放器锁屏页
- android studio3.3.1代码提示忽略大小写的设置
- Ascgen2可以把图片变成文字的小工具
- 解决android studio卡顿,提升studio运行速度的方法
- Android物理键盘事件解析
- AndroidQ(10)分区存储完美适配方法
- (全局快捷键工具)Power Keys彻底提升码字效率?
- android自定义view实现钟表效果
- 教你如何用OpenVZ限制虚拟机硬盘IO速度