QML 列表视图图像缓存无法按预期工作

Question

我创建了一个带有图像的列表视图，该视图在向下滚动时会自动请求新项目。我正在使用图像组件来显示来自 url 源的图像。问题是图像在加载后不会缓存在内存中。当我向下滚动时，我可以看到它们，但是当我向上滚动时，我必须等待它们再次加载。有没有办法解决这个问题？图像组件具有属性缓存，但它没有任何改进。我知道在Android中，这是以完全相同的方式完成的，并且图像在下载后会保留在内存中。 下面是一个示例代码：

ApplicationWindow {
visible: true
width: 800
height: 600
id: rootId
property url fullImageUrl
property string tag : "windsurfing"
XmlListModel{
id : modelId
namespaceDeclarations: "declare namespace media = 'http://search.yahoo.com/mrss/';"
source: "http://api.flickr.com/services/feeds/photos_public.gne?format=rss2&tags="+tag
query: "//item[title and media:thumbnail and media:content]"
XmlRole{name:"fullImage"; query:"media:content/@url/string()" }
}
TextField{
id : userValueId
font.pointSize: 14
width: parent.width
height : implicitHeight
placeholderText: "Enter a Flickr Tag"
onEditingFinished: tag = text
}
ListView{
id : listViewId
anchors.fill: parent
anchors.topMargin: userValueId.height + 10
Layout.minimumWidth: 400
Layout.maximumWidth: parent.width - 50
model: modelId
delegate:  delegateId
}
Component{
id: delegateId
Rectangle{
id :itemId
height : 300
width : 500
Image{
id : imageId
source : fullImage
anchors.fill: parent
fillMode: Image.Stretch
cache: true
}
}
}
}

Answer 1

如何缓存模型提供并绘制的图形项目 QML 列表视图？

我会尝试使用以像素为单位指定的 ListView cacheBuffer 属性来适应委托。如果您的委托在滚动方向上为 300 像素(例如，高度和垂直滚动)，那么每行有一个委托和 10000 像素的"缓存缓冲区"，那么它最多可容纳 33 个委托。

ListView {
id : listViewId
anchors.fill: parent
anchors.topMargin: userValueId.height + 10
cacheBuffer: 10000 // pixels in direction of scrolling the view,
// saves a bit of processing just by caching
// delegates content in memory, causes async
// read-ahead for images outside of view area
Layout.minimumWidth: 400
Layout.maximumWidth: parent.width - 50
model: modelId
delegate: delegateId
}

如果内存量严格限制，则指定相当小的 cacheBuffer 是有意义的，例如 2 页列表视图以防止过多的预读。缓存不能保证不会再次读取数据。我也有一些怀疑使用组件是否是使用图像缓存的正确方法，但得出的结论是，只要该组件的代码中没有加载器在任意时间执行加载，它就不会影响事情。

您还可以尝试在C++中实现自己的图像提供程序，以显式控制图像下载/缓存，以便逻辑完全由您的代码控制。