flutter - 从网络加载图像时如何修复 Listview 滚动卡顿
问题描述
我正在使用 Image.network 使用以下代码为列表中的每个项目加载图像:
Image getEventImageWidget(AustinFeedsMeEvent event) {
return event.photoUrl.isNotEmpty ?
Image.network(
event.photoUrl,
width: 77.0,
height: 77.0,
) : Image.asset(
'assets/ic_logo.png',
width: 77.0,
height: 77.0,
);
}
当我上下滚动时,加载图像时列表有时会挂起。有没有办法可以在后台线程上加载图像?我可以做些什么来帮助修复滚动性能?
注意:当我回头看这个时,我发现我使用的图像非常大。
解决方案
有两个是为了加快你的 ListView 图像的渲染。
第一个是cacheExtent
在 ListView 构造函数中将属性设置为更大的值。此属性控制渲染屏幕外小部件的数量,并有助于加快渲染开始。
第二个是使用precacheImage
. Flutter 具有内存缓存,因此通常需要将所有内容缓存到磁盘以获得良好的读取性能。相反,您可以要求 Flutter 提前下载这些图像,以便在构建小部件时准备好它们。例如,如果你有一张图片的 url 列表,那么在一个initState
方法中你可以让 Flutter 缓存所有这些。
final List<String> imageUrls = [ /* ... */ ];
@override
void initState() {
for (String url in imageUrls) {
precacheImage(new NetworkImage(url), context);
}
super.initState();
}
推荐阅读
- android - 使用 viewtype , onBindViewHolder 和 onCreateViewHolder 是不同的
- javascript - 如何将firebase返回的数据保存到变量
- swift - 如何显示稍微超出 UITextView 的字符的其余部分?
- reactjs - 是否可以将 Puppeteer 与 React Native 一起使用?
- c++ - 将静态字符数组中的字符分配给动态分配的字符数组 - 访问冲突
- sql-server - 在一条记录中获取同一表 SQL Server 2008 的多行
- c++ - 链接不足的一个例子
- javascript - 如何解决“动画:不支持`useNativeDriver`,因为缺少本机动画模块。” 在反应导航中?
- python - 在表格中按顺序拖动行 python selenium
- python - Python / 电子邮件处理:如何获取附件的创建日期?