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"//低性能的嵌入式设备中需要指定，否则会卡顿，决定图片的总的像素数不大于指定的值//直接使用字符串的形式指定这个尺寸，中间是xsourceSize: "50x50"
}填充模式
- fillMode : enumeration
有6中取值
最常用的就是
- Image.PreserveAspectFit：自适应，图片等比例缩放到能够完整显示在Image元素中
- Image.Stretch：图片会拉伸填满整个Image
- Image.PreserveAspectCrop：图片等比例缩放，但是有可能不会完整显示，超出的部分会被裁剪
- 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: imageonStatusChanged: if (image.status == Image.Ready) console.log('Loaded')}