Qt Quick 译05 - 开始使用QML编程（1）

Getting Started Programming with QML

欢迎来到QML——这个声明式语言的世界！在这节入门指南里，我们将使用QML创建一个简单的文本编辑器程序。读完此节，你应该能做好使用QML和Qt C++开发自己的应用程序的准备了。

Installation

首先，你需要安装包含Qt 4.7，这个包含了Qt Quick的最新的Qt版本。（译注：现在是Qt 4.7.2）安装指南包含了安装介绍以及不同平台的安装要求。

 

Qt Quick包含了一个名为QML的声明式语言、Qt Declarative模块和QML Viewer。

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编译过程的基本知识。

 

教程章节：

1. 定义一个按钮和一个菜单
2. 实现一个菜单栏
3. 生成一个文本编辑器
4. 美化这个文本编辑器
5. 使用Qt C++扩展QML

定义一个按钮和一个菜单

基本组件—— 一个按钮

我们先从生成一个按钮开始。功能上来说，一个按钮有一个鼠标敏感性区域和一个标签。当用户按下，按钮执行动作。

 

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标签，自定义它的属性，实现了响应鼠标移动的行为。在这个文本编辑器程序中，我们会不停地重复在一个元素里创建领一个元素。

 

只有被用作执行操作的组件，按钮才有用处。在下面的章节中，我们很快就会创建一个菜单，包含几个这样的按钮。