乘机应变之Qml（2）

Qt开发交流群：723516989~

学完Qt后，当你真正使用上了Qml，你会发现Qml的id使用干净利落，百样玲珑。
接下来我们走入Qml的代码大门。
我们开始创建⼀个空的main.qml⽂档。所有的QML⽂件都已.qml作为后缀。 作为⼀个标识语⾔（类似HTML）⼀个QML⽂档需要并且只有⼀个根元素。

import QtQuick 2.0 
Image {
 	id: root
 	source: "images/background.png" 
}

QML不会对根元素设置任何限制，我们使用一个background图像作为资源图像元素来作为我们的根元素。

注意代码里的id
id是这个特殊的属性是可选的，包含了一个标识符，在文档后面的地方可以直接饮用。
重要的是，一个id属性无法在它被设置后改变，并且在程序执行期间无法被设置。使用root作为根元素id仅仅是习惯，可以在比较大的QML文档中方便的引用最顶层元素。

---

锚

为了把一个图片放在我们想放在布局的任意位置，我们使用了一个复杂的属性，称之为锚。
⽐如放置我在 另⼀个元素中间（anchors.centerIn:parent）.有左边（left），右边 （right），顶部（top），底部（bottom），中央（centerIn），填充 （fill），垂直中央（verticalCenter）和⽔平中央（horizontalCenter）来表⽰ 元素之间的关系。确保他们能够匹配，锚定一个对象的左侧顶部的一个元素这样的做法是没有意义的。所以我们设置图片在父对象background的中央。

有时候你需要进行一些微小的调整。使用anchors.horizontalCenterOffset或anchors.verticalCenterOffset可以帮你实现这个功能。类似的调整属性也可以用于其他所有的锚。
还需要了解的可以查阅Qt的帮助文档知道完整的锚属性列表

例子

为了让我们的展⽰更加有趣⼀点，我们应该让程序有⼀些交互功能。当⽤户 点击场景上某个位置时，让我们的⻛⻋转动起来。

我们使用mouseArea元素，并且让它与我们的根元素大小一样。

Image 
	{ id: root 
	... 
	MouseArea 
	{ anchors.fill: parent 
	onClicked: wheel.rotation += 90 
	}
	... 
}

当⽤户点击覆盖区域时，⿏标区域会发出⼀个信号。你可以重写onClicked函 数来链接这个信号。在这个案例中引⽤了⻛⻋的图像并且让他旋转增加90 度。

注意：
对于每个工作的信号，命名方式都是on+SignalName的标题。当属性的值发生翻遍时也会发出一个信号。它们的命名方式是: on+PropertyName+Changed。如果一个宽度（width）属性改变了，你可以使用onWidthChanged：print(width)来得到这个监控这个新的宽度值。

现在⻛⻋将会旋转，但是还不够流畅。⻛⻋的旋转⾓度属性被直接改变了。 我们应该怎样让90度的旋转可以持续⼀段时间呢。现在是动画效果发挥作⽤的时候了。⼀个动画定义了⼀个属性的在⼀段时间内的变化过程。为了实现 这个效果，我们使⽤⼀个动画类型叫做属性⾏为。这个⾏为指定了⼀个动画 来定义属性的每⼀次改变并赋值给属性。每次属性改变，动画都会运⾏。这 是QML中声明动画的⼏种⽅式中的⼀种⽅式。

Image 
	{ id: root
	Image { 
		id: wheel 
		Behavior on rotation {
			 NumberAnimation {
			 	 duration: 250 
			 	 } 
			} 
	} 
}

现在每当⻛⻋旋转⾓度发⽣改变时都会使⽤NumberAnimation来实现250毫 秒的旋转动画效果。每⼀次90度的转变都需要花费250ms。