《Image介绍》
所有的热爱都要不遗余力，真正喜欢它便给它更高的优先级，和更多的时间吧！
QML其它文章请点击这里: QT QUICK QML 学习笔记
本文转载于： QML之Image
1. 简介
Image控件可以用来显示图片，当然必须是qt支持的图片格式，比如Jpg，Png等等。当然，这里说的图片是静态图片，如果你要显示gif这种格式的图片，那么只能将gif的第一帧显示出来。
Image {
id: name
width: 120 //图像宽度
height: 120 //图像高度
anchors.centerIn: parent
source: "images/Contacts_white_round.png"
autoTransform: true //图像是否自动变换，默认为false
fillMode: Image.Pad //图像的填充方式-保持图片原样
cache: false //指定是否缓存图像，默认为true，在处理大图像的时候，指定为false还是很有用的
//horizontalAlignment: Image.Right //水平对齐方式 居右
//horizontalAlignment: Image.Left //水平对齐方式 居左
// horizontalAlignment: Image.AlignHCenter //水平对齐方式 居中 默认居中
}
这里简单设置了图片的几个属性，让我们看下它的显示效果：
2. 图片填充效果
接下来看下图片的填充效果，具体含义我在代码中有注释：
Column {
Image {
width: 48
height: 48
source: "images/Contacts_white_round.png"
fillMode: Image.Pad //图像的填充方式-保持图片原样
anchors.left: pad
}
Image {
width: 32
height: 32
source: "images/Contacts_white_round.png"
fillMode: Image.PreserveAspectFit //图像的填充方式-缩放不裁剪
}
Image {
width: 32
height: 32
source: "images/Contacts_white_round.png"
fillMode: Image.PreserveAspectCrop //图像的填充方式-缩放必要时裁剪
}
Image {
width: 128
height: 128
source: "images/Contacts_white_round.png"
fillMode: Image.Tile //图像的填充方式-水平垂直复制
}
Image {
width: 128
height: 128
source: "images/Contacts_white_round.png"
fillMode: Image. TileVertically //图像的填充方式-水平填充，垂直复制
}
Image {
width: 128
height: 128
source: "images/Contacts_white_round.png"
fillMode: Image.TileHorizontally //图像的填充方式-水平复制，垂直填充
}
}
运行结果：
3. 图像mirror属性
Image中有一个比较有意思的属性，那就是mirror属性，这个属性指定的是图像是否水平旋转，在呈现镜像的场合是十分方便的。
Row
{
Image {
width: 48
height: 48
source: "images/login-icon.jpg"
mirror: false
}
Image {
width: 48
height: 48
source: "images/login-icon.jpg"
mirror: true
}
}
看下效果：
感觉还不错。。大伙可以试一试。
4. 加载网络图片
Image控件还有一个值得注意的地方就是，它可以加载网络图片，它的source属性是一个URL，可以接收Qt支持的任意一种网络协议。当Image识别到source是网络资源的时候会自动开启异步加载。
让我们看一个加载网络图片的代码：
Rectangle
{
width: 400
height: 320
color:"#ffffff"
BusyIndicator //忙碌指示显示
{
id:busy
running: true
anchors.centerIn: parent
z:2
}
Text {
id: stateLabel
visible: false
anchors.centerIn: parent
z:3
}
Image {
id:imageViews
cache: false
asynchronous: true
fillMode: Image.PreserveAspectFit
onStatusChanged: {
if(imageViews.status == Image.Loading){
busy.running = true;
stateLabel.visible = false;
console.info("Lodings....");
}
else if(imageViews.status == Image.Ready)
{
busy.running = false;
console.info("Ready....");
}
else if(imageViews.status == Image.Error)
{
busy.running = false;
stateLabel.visible = true;
stateLabel.text = "Errors";
console.info("Errors....");
}
}
}
Component.onCompleted:
{
imageViews.source = "http://b79.photo.store.qq.com/psu?/7c595bd9-7aa7-4b74-92af-b0874c1528c8/ASXihnWbyI62kCamKmOGjQACj1HTNuIEgpyYcF5R5rw!/b/YdIhIS**bgAAYpG2JS9OawAA&bo=ngL2AQAAAAABFFg!&rf=viewer_4&t=5"
}
}
程序运行后会出现加载界面：
图片加载完成后，BusyIndicator消失，图片显示
这里主要使用onStatusChanged信号处理器来监听Status的状态变化来进行界面跟新。
QML其它文章请点击这里: QT QUICK QML 学习笔记