本文介绍的是Qt Quick 开始使用QML编程，刚才说又接触Qt Quick，那么简单的介绍以下，本文Qt Quick包含了一个名为QML的声明式语言、Qt Declarative模块和QML Viewer，先来看本文内容。
Getting Started Programming with QML
欢迎来到QML——这个声明式语言的世界！在这节入门指南里，我们将使用QML创建一个简单的文本编辑器程序。读完此节，你应该能做好使用QML和Qt C++开发自己的应用程序的准备了。
Installation
首先，你需要安装包含Qt 4.7，这个包含了Qt Quick的最新的Qt版本。（译注：现在是Qt 4.7.2）安装指南包含了安装介绍以及不同平台的安装要求。
QML to Build User Interfaces
我们要制作的这个程序是个用来加载、保存以及执行一些文本操作的简单的文本编辑器。本指南包含两部分。第一部分包含使用QML中的生命语言来设计程序的布局和行为。使用Qt的Meta-Object-System，我们可以将C++函数暴露为QML元素使用的属性。使用QML和Qt C++，我们可以有效的将应用程序逻辑和界面逻辑解耦合。
最终源码在examples/tutorials/gettingStarted/gsQml目录下. 你或许要先编译一下examples/tutorials/gettingStarted/gsQml/下的C++插件. 编译完后，这个插件会存放在QML文件可以找到的一个目录下。（译注：编译成功后，会在examples/tutorials/gettingStarted/gsQml/plugins/目录下生成FileDialog.dll。）
只需要将QML文件作为qmlviewer的一个参数，就可以运行这个文本编辑器了。本教程的C++部分假设读者具备Qt编译过程的基本知识。
定义一个按钮和一个菜单
基本组件： 一个按钮
我们先从生成一个按钮开始。功能上来说，一个按钮有一个鼠标敏感性区域和一个标签。当用户按下，按钮执行动作。
QML中，基本的可视item是Rectangle元素。它有一些可以控制其外观和位置的属性。
- Codeimport QtQuick 1.0
- Rectangle {
- id: simplebutton
- color: "grey"
- width: 150; height: 75
- Text{
- id: buttonLabel
- anchors.centerIn: parent
- text: "button label"
- }
- }
首先import QtQuick 1.0允许qmlviewer导入我们后来会用到的QML元素。每一个QML文件都必须有这行。注意，import语句中包含了Qt模块的版本。
这个简单的矩形有一个唯一的标识符，simplebutton，绑定到id属性上。罗列出矩形元素的属性，后跟冒号和值，可以将值绑定到对应的属性上。实例中，grey绑定到了color属性上。同样地，也绑定了矩形的widht和height。
Text元素是不可编辑的文本域。我们将它命名为buttonLabel。将值绑定到text属性，可以设置文本域的字符串内容。标签包含在矩形中，为了将其置于中间，我们将Text元素的anchors赋给它的parent，即simplebutton。anchors可能绑定到其他anchors上，从而更方便地分配布局。
我们将代码保存为SimpleButton.qml。将这个文件作为参数传给qmlviewer，就会显示出一个带文本标签的灰色矩形。
我们可以使用QML的事件处理来实现按钮的点击功能。QML的事件处理与Qt的signal slot机制非常类似。发出signals，连接到的slots就被调用。
- CodeRectangle{
- id:simplebutton
- ...
- MouseArea{
- id: buttonMouseArea
- anchors.fill: parent //anchor all sides of the mouse area to the rectangle's anchors
- //onClicked handles valid mouse button clicks
- onClicked: console.log(buttonLabel.text + " clicked" )
- }
- }
我们在simplebutton中包含了一个MouseArea元素。它描述了可以检测到鼠标移动的互动区域。对我们的按钮，我们将整个MouseArea的anchors设置为它的parent，simplebutton。语法anchors.fill是访问anchors属性集中的特定的fill属性的一种方式。QML使用基于anchor的布局，一个item可以anchor到另外一个上，创建健壮的布局。
鼠标在 这个特定的MouseArea边界内移动时，MouseArea可以调用很多signal handlers。其中一个是onClicked，当可接受的鼠标按钮被点下——默认是左边的按键，这个signal handler就会被调到。我们可以绑定动作到这个handler上。在我们的例子中，当鼠标区域被按下时，console.log()会输出文字。console.log()函数对调试和输出文字来说，都是一个有用的工具。
在屏幕上显示一个按钮来，并在鼠标点击时输出文字，SimpleButton.qml中的代码已经足够了。
- CodeRectangle {
- id: button
- ...
- property color buttonColor: "lightblue"
- property color onHoverColor: "gold"
- property color borderColor: "white"
- signal buttonClick()
- onButtonClick: {
- console.log(buttonLabel.text + " clicked" )
- }
- MouseArea{
- onClicked: buttonClick()
- hoverEnabled: true
- onEntered: parent.border.color = onHoverColor
- onExited: parent.border.color = borderColor
- }
- //determines the color of the button by using the conditional operator
- color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
- }
Button.qml中是一个全功能的按钮。本文中的代码片段省略了一些代码。这些代码用省略号表示，它们要么已经在前面的章节中介绍过了，要么与现在讨论的代码无关。 可以使用属性 类型名字的语法来声明自定义属性。代码中，声明的buttonColor ，是一个color类型的属性，并绑定了值“lightblue“。buttonColor 后来用到一个条件运算中，决定按钮的填充颜色。除了使用冒号将值绑定到属性外，也可以使用等号赋值。自定义属性可以被Rectangle范围以外的内部items访问到。
基本的QML类型有int、string,、real, 还有variant。 绑定onEntered和onExited signal handlers 到colors上，当鼠标在按钮上悬停时，按钮的边界会变成黄色；当鼠标退出鼠标域时会变回原来的颜色。 把关键字signal 放到信号名字前面，Button.qml声明了一个buttonClick() 信号。所有的信号都有自动生成的、名字以on开头的handler。结果是，onButtonClick是buttonClick的handler。onButtonClick指定了要执行的操作。我们的例子中，onClicked只会调用onButtonClick来显示文字。
onButtonClick让外部的对象很容易地访问到Button的鼠标区域。例如，items可能有多个MouseArea声明，buttonClick信号可以更好地区分这几个MouseArea的signal handlers之间。 在QML中实现item，并处理基本的鼠标移动，这样的基本知识我们已经具备了。
我们在Rectangle中创建了aText标签，自定义它的属性，实现了响应鼠标移动的行为。在这个文本编辑器程序中，我们会不停地重复在一个元素里创建领一个元素。 只有被用作执行操作的组件，按钮才有用处。在下面的章节中，我们很快就会创建一个菜单，包含几个这样的按钮。
小结：详解 Qt Quick 开始使用QML编程的内容介绍完了，希望本文能帮你解决问题，想要更多资料请参考编辑推荐！
