Qml组件之Image

• Image用来显示静态图片
• Qt支持的格式都可以显示，比如png、jpg、svg
• Image元素的width和height属性没有显式指定的话，Image会自动使用加载的图片的宽度和高度
• 如果显示指定了width和height，那么图片会缩放到这个大小

Image{

}

常用属性

图像源

• source : url

可以是相对路径，也可以是绝对路径

url直接用字符串就好了

Image{
    
    //指定图片路径        
    source: "./111.jpg"
}

图像源像素尺寸

• sourceSize : size

用来限制加载的图片的像素数

比如为"1024x1024"，那么加载进来的图片的像素总数不会超过1024*1024个

一般在性能较低的设备中需要指定，比如arm的嵌入式设备

可能造成的后果是：

如果原图像的像素总数大于设置的sourceSize，可能会使图像没有原图清晰

比如：

下面是原图

 指定sourceSize，像素总数不能超过50x50，导致图片变模糊了

Image {
	//指定图片路径
	source: "./111.jpg"

	//低性能的嵌入式设备中需要指定，否则会卡顿，决定图片的总的像素数不大于指定的值
    //直接使用字符串的形式指定这个尺寸，中间是x
	sourceSize: "50x50"
}

填充模式

• fillMode : enumeration

有6中取值

最常用的就是

1. Image.PreserveAspectFit：自适应，图片等比例缩放到能够完整显示在Image元素中
2. Image.Stretch：图片会拉伸填满整个Image
3. Image.PreserveAspectCrop：图片等比例缩放，但是有可能不会完整显示，超出的部分会被裁剪
4. Image.Tile：图片不会进行任何缩放，直接沿着水平和垂直方向平铺

图片对齐方式

• horizontalAlignment : enumeration
• verticalAlignment : enumeration

指定图片在Image中的对齐方式，默认是在Image中心

也可以分别指定在水平和垂直方向的对齐方式

异步加载

• asynchronous : bool

指定Image加载图像是异步的，在加载大内存的图像时可以防止界面卡顿

加载状态

• status : enumeration [read-only]

是一个只读属性，可以通过该属性获取Image加载图像的加载状态，有以下4个状态，见名知意

镜像图片

• mirror : bool

可以让显示的图片水平镜像

平滑

• smooth : bool

指定图片在缩放时获得更好的显示质量，某些设备下可能导致卡顿

裁剪显示

• sourceClipRect : rect

即给定一个矩形区域，显示图像这个区域的内容到Image上

比如下面显示图片左上角200*200的区域

Image {
	id: img

	//指定图片路径
	source: "./111.jpg"

	fillMode: Image.PreserveAspectFit //自适应，图片保持从横比缩放到Image元素的大小

	sourceClipRect: Qt.rect(0, 0, 200, 200)
}

信号

• statusChanged

加载状态改变信号

通过可以在他的信号改变处理器中根据当前的状态做不同的处理

 Image {
     id: image
     onStatusChanged: if (image.status == Image.Ready) console.log('Loaded')
 }