Image
Image
组件通过source
属性显示指定图片的路径,支持位图格式(如jpg
和png
)和矢量图格式(如svg
)。它可以来自于本地文件系统,也可以来自于网络图片。
下面是一个最简单的用法:
import QtQuick Image { source: "img/logo.png" }
使用qmlscene
命令运行效果如下:
需要指出的是,在没有指定Image
组件width
和height
属性的情况下,Image
会使用其图片的原始宽高。如果指定了宽高,图片会自动进行缩放以适应其大小。
import QtQuick Image { source: "img/logo.png" width: 200 height: 100 }
可以看到图片产生了变形,想要改变这一行为,可以通过设置fillMode
属性实现。fillMode
是一个枚举类型,不同的枚举值对应着不同的效果:
- Image.Stretch - 默认值,缩放图片以填充指定大小。
- Image.PreserveAspectFit - 根据图片原始宽高比进行缩放,不做裁剪
- Image.PreserveAspectCrop - 根据图片原始宽高比进行缩放并裁剪
- Image.Tile - 图片在水平和垂直方向上进行平铺
- Image.TileVertically - 图片在垂直方向上进行平铺
- Image.TileHorizontally - 图片在水平方向上进行平铺
- Image.Pad - 图片既不缩放也不平铺
对于Image
组件的使用有以下几个需要注意的地方:
- 加载本地大图片,建议启用
asynchronous
属性。它可以实现异步加载,防止界面卡顿。而对于网络图片,则会自动执行异步加载,并可以通过progress
属性获取加载的进度。 - QML的界面开发中,
Image
组件通常是占用内存最大的,可以通过sourceSize
属性进行控制。sourceSize
的值越小占用内存越少,但是会影响图片的清晰度。 - 支持缓存与共享机制。如果有多个
Image
组件具有相同的source
时,其他Image
组件将仅加载该图片的一个副本。 - 支持经过纹理压缩的图片文件,如
PKM
、KTX
、ASTC
格式的图片,它依赖于GPU和驱动程序。使用它们可以提升程序运行的效率,常用于嵌入式设备。