Qt 学习之路 2(79):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
用于接收鼠标事件。用户可以定义按钮的文本,这是用过设置Text
的text
属性实现的。为了不对外暴露Text
元素,我们给了它的text
属性一个别名。signal clicked
给这个Button
一个信号。由于这个信号是无参数的,我们也可以写成signal clicked()
,二者是等价的。注意,这个信号会在MouseArea
的clicked
信号被发出,具体就是在MouseArea
的onClicked
属性中调用个这个信号。
下面我们需要修改 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 组件的更多相关文章
- 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 ...
- Qt 学习之路 2(30):Graphics View Framework
Qt 学习之路 2(30):Graphics View Framework 豆子 2012年12月11日 Qt 学习之路 2 27条评论 Graphics View 提供了一种接口,用于管理大量自定义 ...
- Qt 学习之路 2(6):Qt 模块简介
Home / Qt 学习之路 2 / Qt 学习之路 2(6):Qt 模块简介 豆子 2012年8月26日 Qt 学习之路 2 20条评论 Qt 5 与 Qt 4 最大的一个区别之一是底层架构 ...
- Qt 学习之路 2(3):Hello, world!
豆子 2012年8月22日 Qt 学习之路 2 107条评论 想要学习 Qt 开发,首先要搭建 Qt 开发环境.好在现在搭建 Qt 开发环境还是比较简单的.我们可以到 Qt 官方网站找到最新版 ...
- 《Qt 学习之路 2》目录
<Qt 学习之路 2>目录 <Qt 学习之路 2>目录 豆子 2012年8月23日 Qt 学习之路 2 177条评论 <Qt 学习之路 2>目录 序 Qt ...
- Qt 学习之路 2(73):Qt 线程相关类
Home / Qt 学习之路 2 / Qt 学习之路 2(73):Qt 线程相关类 Qt 学习之路 2(73):Qt 线程相关类 豆子 2013年11月26日 Qt 学习之路 2 7条评论 希 ...
- Qt 学习之路 2(72):线程和事件循环
Qt 学习之路 2(72):线程和事件循环 <理解不清晰,不透彻> -- 有需求的话还需要进行专题学习 豆子 2013年11月24日 Qt 学习之路 2 34条评论 前面一章我 ...
- Qt 学习之路 2(60):使用 DOM 处理 XML
Qt 学习之路 2(60):使用 DOM 处理 XML 豆子 2013年8月3日 Qt 学习之路 2 9条评论 DOM 是由 W3C 提出的一种处理 XML 文档的标准接口.Qt 实现了 DO ...
- Qt 学习之路 2(54):剪贴板
Qt 学习之路 2(54):剪贴板 豆子 2013年6月8日 Qt 学习之路 2 2条评论 剪贴板的操作经常和前面所说的拖放技术在一起使用.大家对剪贴板都很熟悉.我们可以简单地把它理解成一个数据存储池 ...
- Qt 学习之路 2(53):自定义拖放数据
Qt 学习之路 2(53):自定义拖放数据 豆子 2013年5月26日 Qt 学习之路 2 13条评论上一章中,我们的例子使用系统提供的拖放对象QMimeData进行拖放数据的存储.比如使用QM ...
随机推荐
- Dalvik虚拟机进程和线程的创建过程分析
从前面Dalvik虚拟机的运行过程分析一文可以知道,Dalvik虚拟机除了可以执行Java代码之外,还可以执行Native代码,也就是C/C++函数. 这些C/C++函数在执行的过程中,又可以通过本地 ...
- 【转】mysqldump
原文地址:http://blog.chinaunix.net/uid-16844903-id-3411118.html 导出 导出全库备份到本地的目录 mysqldump -u$USER -p$PAS ...
- ”ENV_IS_EMBEDDED“解惑以及相关的移植实验
一.概述( ENV_IS_EMBEDDED的目的) 经典资料 认识 ENV_IS_EMBEDDED只有在CFG_ENV_IS_IN_FLASH或者CFG_ENV_IS_IN_NAND定义了才有 ...
- C# Http POST get
using System.IO;using System.Net; /// <summary> /// HttpWebRequest发送Post请求 /// < ...
- JAVA面试题相关基础知识
1.面向对象的特征有哪些方面 ①抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用部分细节 ...
- Ed Burns谈HTTP/2和Java EE Servlet 4规范
在2015年JavaLand大会上,Ed Burns展示了Java EE Servlet 4.0规范(JSR 369)的概要,演讲的重点在于Java EE平台对HTTP/2的支持.HTTP/2旨在解决 ...
- Unity与IOS交互
Unity IOS交互 @By 广州小龙 QQ群:63438968 环境:Mac os 10.9.2 Unity 4.2.1f4 Xcode 5.0.2 Unity IOS的交互我写过一个教程 ...
- Haskell缩进规则
Haskell也是使用缩进来表示一个表达式或者块延伸的范围的,这点与Python类似.Haskell的缩进规则简单总结起来只用下面三条: 1. 源文件中第一个顶级的定义或者声明的缩进,定义了该文 ...
- Node.js权威指南 (1) - Node.js介绍
1.1 Node.js概述 / 2 1.1.1 使用Node.js能够解决什么问题 / 2 1.1.2 实现高性能服务器 / 2 1.1.3 非阻塞型I/O及事件环机制 / 2 1.1.4 Node. ...
- Linux Shell编程(14)——内部变量
内建变量影响Bash脚本行为的变量.$BASHBash二进制程序文件的路径 bash$ echo $BASH /bin/bash$BASH_ENV该环境变量保存一个Bash启动文件路径,当启动一个脚本 ...