本文章原创于 www.yafeilinux.com 转载请注明出处。
从这一节开始我们讲述QML的一些基本组成元素和项目。正是这些部件才使得QML变得使用简单但功能强大。
我们先打开Qt Creator，然后进入帮助模式，在左上角选择Contents方式显示。我们点击Qt Reference Documentation一项，这时就显示出了Qt4.7的内容列表。如下图。
我们选择Qt API Overviews的UI design & Qt Quick一项。如下图。
这里有Declarative UI 和 QML的概述，下面列有一些教程和QML相关内容的文章列表。我们可以查看自己所需要的内容。我们点击Reference下面的QML Elements一项。
这里列出了所有的标准Qt Declarative元素和QML项目。如下图。
我们以后可以在这里查看自己所需要用到的元素和项目的帮助文件。在这一节里，我们主要介绍QML Items中的Image 和 BorderImage 两个项目。
一、Image图片
1.我们新建Qt QML Application，工程名为“myImage”。
2.我们在库面板中拖入一个Image到场景中，在属性面板中我们可以选择一张图片的路径。
其实，更好的方法是，我们将图片放到工程文件夹中，这样在库面板的资源栏中我们就可以直接看到该图片了，而且该图片也会显示在工程文件列表中。
3.我们将两张图片放到工程文件夹下。如下图。
然后在库面板的资源页面查看添加的图片。我们可以将图片直接拖入场景。如下图。
在工程文件列表中也会显示这两个图片。
4.图片平铺方式。
在属性面板中我们可以设置图片的平铺方式Fill Mode。如下图。
Stretch：默认选择的是Stretch一项，表示拉伸图片。就是说当将图片缩放时会拉伸图片。
其效果如下：
当图片缩放或者旋转时我们也可以选中属性面板中Smooth一项，使图片变得平滑。效果如下：
PreserveAspectFit：拉伸时缩放图片，总是显示完整图片。
PreserveAspectCrop：拉伸时缩放图片，但是可能对图片进行裁剪。
Tile：平铺图片。
TileVertically：竖直平铺图片。
TileHorizontally：水平平铺图片。
5.使用网络上的图片。
我们也可以使用网络上的图片，直接在属性面板上更改图片路径为图片的地址即可。
这时，如果你的电脑连接着网络，那么图片会自动下载并显示出来，效果如下。
但是有时候从网上下载图片是很慢的，所有我们希望在没有下载完图片时，图片区域可以有些提示，所以我们利用Image的status属性，在Edit代码编辑界面，更改Image段代码如下：
Image {
id: image1
Text{id:text1} //用于显示信息
width: 200
height: 200
fillMode: “Tile”
source: “http://j.imagehost.org/0317/linux.jpg”
states: [
State { //没有下载完图片时的状态
name: "loading"
when: image1.status != Image.Ready
PropertyChanges {
target: text1
text:"loading..."
}
}
]
}
这时运行程序效果如下：
二、BorderImage边界图片
边界图片，顾名思义，就是将一张图片作为窗口的边界。它主要的特点就是，在这里用四条线将一张图片分成了9部分。如下图。
这四条线分别用它们到图片各边界的像素值来表示，上下左右依次是top，bottom，left和right。比如top = 50 就是说离图片上边界50像素的地方就是上边界线。这样，将图片分为9个区域后，它们各自就有了不同的平铺规定。
下面我们先看例子，再进行总结。
1.我们在库面板中选中Border Image，拖入场景。
然后在属性面板中输入图片的路径，并设置其各边界线的值均为30。如下图。
这时我们拉伸图片，查看效果。
可以看到，图片四个角没有变化，其他区域都被拉伸了。这时我们再将各边界线的值改为60，然后查看效果。
可以看到，被边界线分到四个角的图片是不被拉伸的。
2.平铺方式。
在这里我们可以分别指定水平方向的平铺方式（horizontalTileMode属性）和竖直方向的平铺方式（verticalTileMode属性）。平铺方式有以下三种：
BorderIamge.Stretch ：缩放图像以适合拉伸。（默认值）
BorderImage.Repeat ：平铺图像，当空间不够时，最后一个图像可能会被裁剪。
BorderImage.Round ：平铺图像，但是缩放所有平铺的图像，确保最后一个图像不会被裁剪。
我们上面就是使用的Stretch方式。下面我们改用其他方式，查看效果。
我们先更改代码如下：
BorderImage {
id: borderimage1
horizontalTileMode:BorderImage.Repeat
verticalTileMode:BorderImage.Repeat
border.bottom:30;border.top:30;border.right:30;border.left:30
anchors.fill:parent
source: “colors.png”
}
这时运行程序，效果如下：
我们更改平铺方式：
horizontalTileMode:BorderImage.Round
verticalTileMode:BorderImage.Round
再次运行程序，效果如下：
我们再次更改平铺方式：
horizontalTileMode:BorderImage.Round
verticalTileMode:BorderImage.Repeat
效果如下：
3.结论
使用边界图片，我们需要先指定四条边界线，然后指定水平和竖直方向的平铺方式。
图片被四条边界线分为9个区域：
区域5会通过horizontalTileMode和verticalTileMode进行平铺。
区域2,8会通过horizontalTileMode进行平铺。
区域4,6会通过verticalTileMode进行平铺。
区域1,3,7,9的图像不会变化。
这一节中我们讲述了图片的使用。可以看到，在QML中图片是很容易操作的，我们可以按照我们自己的想法来显示图片。
体验全新的Qt 4.7.0 ，更多精彩内容，尽在 www.yafeilinux.com ！