Qml 中的那些坑(一)---Image 的内存

你的名字 2024-04-18 21:40 48阅读 0赞

### **【写在前面】** ###

首先，要提一个版本bug。

因为一个类似的bug是在Qt 5.13.0 中 ( 5.12 则没有)，由 QQuickPaintedItem 引起的。

详见：[https://bugreports.qt.io/browse/QTBUG-78063][https_bugreports.qt.io_browse_QTBUG-78063]

同样的，使用 Image 后，也会无限增长内存。

但是先忽略这个bug，因为这里要讲的是 Image 的内存。

--------------------

### **【正文开始】** ###

在 qml 中，Image 作为最常用的控件之一，简单又方便。

然而，程序中大量使用 Image 后，我发现有些不对劲。

例如，我使用一张高清的大图作为背景(2000 x 2000 background.jpg)：

import QtQuick 2.12
    import QtQuick.Window 2.12
    
    Window {
        id: root
        visible: true
        width: 1024
        height: 680
    
        Image {
            anchors.fill: parent
            source: "background.jpg"
        }
    }

因为是JPG，它的压缩率很高，因此只占用 400KB 的空间。

运行起来发现，内存占用 40MB (左右)，看起来似乎可以接受。

然而，接着多添加几张图片试试：

import QtQuick 2.12
    import QtQuick.Window 2.12
    
    Window {
        id: root
        visible: true
        width: 1024
        height: 680
    
        Image {
            anchors.fill: parent
            source: "background.jpg"
        }
        Image {
            anchors.fill: parent
            source: "background2.jpg"
        }
        Image {
            anchors.fill: parent
            source: "background3.jpg"
        }
    }

结果每多一张就增加 20MB，现在占用 80MB 内存了！![20190912164050106.jpg][]

这已经完全不能接受了好吗，虽然不可能每张图片都是 2000 x 2000，但也架不住图片多啊(ಥ \_ ಥ)。

于是我开始在文档中寻找答案  > > >

最终，我找到了，那就是 sourceSize: size

> 此属性保存已加载图像的实际宽度和高度。
> 
> 与缩放图像绘制的宽度和高度属性不同，此属性设置为加载的图像存储的实际像素数，以便大图像不会占用超过必要的内存。

也就是说，该属性可以限制实际内存中图像的的大小。

现在来试一下效果：

import QtQuick 2.12
    import QtQuick.Window 2.12
    
    Window {
        id: root
        visible: true
        width: 1024
        height: 680
    
        Image {
            anchors.fill: parent
            source: "background.jpg"
            sourceSize: Qt.size(1024, 680)
        }
    }

现在内存降到了 20MB。![20190913000957518.jpg][]

这样做的优点显而易见，那么缺点就是：

在窗口 <= size(1024, 680) (初始大小)的时候，不会有任何区别，而在 > size(1024, 680) 时，会变模糊。

具体原因是：放大失真后进行了平滑处理 ( 来源于 smooth 属性，默认 true，因此设为 false 将会出现明显锯齿 )。

因此，我的建议是：将 sourceSize 设为一个合理的大小(并且最好稍微大一点)。

--------------------

### **【结语】** ###

最后，讲一些题外话：

Image 有一个属性 cache：

> Specifies whether the image should be cached. The default value is true.
> 
> Setting cache to false is useful when dealing with large images, to make sure that they aren't cached at the expense of small 'ui element' images.
> 
> 翻译：
> 
> 指定是否应缓存图像。 默认值是true。
> 
> 在处理大图像时，将缓存设置为false非常有用，以确保它们不会以小的“ui元素”图像为代价进行缓存。

开启 cache 后，在 Qml 内部， 会维护一个 QHash。

也就是说，同样 Image 只会加载一次，这样做明显是有好处的，那么文档中所说的，大图像设置为 false 的好处又是什么呢，是大图像不会被多次使用而省去了缓存的工作吗？

这点暂时还在摸索中...![20190913002121214.jpg][]

[https_bugreports.qt.io_browse_QTBUG-78063]: https://bugreports.qt.io/browse/QTBUG-78063
[20190912164050106.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/397c440d8fc94b549c88a0d64def0a52.jpg
[20190913000957518.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/faac4ae23d4c4fe9b6d81b9ccffd2a9e.jpg
[20190913002121214.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/57a56c1f169d47848c46d27ba1649fed.jpg