Qt 5入门指南之Qt Quick编程示例


使用Qt创建应用程序是十分简单的。考虑到你的使用习惯，我们编写了两套教程来实现两个相似的应用程序，但是使用了不同的方法。在开始之前，请确保你已经下载了QtSDK的商业版本或者开源版本，并且你也已经熟悉了Qt的开发工具。QtSDK提供了QtCreator集成开发环境使得开发Qt的应用程序十分简单。

用户界面的选择

除了直观上知道Qt是跨平台的，提供了包括线程，网络通信以及视频回放和网络摄像头等的跨平台抽象外，Qt提供了两种独立的方法创建用户界面。

QtQuick模块为创建流畅的、活生生的用户界面提供了一种标记语言。这种方式适合那些需要动画元素的界面，以及应用程序主要运行在小屏幕和多点触控的设备上的场景。

QtWidgets模块针对传统桌面提供了更多的支持，和目标平台做了更多的集成，无论目标平台是MacOSX，Windows，KDE还会Gnome。它是一个非常高效的基于C++的类库，包含了很多常见的用户界面组件，你可以非常容易的为这些已存在的组件扩展新的功能。

你选择那个模块来创建用户界面取决于你想创建怎样的应用程序。其它的方法在余下的Qt库中都是一样的，所以你可以尽可能的将应用程序中逻辑处理的代码写得更加独立一些。当你熟悉了下面两个示例，你可以再做决定选择哪一个模块来创建用户界面。对于更加详细的信息，可以查看用户界面信息。

 

Ubuntu 环境下Gtk与QT编译环境安装与配置

 

Linux系统下QT环境搭建

 

Ubuntu下QT控制台程序无法运行的解决方案以及XTerm的配置方法

 

Ubuntu 10.04下QT4.7.4移植详解

 

Ubuntu 14.04下安装部署Qt5开发环境

 

教程

这里有两个用于创建两个相似应用程序的例子。一个是使用QtQuick创建用户界面，而另一个则是使用QtWidgets来创建用户界面。

 使用QtQuick开始编程

欢迎来到QML的世界。在这个示例中我们将会使用QML创建一个简单的文本编辑器应用程序。在阅读完这个指南之后，你应该可以使用QML和QtC++开发自己的应用程序。

QML构建用户界面

本应用程序是一个简单的文本编辑器，可以加载、保存和执行一些文本的操作。这个指南将会包含两个部分。第一部分将会涉及到应用程序的布局以及使用QML语言。在第二部分，我们将会使用QtC++实现文本的加载和保存。使用Qt的元对象系统我们可以将C++的功能作为QML元素的属性使用。使用QML和QtC++，我们可以将界面逻辑和应用程序逻辑分离开。

最终的源代码在examples/tutorials/gettingStartedQml目录。你也许需要先编译examples/tutprials/gettingStartedQml/filedialog目录下的C++插件。这一步会将C++插件放在QML能够找到的目录下。要启动这个应用程序，仅仅需要使用qmlscene工具，将QML作为参数传递给这个工具。C++的部分假设了阅读者已经掌握了基本的Qt编译过程。

教程章节：

  1. 定义按钮和菜单

  2. 实现菜单栏

  3. 编译文本编辑器

  4. 装饰文本编辑器

  5. 使用QtC++扩展QML

定义一个按钮和菜单

基本组件——按钮

我们以构建一个按钮开始我们的文本编辑器。在功能上，按钮有一个鼠标敏感区域和一个标签。当用户点击按钮的时候，按钮执行一个动作。

在QML中，最基本的可视化单元就是矩形(Rectangle)元素。矩形元素具有控制元素外观和位置的属性。

首先，导入QtQuick2.0允许qmlscene工具加载QML元素以便稍后使用。这一行代码在所有的QML文件中都存在。需要注意的是，我们导入Qt的模块的时候也导入了版本号。

这个简单的矩形有一个唯一的标签”simplebutton”，这就是id属性。矩形元素的属性是通过依次罗列属性，中间以分号间隔，然后就是属性的值。在示例代码中，”grey”颜色就绑定到了矩形的颜色属性。类似地，我们也绑定了该矩形的高度和宽度。

Text元素是一个不可编辑的文本区域。我们给这个文本框命名为”buttonlabel”。我们通过将值绑定到”text”属性来设置该文本框的文字。这个文本框在矩形的中间，我们将文本框的”anchors”设置为其父亲，也就是前面提到的simplebutton。Anchors也可以绑定到其它元素的anchors，使得布局更加的简单。

我们将这些代码保存为SimpleButton.qml。使用这个文件的文件名作为参数调用qmlscene工具，将会出现如下的效果：

要实现按钮的功能，我们可以使用QML的事件处理机制。QML的事件处理机制和Qt的信号-槽机制十分类似。信号被发射

然后关联的槽函数被调用。

在我们的simplebutton矩形中，我们包含了一个MouseArea元素。MouseArea元素描述了可交互的区域，也就是鼠标的移动会被检测的区域。在这个例子中，我们将MouseArea的anchor设置为它的父亲，也就是前面提到的simplebutton。Anchors.fill是获取指定属性的一种语法表达方式。fill是属性簇anchors中的一个特定属性。QML使用了基于anchor的布局，元素可以anchor其它的元素，创建健壮的布局。

当鼠标在MouseArea区域中移动时MouseArea有许多事件处理者。其中的一个事件处理者就是onClicked，该事件处理会在允许鼠标点击的区域中点击鼠标时候被调用，默认是左键单击。我们可以将一个动作绑定到onClicked处理句柄。在我们的示例中，当鼠标点击时，console.log()输出文本。Console.log()函数是一个有用的调试输出函数。

如下的代码足够完成显示按钮且在鼠标单击的时候输出文本。

一个功能齐全的按钮在Button.qml中。示例代码中有部分被省略了，因为这些代码要么在之前介绍过了，要么就是与本章介绍的内容不是很相关。

我们可以使用属性类型名称的语法来自定义属性。在示例代码中，buttonColor属性就是自定义的并且被赋值为”lightblue”。buttonColor在后面就被使用到了，用来根据不同操作填充不同的颜色。值得注意的是，属性的赋值使用的是”=”，而属性的值绑定使用的则是”:”。自定义的属性使得内部元素的可见范围可以超出矩形的范围。QML基本类型有int，string，real和variant。通过绑定onEntered和onExited信号处理到颜色上，当鼠标停留在按钮之上，按钮的边框将会变为黄颜色，并且在鼠标离开按钮的时候恢复为原来的颜色。

我们通过将signal关键字放在信号名称之前，自定义了一个buttonClick()信号在Button.qml中，所有的信号的处理者都是自动被创建的，这是通过简单在信号的名字前面加上”on”这个单词。显然，onButtonClick就是buttonClick的处理者。onButtonClick会被赋予一些动作。在我们的按钮示例中，onClicked鼠标处理者将会简单的调用onButtonClick，功能就是现实一个文本。

onButtonClick使得外部对象可以十分轻易的获取按钮的鼠标区域。例如：将设有许多的元素，这些元素拥有许多的MouseArea，那么一个buttonClick信号可以在许多的MouseArea做出区分，使得分别处理几个MouseArea更加简单。

我们现在已经具备了基本的知识：在QML中实现基本元素并可以处理鼠标移动事件。我们在一个巨型中创建一个文本框，自定义了属性，针对鼠标移动实现了相应的处理。在元素中创建元素的思想贯穿着整个示例。

现在该按钮还没有什么用，除非他作为组件可以执行一些动作。在下面一节，我们将会快速的创建一个菜单，包含几个这样的按钮。

创建一个菜单页 

在这一阶段，我们将会介绍如何在一个单独的QML文件中创建元素并指定动作。在这一节，我们将会介绍如何导入QML元素以及如何使用已经存在的组件构建新的组件。

菜单显示了一个列表内容，每一个元素都用执行一个特殊动作的功能。在QML中，我们可以使用几种方式创建菜单。首先我们会创建一个包含按钮的菜单，每一个按钮执行不同的动作。菜单的代码在文件FileMenu.qml中。

上面的语法展示了如何导入关键字。这里需要使用JavaScript文件，或者使用不在同一目录下的QML文件。因为Button.qml文件和FileMenu.qml文件在同一个目录下，因此我们无需导入Button.qml文件就可以使用它。我们可以直接通过声明Button()创建按钮，类似Rectangle的声明。

在FileMenu.qml文件中声明了三个Button元素。它们都声明在一个Row元素内。该元素将其子元素水平放置。Button是在Button.qml文件中声明的，这种用法和上一节的用法一致。在新创建的button中，我们可以将其属性绑定为新值，覆盖它们在Button.qml中绑定的默认值。exitButton按钮在被按下的时候整个应用程序就会退出。值得注意的是：在Button.qml中定义的信号onButtonClick将会在FileMenu.qml中被调用，除了exitButton的onButtonClick事件处理者。

Row是在一个Rectangle中声明的，创建了一个用于防止按钮的矩形容器。这个矩形创建了一个间接的方式用于组织在一个菜单中的按钮行。编辑菜单的声明和之前菜单声明十分类似。菜单中的按钮的标签为：Copy，Paste和SelectAll。

更多详情见请继续阅读下一页的精彩内容：

  • 1
  • 2
  • 3
  • 下一页

相关内容