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();
},
);
}
}
*** 完结
- 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 数组属性和方法
- 【leetCode】青蛙跳台问题(这只青蛙会托马斯大旋转)day07
- 【leetCode】斐波那契数列day06
- 剑指offer(61-67)题解
- 宇智波程序笔记8-【高并发】ThreadLocal学会了这些,你也能和面试官扯皮了!
- 情感分析数据预处理过程
- java的内部类和静态内部类(嵌套类)
- python爬取B站视频弹幕分析并制作词云
- mybatis扩展之自定义类型处理器处理枚举类型
- IMDB影评数据集预处理(使用word2vec)
- 【leetCode】使用两个栈搞一个队列day05
- bert训练代码
- mybatis文件映射之自定义返回结果集
- maven之第一个maven程序
- 【LeetCode】重建二叉树day04
- 【LeetCode】从尾到头反过来返回每个节点的值(用数组返回)day03