qml listview图像缓存没有按预期工作

时间:2017-06-13 13:02:56

标签: image qt listview caching qml

我创建了一个列表视图,其中包含向下滚动时自动请求新项目的图像。我正在使用Image组件来显示来自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
            }
        }
    }
}

1 个答案:

答案 0 :(得分:0)

  

如何缓存模型提供并绘制的图形项目   QML ListView?

我会尝试使用以像素为单位指定的ListView cacheBuffer属性来适应委托。如果您的委托在滚动方向上是300像素(例如,高度和垂直滚动),则每行有一个委托,而#34;缓存缓冲区为#34;它最多可以容纳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页列表视图,以防止过多的预读。缓存不保证数据不会再次被读取。 我也有一些疑问,如果使用Component是使用图像缓存的正确方法,但结论是它不应该影响事情,只要该组件的代码中没有Loader在任意时间执行加载。

您还可以尝试在C ++中实现自己的image provider来明确控制图像下载/缓存,以便逻辑完全由您的代码控制。