开始 QML 的第一步

创建一个 QML 文件

QML 文档内部定义了高可读和结构化的对象层次系统。 每个 QML 文档都由两部分组成：导入部分和对象声明部分。通过导入 QtQuick，可以使用到用户界面开发过程中最常用的类型和功能。

导入和使用 QtQuick 模块

import QtQuick 2.3

定义一个对象层次结构系统

Rectangle {
    width: 300
    height: 200
    color: "green"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
}

完整的一个 QML 文档

import QtQuick 2.3

Rectangle {
    width: 300
    height: 200
    color: "green"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
}

然后保存这个文档为「HelloWorld.qml」，稍后我们就可以加载和显示它了。

创建 QML 工程，然后跑起来！

使用控件创建 QML 应用

// 导入相关的模块
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Window 2.2

//包含应用的窗口
ApplicationWindow {

    //title of the application
    title: qsTr("Hello World")
    width: 640
    height: 480

    //包含两个菜单项的菜单
    menuBar: MenuBar {
        Menu {
            title: qsTr("文件")
            MenuItem {
                text: qsTr("&O打开")
                onTriggered: console.log("触发打开");
            }
            MenuItem {
                text: qsTr("退出")
                onTriggered: Qt.quit();
            }
        }
    }

    //Content Area

    //按钮，在 Content Area 的中间
    Button {
        text: qsTr("Hello World")
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }
}

点击 Run 运行工程可以看到有两个菜单和一个在中间的按钮。点击「退出」菜单可以关闭应用，如下图所示

当然，也有一些不同的导航方法和控件，例如按键和滑块可供使用。下面的两个例子可以从 Qt Creator 获得，里面演示了使用更多的控件和布局，有兴趣的可以看看：

• 
  你可以将上面链接里提到的代码片段复制并粘贴到 hello world 的例子中，看看 QML 的怎么使用。

处理用户的输入

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }

    MouseArea {
        anchors.fill: parent
        onClicked: parent.color = "blue"
    }
}

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }

    focus: true
    Keys.onPressed: {
        if (event.key == Qt.Key_Return) {
            color = "blue";
            event.accepted = true;
        }
    }
}

关于上面这段代码，可以看到接收到焦点后，当 return 键被按下时，窗口的颜色也会改变。

属性绑定

对象和它们的属性是 QML 文档中定义的图形界面的组成基础。QML 语言允许以各种方式让属性相互关联，实现了高度动态的用户界面。
下面的例子中，各个子矩形的几何大小都被关联（绑定）到了父矩形的几何大小。由于属性的绑定关系，所以当父矩形的几何大小改变之后，各个子矩形的几何大小也会自动被更新。

Rectangle {
    width: 450
    height: 200

    Rectangle {
        width: parent.width / 2
        height: parent.height
    }

    Rectangle {
        width: parent.width / 2
        height: parent.height
        x: parent.width / 2
    }
}

动画

属性也可以通过动画来动态更新。可以使用 QtQuick 提供的各种动画类型来动态改变属性的值。在下面的例子中，一个属性被设置了动画，并且将显示在文本区域：

Rectangle {
    color: "lightgray"
    width: 200
    height: 200

    property int animatedValue: 0
    SequentialAnimation on animatedValue {
        loops: Animation.Infinite
        PropertyAnimation { to: 150; duration: 1000 }
        PropertyAnimation { to: 0; duration: 1000 }
    }

    Text {
        anchors.centerIn: parent
        text: parent.animatedValue
    }
}

运行工程后可以看到，显示的数值会定期循环从0到150，再从150到0地变化。

自定义可重用的 QML 类型

其实 QML 最重要的概念就是类型可重用。一个应用可能包含了多个类似的可视化类型，例如多个按钮等，所以 QML 为了最小化代码拷贝和最大化代码可读性，允许对这些类型进行可重用的定制化。
下面看看例子，假如我们定义了一个新的 Button 类型，并且保存为文件 Button.qml:

// Button.qml
import QtQuick 2.3

Rectangle {
    width: 100; height: 100
    color: "red"

    MouseArea {
        anchors.fill: parent
        onClicked: console.log("Button clicked!")
    }
}

现在上面定义了的 Button 类型就可以多次重复使用了，看一下示例：

// application.qml
import QtQuick 2.3

Column {
    Button { width: 50; height: 50 }
    Button { x: 50; width: 100; height: 50; color: "blue" }
    Button { width: 50; height: 50; radius: 8 }
}

通过上面的示例，可以看到在应用程序中可以组装和重复调用自定义的类型。
这里要注意一下，上面并没有看到显式的导入 Button 类型，因为只要调用和定义在同一路径下就不需要显式的导入。

接下来可以做什么

看完上面的内容，相信已经对 QML 有一定的印象了，但了解得还是很浅，怎么能就这样止步不前？所以请继续大踏步向前吧：