开始使用QML编程(1)
2013-05-28 10:44
633 查看
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++,我们可以有效的将应用程序逻辑和界面逻辑解耦合。![](http://images.cnblogs.com/cnblogs_com/smoozer/201103/201103251851463657.jpg)
最终源码在examples/tutorials/gettingStarted/gsQml目录下. 你或许要先编译一下examples/tutorials/gettingStarted/gsQml/下的C++插件. 编译完后,这个插件会存放在QML文件可以找到的一个目录下。(译注:编译成功后,会在examples/tutorials/gettingStarted/gsQml/plugins/目录下生成FileDialog.dll。)
只需要将QML文件作为qmlviewer的一个参数,就可以运行这个文本编辑器了。本教程的C++部分假设读者具备Qt编译过程的基本知识。
教程章节:
定义一个按钮和一个菜单
实现一个菜单栏
生成一个文本编辑器
美化这个文本编辑器
使用Qt C++扩展QML
定义一个按钮和一个菜单
基本组件—— 一个按钮我们先从生成一个按钮开始。功能上来说,一个按钮有一个鼠标敏感性区域和一个标签。当用户按下,按钮执行动作。
QML中,基本的可视item是Rectangle元素。它有一些可以控制其外观和位置的属性。
[javascript] view plaincopyprint?import 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 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,就会显示出一个带文本标签的灰色矩形。
![](http://images.cnblogs.com/cnblogs_com/smoozer/201103/201103251851464496.jpg)
我们可以使用QML的事件处理来实现按钮的点击功能。QML的事件处理与Qt的signal slot机制非常类似。发出signals,连接到的slots就被调用。
[javascript] view plaincopyprint?Rectangle{
id:simplebutton
...
d449
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" )
}
}
Rectangle{ 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中的代码已经足够了。
[javascript] view plaincopyprint?Rectangle {
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
}
Rectangle { 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标签,自定义它的属性,实现了响应鼠标移动的行为。在这个文本编辑器程序中,我们会不停地重复在一个元素里创建领一个元素。
只有被用作执行操作的组件,按钮才有用处。在下面的章节中,我们很快就会创建一个菜单,包含几个这样的按钮。
![](http://images.cnblogs.com/cnblogs_com/smoozer/201103/201103251851472511.jpg)
转自 http://www.cnblogs.com/smoozer/archive/2011/03/25/1995804.html
相关文章推荐
- Qt Quick 译05 - 开始使用QML编程(2)
- Qt Quick 译05 - 开始使用QML编程(4)
- 开始使用QML编程(3)
- Qt Quick 译05 - 开始使用QML编程(1)
- 开始使用QML编程(4)
- 开始使用QML编程(2)
- Qt Quick 译05 - 开始使用QML编程(3)
- 使用Java开始面向对象的编程
- 从C开始_概览_使用C语言编程的几个步骤
- cesium编程入门(三)开始使用cesium开发
- 今天开始使用unity 5.3 进行学习编程
- 翻译《有关编程、重构及其他的终极问题?》——15.在你的代码中开始使用enum class吧
- 使用Win32API开始openGL编程
- 【VS开发】使用WinPcap编程(2)——打开网络设备并且开始捕获数据包
- QML和C++混合编程--在C++应用程序中使用QML
- 使用MFC开始openGL编程
- 用VS2010构建MASM的编程环境,开始使用MASM(翻译自《Inetl汇编语言程序设计》一书的作者Kip R. Irvine的文章Getting Started with MASM),两种方法搭建IA-32汇编设计环境
- 块代码编程---开始使用块代码
- 使用MFC开始openGL编程
- 项目实战-05: PowerBuilder连接使用oracle11g数据库,开始图形界面编程