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

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

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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 来使用这个组件:

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 放在不同目录,比如构成如下的目录结果:

 
 
1
2
3
4
5
app
|- QML
|   |- main.qml
|- components
     |- Button.qml

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

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

Qt 学习之路 2(79):QML 组件的更多相关文章

  1. Qt 学习之路 2(76):QML 和 QtQuick 2

    Home / Qt 学习之路 2 / Qt 学习之路 2(76):QML 和 QtQuick 2 Qt 学习之路 2(76):QML 和 QtQuick 2  豆子  2013年12月18日  Qt ...

  2. Qt 学习之路 2(30):Graphics View Framework

    Qt 学习之路 2(30):Graphics View Framework 豆子 2012年12月11日 Qt 学习之路 2 27条评论 Graphics View 提供了一种接口,用于管理大量自定义 ...

  3. Qt 学习之路 2(6):Qt 模块简介

    Home / Qt 学习之路 2 / Qt 学习之路 2(6):Qt 模块简介  豆子  2012年8月26日  Qt 学习之路 2  20条评论 Qt 5 与 Qt 4 最大的一个区别之一是底层架构 ...

  4. Qt 学习之路 2(3):Hello, world!

     豆子  2012年8月22日  Qt 学习之路 2  107条评论 想要学习 Qt 开发,首先要搭建 Qt 开发环境.好在现在搭建 Qt 开发环境还是比较简单的.我们可以到 Qt 官方网站找到最新版 ...

  5. 《Qt 学习之路 2》目录

    <Qt 学习之路 2>目录 <Qt 学习之路 2>目录  豆子  2012年8月23日  Qt 学习之路 2  177条评论 <Qt 学习之路 2>目录 序 Qt ...

  6. Qt 学习之路 2(73):Qt 线程相关类

    Home / Qt 学习之路 2 / Qt 学习之路 2(73):Qt 线程相关类 Qt 学习之路 2(73):Qt 线程相关类  豆子  2013年11月26日  Qt 学习之路 2  7条评论 希 ...

  7. Qt 学习之路 2(72):线程和事件循环

    Qt 学习之路 2(72):线程和事件循环 <理解不清晰,不透彻>  --  有需求的话还需要进行专题学习  豆子  2013年11月24日  Qt 学习之路 2  34条评论 前面一章我 ...

  8. Qt 学习之路 2(60):使用 DOM 处理 XML

    Qt 学习之路 2(60):使用 DOM 处理 XML  豆子  2013年8月3日  Qt 学习之路 2  9条评论 DOM 是由 W3C 提出的一种处理 XML 文档的标准接口.Qt 实现了 DO ...

  9. Qt 学习之路 2(54):剪贴板

    Qt 学习之路 2(54):剪贴板 豆子 2013年6月8日 Qt 学习之路 2 2条评论 剪贴板的操作经常和前面所说的拖放技术在一起使用.大家对剪贴板都很熟悉.我们可以简单地把它理解成一个数据存储池 ...

  10. Qt 学习之路 2(53):自定义拖放数据

    Qt 学习之路 2(53):自定义拖放数据 豆子  2013年5月26日  Qt 学习之路 2  13条评论上一章中,我们的例子使用系统提供的拖放对象QMimeData进行拖放数据的存储.比如使用QM ...

随机推荐

  1. str、__str__ 、repr、 __repr__、``

    内建函数str()和repr() 或反引号操作符(``)可以方便地以字符串的方式获取对象的内容.类型.数值属性等信息. str()函数得到的字符串可读性好(故被print调用),而结果通常无法用eva ...

  2. 使用python实现HMM

    一直想用隐马可夫模型做图像识别,但是python的scikit-learn组件包的hmm module已经不再支持了,需要安装hmmlearn的组件,不过hmmlearn的多项式hmm每次出来的结果都 ...

  3. smali 语法基础

    dalvik字节码有两种类型,原始类型和引用类型.对象和数组是引用类型,其它都是原始类型. V  void Z  boolean B  byte S  short C  char I  int F   ...

  4. 2016021801 - Java内存区域学习笔记

    根据<深入理解java虚拟机>学习归纳整理学习笔记 程序计数器 用途:当前线程的字节码文件的行号指示器.(当前机场负责控制飞机降落的空管员:当前线程表示当前机场, 所执行的字节码等同于被等 ...

  5. Powerdesigner数据库建模--概念模型--ER图【转】

    转自http://www.cnblogs.com/dekevin/archive/2012/07/18/2596745.html Powerdesigner数据库建模--概念模型--ER图   目标: ...

  6. [BZOJ 3942] [Usaco2015 Feb] Censoring 【KMP】

    题目链接:BZOJ - 3942 题目分析 我们发现,删掉一段 T 之后,被删除的部分前面的一段可能和后面的一段连接起来出现新的 T . 所以我们删掉一段 T 之后应该接着被删除的位置之前的继续向后匹 ...

  7. h.264并行解码算法3D-Wave实现(基于多核共享内存系统)

    3D-Wave算法是2D-Wave的扩展.3D-Wave相对于只在帧内并行的2D-Wave来说,多了帧间并行,不用等待前一帧完成解码后才开始下一帧的解码,而是只要宏块的帧间参考部分以及帧内依赖宏块解码 ...

  8. mac下设置命令别名

    项目使用了gerrit,每次push代码都需要执行 git push origin HEAD:refs/for/master 为了简便,使用了alias命令来控制台下使用下面的命令简化了提交. ali ...

  9. ajax post data 获取不到数据,注意 content-type的设置

    ajax post  data  获取不到数据,注意 content-type的设置 .post/get关于 jQuery data 传递数据.网上各种获取不到数据,乱码之类的.好吧今天我也遇到了,网 ...

  10. 14.6.3.3 Making the Buffer Pool Scan Resistant

    14.6.3.3 Making the Buffer Pool Scan Resistant 相比使用一个严格的LRU算法,InnoDB 使用一个技术来最小化数据总量 带入到buffer pool 而 ...