作者介绍
豆子(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