一个QML的启动器
我们在window的D盘安装了Qt Creator后。D:\Qt\Qt5.3.1\Examples这个路径，就是Qt Creator自带的实例路径，我们将从这里开始，慢慢的分析一个个QT实例。这这个系列的文章中，我们将视线集中在QML上。
D:\Qt\Qt5.3.1\Examples\Qt-5.3\quick\animation是我们分析的第一个实例路径，我们先看下面的代码。
该代码的原始版本文件为D:\Qt\Qt5.3.1\Examples\Qt-5.3\quick\animation\animation.qml
import QtQuick 2.0 //我们现在使用新版本的QtQuick
import "../shared" as Examples //这里将导入的../shared目录下的组件合成Examples总组件
Item { //一个组件
height: 680 //高
width: 320 //宽
Examples.LauncherList { //注意这里调用LauncherList的方式
id: ll //id是小写的L
anchors.fill: parent //锚定方式
Component.onCompleted: { //这是一个信号，每个组件都可以调用它，如Item，Image等等
addExample("ColorAnimation", "Interpolates between colors", Qt.resolvedUrl("basics/color-animation.qml")); //这是LauncherList组件中宣布的函数
addExample("PropertyAnimation", "Interpolates between numbers", Qt.resolvedUrl("basics/property-animation.qml"));
addExample("Animators", "Using Animators", Qt.resolvedUrl("basics/animators.qml"));
addExample("Behaviors", "Animates procedural movement", Qt.resolvedUrl("behaviors/behavior-example.qml"));
addExample("Wiggly Text", "Text that wiggles as you drag it", Qt.resolvedUrl("behaviors/wigglytext.qml"));
addExample("Tv Tennis", "Paddles that follow a ball", Qt.resolvedUrl("behaviors/tvtennis.qml"));
addExample("Easing Curves", "Compare available easing curves", Qt.resolvedUrl("easing/easing.qml"));
addExample("States", "Simple states", Qt.resolvedUrl("states/states.qml"));
addExample("Transitions", "Simple states with animated transitions", Qt.resolvedUrl("states/transitions.qml"));
addExample("PathAnimation", "Animate along a path", Qt.resolvedUrl("pathanimation/pathanimation.qml"));
addExample("PathInterpolator", "Interpolates along a path", Qt.resolvedUrl("pathinterpolator/pathinterpolator.qml"));
}
}
}
这段代码是QT的一个示例程序的入口，
第一个知识点：
import "../shared" as Examples 这行，我们可以替换成import "../shared"。当我们这么做的时候，Examples.LauncherList需要替换成LauncherList。这既是说，我们导入多个组件的时候，我们可以单独的导入每个组件，也可以将组件打包成一个导入。注意，当我们使用import "../shared" as Examples这种打包导入的方式时，我们在代码中，是不能直接使用LauncherList的，必须通过Examples.LauncherList来宣布。
第二个知识点：
Component.onCompleted: {
当一个组件的某个属性的信号被触发，而我们需要处理那个触发的信号时，我们就会看到类似的代码结构。这里的Component我们可以看成是组件的一个隐藏属性。当我们声明一个组件如Rectangle时，我们需要调用一些函数，对Rectangle进行初始化，我们就可以使用这个信号来处理。
需要注意的是，Component.onCompleted的触发时间，只和本组件有关。既我们没法保证父子兄弟之间，究竟谁的Component.onCompleted信号会优先触发。
前面的代码用到了LauncherList这个组件，这个组件的源代码为D:\Qt\Qt5.3.1\Examples\Qt-5.3\quick\shared\LauncherList.qml。
import QtQuick 2.0 //例行开头
Rectangle {
color: "#000" //颜色，这里是12位色的表示法，即R4位，G4位，B4位
Component.onCompleted: console.log("Completed Running!") //测试组件信号的试验代码
function addExample(name, desc, url) //声明一个函数
{
myModel.append({"name":name, "description":desc, "url":url})
}
function hideExample()
{
ei.visible = false;
}
ListView {
Component.onCompleted: console.log("Completed R3unning!")
clip: true //超出ListView尺寸的画面，不会显示出来
delegate: SimpleLauncherDelegate{exampleItem: ei} //model中每个单元的显示方法
model: ListModel {id:myModel} //这里声明了myModel
anchors.fill: parent
}
Item {
id: ei
visible: false //默认窗口不可见
clip: true //超出窗口不显示
property url exampleUrl //声明url的新属性exampleUrl
onExampleUrlChanged: visible = (exampleUrl == '' ? false : true);
anchors.fill: parent
anchors.bottomMargin: 40 //底部留40个像素
Component.onCompleted: console.log("Completed 33Running!")
Rectangle {
id: bg
anchors.fill: parent
color: "#0000ff"
}
MouseArea{
anchors.fill: parent
enabled: ei.visible //鼠标在组件显示的时候有效
//Eats mouse events
}
Loader{ //组件加载器
focus: true
source: ei.exampleUrl //加载哪个组件
anchors.fill: parent
Component.onCompleted: console.log("Complet44ed Running!")
}
}
Rectangle {
id: bar
visible: ei.visible
anchors.bottom: parent.bottom
width: parent.width
height: 40
Rectangle { //画高度为1的矩形
height: 1
color: "#000"
anchors.top: parent.top //锚定的顶部
anchors.left: parent.left //锚定的左边
anchors.right: parent.right //锚定的右边
}
Rectangle { //画高度为1的矩形
height: 1
color: "#fff"
anchors.top: parent.top
anchors.topMargin: 1 //距离顶部1像素
anchors.left: parent.left
anchors.right: parent.right
}
gradient: Gradient { //填充渐变色彩
GradientStop { position: 0 ; color: "#eee" }
GradientStop { position: 1 ; color: "#ccc" }
}
MouseArea{
anchors.fill: parent
enabled: ei.visible //鼠标在组件显示时有效
//Eats mouse events
}
Image {
id: back
source: "images/back.png"
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 2
anchors.left: parent.left
anchors.leftMargin: 16
MouseArea {
id: mouse
hoverEnabled: true //响应鼠标悬停
anchors.centerIn: parent
width: 38
height: 31
anchors.verticalCenterOffset: -1
onClicked: ei.exampleUrl = "" //点击鼠标，清ei.exampleUrl
Rectangle { //环绕MouseArea 的矩形面积
anchors.fill: parent
opacity: mouse.pressed ? 1 : 0 //鼠标是否按下，决定组件是否透明。该属性应用到所有子项
Behavior on opacity { NumberAnimation{ duration: 100 }} //透明的行为有个动画渐变
gradient: Gradient { //填充渐变色彩
GradientStop { position: 0 ; color: "#00ff0000" }
GradientStop { position: 2 ; color: "#1100ff00" }
}
border.color: "#00ff00" //边框色彩
antialiasing: true //抗锯齿，当旋转时，这个属性有较大的影响。
radius: 4 //矩形的四个角采用圆角，这是圆角半径，为0则没有圆角
}
}
}
}
}
下面是需要ListView用到的组件代码SimpleLauncherDelegate.qml。原版文件为D:\Qt\Qt5.3.1\Examples\Qt-5.3\quick\shared\SimpleLauncherDelegate.qml。
import QtQuick 2.0
Rectangle {
id: container
property Item exampleItem //Item类型的新属性exampleItem
width: ListView.view.width
height: button.implicitHeight + 22
gradient: Gradient { //渐变色彩
GradientStop {
position: 0
Behavior on color {ColorAnimation { duration: 100 }}
color: button.pressed ? "#e0e0e0" : "#fff"
}
GradientStop {
position: 1
Behavior on color {ColorAnimation { duration: 100 }}
color: button.pressed ? "#e0e0e0" : button.containsMouse ? "#f5f5f5" : "#eee"
}
}
Image {
id: image
opacity: 0.7 //可遗传的透明度
Behavior on opacity {NumberAnimation {duration: 100}} //透明度的变化用动画处理
source: "images/next.png"
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 16
}
Item {
id: button
anchors.top: parent.top
anchors.left: parent.left
anchors.bottom: parent.bottom
anchors.right:image.left
implicitHeight: col.height //自然高，组件的首选大小，布局时用，优先级implicitHeight > height
height: implicitHeight
width: buttonLabel.width + 20
MouseArea {
id: mouseArea
anchors.fill: parent
onClicked: exampleItem.exampleUrl = url
hoverEnabled: true
}
Column { //布局方式，以列的方式排列子组件的显示
spacing: 2
id: col
anchors.verticalCenter: parent.verticalCenter
width: parent.width
Text {
id: buttonLabel
anchors.left: parent.left
anchors.leftMargin: 10
anchors.right: parent.right
anchors.rightMargin: 10
text: name
color: "black"
font.pixelSize: 22
wrapMode: Text.WrapAtWordBoundaryOrAnywhere //文本处理的属性，枚举类型。文本到了窗口边界，则自动换行，即使换行位置在一个单词的中间。
styleColor: "white" //文字轮廓的颜色，如果设置了style，则无效
style: Text.Raised //文字的特效
}
Text {
id: buttonLabel2
anchors.left: parent.left
anchors.leftMargin: 10
text: description
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
color: "#666"
font.pixelSize: 12
}
}
}
Rectangle {
height: 1
color: "#ccc"
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
}
}
在QtQuick的组件说明中，详细地说明了上面代码每个组件的属性，信号，方法。更多的信息查阅相关文档。
QML类型说明网址