首页 Qt 学习之路 2 Qt 学习之路 2(79):QML 组件

Qt 学习之路 2(79):QML 组件

14 2.4K

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

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

import QtQuick 2.0

Rectangle {
    id: root

    property alias text: label.text
    signal clicked

    width: 116; height: 26
    color: "lightsteelblue"
    border.color: "slategrey"

    Text {
        id: label
        anchors.centerIn: parent
        text: "Start"
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            root.clicked()
        }
    }
}

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

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

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360
    Button {
        id: button
        x: 12; y: 12
        text: "Start"
        onClicked: {
            status.text = "Button clicked!"
        }
    }

    Text {
        id: status
        x: 12; y: 76
        width: 116; height: 26
        text: "waiting ..."
        horizontalAlignment: Text.AlignHCenter
    }
}

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

app
 |- QML
 |   |- main.qml
 |- components
     |- Button.qml

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

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

14 评论

welliam 2014年2月21日 - 16:24

main.qml文件
Rectangle {
...
Button {
...
onClicked: { //注意这里
status.text = "Button clicked!"
}
...
}
}
Button.qml文件
Rectangle {
...
signal clicked //注意这里
...
}
这里有个知识点没说吧,点击后Button发出clicked信号,然后通过onClicked处理,可以理解为信号—槽,将信号首字母大写并在前面加on,可以自动实现调用。比如这里定义信号可以随便定义个什么名字:我定义个 signal myclicked也可以,但是同时也需要修改main.qml文件里的处理,将onClicked改为onMyclicked。

回复
delifue 2014年8月5日 - 09:17

突然发现自定义组件的文件首字母要大写

回复
豆子 2014年8月5日 - 21:16

是的,这个在文档里面有明确的要求,参考 Defining Object Types through QML Documents

回复
xxdra 2016年6月21日 - 22:22

我说为啥一直错

回复
starter 2015年6月2日 - 15:21

初学者,正纠结呢,看到了豁然开朗,谢谢

回复
LuckyZhan 2014年11月11日 - 23:35

本人刚接触qt,因为需要写一些图形界面的桌面应用,因为QT界面开发比较快所以选择qt,后来发现在有qss和qml两种方案,貌似qml是将界面和逻辑彻底分离了,不知道两者交互是否困难,还有就是听说qml存在内存溢出的问题,虽然作为桌面小应用这个问题很小,但是还是想问一下,想听听卤煮在qss和qml优缺点上的观点,感谢卤煮的回复。

回复
豆子 2014年11月12日 - 14:44

QSS 主要用于修饰 QtWidgets 的样式,作用类似于 CSS;QML 主要是替换 QtWidgets 的,所以二者并不一样:QSS 要结合 QtWidgets 使用,QML 则是单独使用。QML 现在还是发展初期,很多复杂的组件都没有提供,比如树之类,但是其实现的动画效果要比 QtWidgets 方便很多。如果是简单的演示性质的程序,QML 也是合适的;复杂的企业级应用,建议选择 QtWidgets,组件方面可选性要好一些。

回复
wangyan 2015年8月19日 - 10:33

豆子老师,您好!
我想把已完成的QT桌面程序(使用了QWT)转变成BS模式的程序,有没有什么好的方法吗?

回复
豆子 2015年8月21日 - 10:22

什么是变成 BS 模式?BS 以网页浏览为主,一般都是需要重新编写的

回复
wangyan 2015年8月21日 - 10:31

豆子老师,我想达到的效果是:在浏览器中输入网址,然后就能在网页中显示出来qt编写的界面。这两天在网上搜索了一些资料,比如http://blog.csdn.net/myaccella/article/details/7009086,也不知道能不能实现我的想法,还在摸索中,我现在的想法是先把qt界面嵌入网页中,然后弄个tomcat,豆子老师不知道我的想法能不能实现

回复
豆子 2015年8月26日 - 13:13

曾经有一个类库可以将 Qt 程序嵌入网页,不过不清楚现在还在不在开发。但是这种技术是在太小众了,强烈不推荐使用。

回复
wangyan 2015年8月26日 - 13:38

嗯,经过前两天的研究,还是放弃了,没找到能嵌入到非webkit内核的浏览器中的方法。O(∩_∩)O谢谢了 豆子老师

马凌 2016年5月10日 - 17:42

新手看您的博客,有可能像我一样想都不想粘贴运行,结果什么都没有出来,才明白是main.qml中没有引入import QtQuick.Window 2.2(或者其他版本号)
非常感谢您写了这么详细的教程,自己受益匪浅!

回复
yyy 2017年3月28日 - 17:51

报错怎么办?自定义的Button 引用就not available

回复

回复 LuckyZhan 取消回复

关于我

devbean

devbean

豆子,生于山东,定居南京。毕业于山东大学软件工程专业。软件工程师,主要关注于 Qt、Angular 等界面技术。

主题 Salodad 由 PenciDesign 提供 | 静态文件存储由又拍云存储提供 | 苏ICP备13027999号-2