《QmlBook》笔记（1）：一个简单的qml程序

一个旋转的风车示例：

//main.qml

import QtQuick 2.0
import QtQuick.Window 2.0

Window
{
    id:root;
    visible: true;
    width: bg.width;
    height: bg.height;

    Image
    {
        id: bg
        source: "img/bg.png";//白色背景图片
    }

    Image
    {
        id:ganzi
        source: "img/ganzi.png"
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
    }

    Image
    {
        id: shanye;
        anchors.centerIn: parent;
        source: "img/shanye.png";
        //anchors.horizontalCenterOffset:100;//锚定后的水平偏移量
        //anchors.verticalCenterOffset:100;
        Behavior on rotation //旋转角度动画
        {
            NumberAnimation
            {
                duration: 250 //动画持续时间
            }
        }
    }

    MouseArea
    {
        width: root.width;
        height: root.height;

        onClicked:
        {
            shanye.rotation += 90; //点击则旋转角度增加90
        }
    }
}

知识点和代码解析：

1、QML文件采用 .qml 作为文件格式后缀。

2、作为一种标记语言一个QML文档有且只有一个根元素，此例中 Window 作为根元素。QML不限制根元素类型。

3、每个元素都有属性，比如 Window 有 width 和 height 等属性。

4、id 是个特殊的属性，它可以作为一个标识符在当前文档内引用对应的元素。

5、id 被定义后无法再改变，在程序执行期间也无法被赋值。

6、杆子放在水平中央：

7、扇叶放在中央：

8、锚属性：anchor。锚点可以指定对象与父对象和同级对象的相对几何位置。

• 可定义元素放在另一个元素的中央 （anchors.centerIn: parent） 。
• 锚点定义时两端都可以定义元素的左侧 （left）、右侧（right）、顶部（top）、底部（bottom）、居中（centerIn）、填充 （fill）、垂直居中（verticalCenter ）和水平居中（horizontalCenter ）相对位置。

9、当用户点击 MouseArea 覆盖区域时，鼠标区域会发出一个信号。可以重写 onClicked 函数来链接这个信号。信号链接的函数命名方式是 on + SignalName 的形式。在这个例子中使扇叶图片的旋转角度增加90度。

10、当属性的值发生改变时也会发出一个信号。命名方式是：on + PropertyName + Chagned。例如宽度（width）属性改变了：。

onWidthChanged:
{
    print(width)
}

11、这里使用了属性行为动画。每次属性改变，动画都会运行。