qml mousearea 点击其他地方_Qt 学习之路 2：QML 组件

作者介绍

---

豆子(DevBean)，生于山东，定居南京。毕业于山东大学软件工程专业。Java系的Qt爱好者！

博客地址：

https://www.devbean.net/2014/01/qt-study-road-2-qml-component/

导语

---

QML 可以由基本元素组合成一个复杂的元素，方便以后我们的重用。这种组合元素就被称为组件。组件就是一种可重用的元素。QML 提供了很多方法来创建组件。不过，本章我们只介绍一种方式：基于文件的组件。基于文件的组件将 QML 元素放置在一个单独的文件中，然后给这个文件一个名字。以后我们就可以通过这个名字来使用这个组件。例如，如果有一个文件名为 Button.qml，那么，我们就可以在 QML 中使用Button { … }这种形式。

正文

---

下面我们通过一个例子来演示这种方法。我们要创建一个带有文本说明的Rectangle，这个矩形将成为一个按钮。用户可以点击矩形来响应事件。

 1import QtQuick 2.0
 2
 3Rectangle {
 4    id: root
 5
 6    property alias text: label.text
 7    signal clicked
 8
 9    width: 116; height: 26
10    color: "lightsteelblue"
11    border.color: "slategrey"
12
13    Text {
14        id: label
15        anchors.centerIn: parent
16        text: "Start"
17    }
18    MouseArea {
19        anchors.fill: parent
20        onClicked: {
21            root.clicked()
22        }
23    }
24}

我们将这个文件命名为 Button.qml，放在 main.qml 同一目录下。这里的 main.qml 就是 IDE 帮我们生成的 QML 文件。此时，我们已经创建了一个 QML 组件。这个组件其实就是一个预定义好的Rectangle。这是一个按钮，有一个Text用于显示按钮的文本；有一个MouseArea用于接收鼠标事件。用户可以定义按钮的文本，这是用过设置Text的text属性实现的。为了不对外暴露Text元素，我们给了它的text属性一个别名。signal clicked给这个Button一个信号。由于这个信号是无参数的，我们也可以写成signal clicked()，二者是等价的。注意，这个信号会在MouseArea的clicked信号被发出，具体就是在MouseArea的onClicked属性中调用个这个信号。

下面我们需要修改 main.qml 来使用这个组件：

 1import QtQuick 2.0
 2
 3Rectangle {
 4    width: 360
 5    height: 360
 6    Button {
 7        id: button
 8        x: 12; y: 12
 9        text: "Start"
10        onClicked: {
11            status.text = "Button clicked!"
12        }
13    }
14
15    Text {
16        id: status
17        x: 12; y: 76
18        width: 116; height: 26
19        text: "waiting ..."
20        horizontalAlignment: Text.AlignHCenter
21    }
22}

在 main.qml 中，我们直接使用了Button这个组件，就像 QML 其它元素一样。由于 Button.qml 与 main.qml 位于同一目录下，所以不需要额外的操作。但是，如果我们将 Button.qml 放在不同目录，比如构成如下的目录结果：

1app
2 |- QML3 |   |- main.qml4 |- components
5     |- Button.qml6

那么，我们就需要在 main.qml 的import部分增加一行import ../components才能够找到Button组件。

有时候，选择一个组件的根元素很重要。比如我们的Button组件。我们使用Rectangle作为其根元素。Rectangle元素可以设置背景色等。但是，有时候我们并不允许用户设置背景色。所以，我们可以选择使用Item元素作为根。事实上，Item元素作为根元素会更常见一些。

相关文章

---

Qt 学习之路 2：QML 语法

Qt 学习之路 2：QML 和 QtQuick 2

第4篇 Qt Quick入门教程之基础(四)QML语法2

第3篇 Qt Quick入门教程之基础(三)QML语法1