Qt Quick 事件处理之信号与槽

最新推荐文章于 2024-04-08 15:33:57 发布

原创

最新推荐文章于 2024-04-08 15:33:57 发布 · 495 阅读

3 ·

CC 4.0 BY-SA版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

前面两篇文章《QML 语言基础》和《Qt Quick 简单教程》中我们介绍了 QML 语言的基本语法和 Qt Quick 的常见元素，亲们，通过这两篇文章，您应该已经可以完成简单的 Qt Quick 应用了。接下来呢，哈，我们要介绍 Qt Quick 中一个灰常灰常重要的主题：事件处理。这将是比较长长长长的一篇，哦，不还有后续好几篇……废话少说，还是谈正事儿吧兄弟姐妹们。

本文是作者 Qt Quick 系列文章中的一篇，其它文章在这里：

GUI 应用都是基于事件的（同学，这么说对吗？），不管是用 C++ 还是用 QML ，你的应用都要处理事件，否则的话，哼哼，要你好看！当然当然，你也可以什么事儿不干，就搭个静态界面放那里欣赏……

Qt Quick 最大的一个特点，是与 Qt 元对象系统的结合；而这里边，我们熟稔的，鼎鼎大名大名鼎鼎的，要不断打交道的，就是信号与槽了。历史是割不断的，继承与发展才是正确的价值观……，了解过 Qt 的开发者一定对信号与槽印象深刻。在 QML 中，在 Qt Quick 中，要想妥善的处理各种事件，同样离不开信号与槽。所以呢，在介绍具体的事件之前，我们先要介绍 QML 中如何使用信号与槽。

为了演示本文的示例，我们先介绍一个工具： qmlscene 。

qmlscene 工具

这是 Qt 框架提供的便利工具，使用它，你可以不用建立项目不用撰写 C++ 代码，就可以看到你编写的 qml 文件的效果。我们以 Windows 7 系统为例， qmlscene 需要在命令行窗口中使用。你可以这样打开 Qt 自带的命令行开发环境，参考图 1 找到命令行环境的快捷方式：

图 1 Qt 命令行环境的快捷方式

一旦你打开了命令行工具，它会帮你设置好 Qt 需要的环境变量，敲一个 qmake 命令试试吧。如和图 2 所示：

图 2 Qt 命令行开发环境

如果你想知道 qmlscene 工具的详细用法，请输入 qmlscene --help 命令。如图 3 ：

图 3 qmlscene 的帮助

现在，使用 cd 命令切换到你存放 qml 文档的目录下，就可以验证 qml 的效果了。只需要执行这样的命令： qmlscene yourapp.qml 。当然，yourapp.qml 要替换为你实际的 qml 文档的名字。我这里只是示例。如果你直接输入 qmlscene 命令来执行，那么它会打开一个文件选择对话框，让你选择一个 qml 文档，当你选择了之后呢，该文档对应的界面就会显示出来。我建议你使用 qmlscene yourapp.qml 这种方式，无它，唯快尔。

来看一个简单的 Hello World ，qml 文档是 hello_world.qml ，内容如下：

import QtQuick 2.0import QtQuick.Controls 1.1Rectangle {    width: 320;    height: 240;    color: "gray";        Text {        anchors.centerIn: parent;        text: "Hello World!";        color: "blue";        font.pixelSize: 32;    }}

在命令行环境执行 qmlscene hello_world.qml ，效果如图 4 所示：

图 4 使用 qmlscene 执行 Hello World 示例

好啦， qmlscene 的介绍到此为止，下面我们来看信号与槽了。

连接 QML 类型的已知信号

我们先看一个简单的示例， qml 中只有一个退出按钮，点击退出应用。 qml 文档为 button_quit.qml ，内容如下：

import QtQuick 2.0import QtQuick.Controls 1.1Rectangle {    width: 320;    height: 240;    color: "gray";        Button {        text: "Quit";        anchors.centerIn: parent;        onClicked: {            Qt.quit();        }    }}

使用 qmlscene 执行 button_quit.qml 效果如图 5 所示：

图 5 button_quit 示例效果

现在看看代码有何特别之处。其实在《Qt on Android: Qt Quick 简单教程》中我们已经见过类似的代码了：

onClicked:{}

对，就是这个 onClicked ，其实就包含了 QML 中使用信号与槽的一般形式：信号处理器。

信号处理器

信号处理器，其实等价于 Qt 中的槽。但是我们没有看到类似 C++ 中的明确定义的函数……没错，就是这样，你的的确确只看到了一对花括号！对啦，这是 JavaScript 中的代码块。其实呢，你可以理解为它是一个匿名函数。而 JavaScript 中的函数，其实具名的代码块。函数的好处是你可以在其它地方根据名字调用它，而代码块的好处是，除了定义它的地方，没人能调用它，一句话，它是私有的。代码块就是一系列语句的组合，它的作用就是使语句序列一起执行。

让我们回头再看信号处理器，它的名字还有点儿特别，一般是 on{Signal} 这种形式。在上节的示例中， Button 元素有一个名为 clicked() 的信号，我们提供的信号处理器是酱紫的：

        onClicked: {            Qt.quit();        }

非常简单吧，仅仅是调用 Qt.quit() 来退出应用而已。

Qt 对象是 Qt Quick 导出到 QML 环境中的对象，它的 quit() 方法退出应用。还有很多其它的方法，比如 rgba() 用于构造一个颜色（color类型）， md5() 用来计算一段数据的 MD5 值……

你看到了，当信号是 clicked() 时，信号处理器就命名为 onClicked 。就这么简单，以 on 起始

最低0.47元/天解锁文章