Qt QML Component 学习笔记
简介
Component是Qt封装好的、只暴露必要接口的QML类型,可以重复利用。一个QML组件就像一个黑盒子,它通过属性、信号、函数和外部世界交互。
一个Component既可以定义在独立的QML文件(.qml为后缀的文件)中,也可以嵌入到其他的QML文件中来定义。那么这两种方式分别适用于什么场景呢?这里有一个原则可以帮助我们去选择Component的定义方式:如果一个Component比较小且只在某个QML文件中使用,或者说一个Component从逻辑上来看属于某个QML文档,那么就可以采用嵌入的方式来定义该Component;如果这个Component有很多地方可以用到,也就是说复用率比较高,那么就可以采用定义在独立的QML文件中的方式。下面说明一下这两种实现Component方式的差别:
- 嵌入式定义Component:
要在一个QML文件中嵌入Component的定义,需要使用Component对象。
定义一个Component与定义一个QML文件类似,Component只能包含一个顶层Item,而且在这个Item之外不能定义任何数据,除了id。 在顶层Item之内,则可以包含更多的子元素来协同工作,最终形成一个具有特定功能的组件。
Component通常用来给一个View提供图形化组件,比如ListVIew::delegate属性就需要一个Component来指定如何显示列表的每一个项,又比如ButtonStyle::background属性也需要一个Component来指定如何绘制Button的背景。
Component不是Item的派生类,而是从QQmlComponent继承而来的,虽然它通过自己的顶层Item为其他的view提供可视化组件,但它本身是不可见元素。你可以这么理解:你定义的组件是一个新的类型,他必须被实例化以后才能显示。而要实例化一个嵌入在QML文件中定义的Component,则可以通过Loader。
- 在单独文件中定义Component:
很多时候我们把一个Component单独定义在一个QML文件中,比如Qt Qucik提供的BusyIndicator空间,其实就是在BusyIndicator中定义一个组件(BusyIndicator.qml):
Control {
id: indicator /*! \qmlproperty bool BusyIndicator::running This property holds whether the busy indicator is currently indicating
activity. \note The indicator is only visible when this property is set to \c true. The default value is \c true.
*/
property bool running: true Accessible.role: Accessible.Indicator
Accessible.name: "busy" style: Settings.styleComponent(Settings.style, "BusyIndicatorStyle.qml", indicator)
}
可以看到BusyIndicator的代码非常简单,只是给Control元素(Qt Quick定义的私有元素,用作其他控件的基类,如ComboBox、BusyIndicator等)增加了一个属性,设置了几个值而已。
BusyIndicator.qml文件中的顶层Item是Control,而我们使用时却是以BusyIndicator为组件名(类名)。这是定义Component的一个约定:组件名必须和QML文件名一致,且组件名的首字母必须是大写的。Qt Quick提供的多数基本元素和特性,都可以在定义组件时使用 。
例子:在一个单独的QMl文件中定义颜色选择组件ColorPicker,对应QML文件为ColorPicker.qml,可以在其他的QMl文件中使用Cololr{...}来创建ColorPicker的实例。
import QtQuick 2.6 Rectangle {
id: colorPicker
width: 50
height: 30
signal colorPicked(color clr); function configureBorder() {
colorPicker.border.width = colorPicker.focus ? 2 : 0;
colorPicker.border.color = colorPicker.focus ? "#90D750" : "#808080";
} MouseArea {
anchors.fill: parent
onClicked: {
colorPicker.colorPicked(colorPicker.color);
mouse.accepted = true;
colorPicker.focus = true;
}
} Keys.onReturnPressed: { // 对应Enter键
console.log("ColorPicker:onReturnPressed");
colorPicker.colorPicked(colorPicker.color);
event.accepted = true;
} Keys.onSpacePressed: { // 对应Space键
console.log("ColorPicker:onSpacePressed");
colorPicker.colorPicked(colorPicker.color);
event.accepted = true;
} onFocusChanged: {
console.log("ColorPicker:onFocusChanged");
configureBorder();
} Component.onCompleted: {
console.log("ColorPicker:onCompleted");
configureBorder();
}
}
在单独文件中定义Component,与嵌入式定义有明显的不同:Component对象不见了,是因为在单独文件中定义组件,不需要Component对象,只有在其他QML文件中嵌入式定义组件时才需要Component对象。
main.qml内容:
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4 Window {
visible: true
width: 320
height: 240
title: qsTr("Component") Rectangle {
width: parent.width
height: parent.height
color: "#EEEEEE" Text {
id: coloredText
anchors.centerIn: parent
anchors.top: parent.top
anchors.topMargin: 4
text: "ColorPicker"
font.pixelSize: 32
} function setTextColor(clr) {
coloredText.color = clr;
} ColorPicker {
id: redColor
color: "red"
focus: true
width: parent.width / 3 - 4
anchors.left: parent.left
anchors.leftMargin: 4
anchors.bottom: parent.bottom
anchors.bottomMargin: 4 KeyNavigation.right: blueColor
KeyNavigation.tab: blueColor
onColorPicked: {
coloredText.color = clr;
}
} ColorPicker {
id: blueColor
color: "blue"
width: parent.width / 3 - 4
anchors.left: redColor.right
anchors.leftMargin: 4
anchors.bottom: parent.bottom
anchors.bottomMargin: 4 KeyNavigation.left: redColor
KeyNavigation.right: pinkColor
KeyNavigation.tab: pinkColor
} ColorPicker {
id: pinkColor
color: "pink"
width: parent.width / 3 - 8
anchors.left: blueColor.right
anchors.leftMargin: 4
anchors.bottom: parent.bottom
anchors.bottomMargin: 4 KeyNavigation.left: blueColor
KeyNavigation.tab: redColor
} Component.onCompleted: {
blueColor.colorPicked.connect(setTextColor);
pinkColor.colorPicked.connect(setTextColor);
}
}
}
《Qt Quick核心编程》
Qt QML Component 学习笔记的更多相关文章
- (转)Qt Model/View 学习笔记 (七)——Delegate类
Qt Model/View 学习笔记 (七) Delegate 类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...
- (转)Qt Model/View 学习笔记 (五)——View 类
Qt Model/View 学习笔记 (五) View 类 概念 在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...
- 【Qt官方例程学习笔记】Application Example(构成界面/QAction/退出时询问保存/用户偏好载入和保存/文本文件的载入和保存/QCommandLineParser解析运行参数)
The Application example shows how to implement a standard GUI application with menus, toolbars, and ...
- 【Qt官方例程学习笔记】Raster Window Example(画笔的平移/旋转/缩放应用)
这个例子显示了如何使用QPainter渲染一个简单的QWindow. 值得学习的内容 <QtGui>头文件 #include <QtGui>就可以使用Qt GUI模块中的所有类 ...
- 【Qt官方例程学习笔记】Analog Clock Window Example (画笔的平移/旋转/缩放应用)
这个例子演示了如何使用QPainter的转换和缩放特性来简化绘图. 值得学习的: 定时器事件ID检查: 在定时器事件中检查定时器id是比较好的实践. QPainter抗锯齿: We call QPai ...
- (转)Qt Model/View 学习笔记 (四)——创建新的Models
创建新的Models 介绍 model/view组件之间功能的分离,允许创建model利用现成的views.这也可以使用标准的功能 图形用户接口组件像QListView,QTableView和QTre ...
- (转)Qt Model/View 学习笔记 (三)——Model类
Model类 基本概念 在model/view构架中,model为view和delegates使用数据提供了标准接口.在Qt中,标准接口QAbstractItemModel类中被定义.不管数据在底层以 ...
- (转)Qt Model/View 学习笔记 (二)——Qt Model/View模式举例
Qt Model/View模式举例 Qt提供了两个标准的models:QStandardItemModel和QDirModel.QStandardItemModel是一个多用途的model,可用于表示 ...
- (转)Qt Model/View 学习笔记 (一)——Qt Model/View模式简介
Qt Model/View模式简介 Qt 4推出了一组新的item view类,它们使用model/view结构来管理数据与表示层的关系.这种结构带来的 功能上的分离给了开发人员更大的弹性来定制数据项 ...
随机推荐
- 后台异常 - sql语句查询出的结果与dao层返回的结果不一致
问题描述 sql语句查询出的结果与dao层返回的结果不一致 问题原因 (1)select 中,查询的列名称重复,数据出现错乱 (2)使用不等号,不等号(!=,<>),查询出来的结果集不包含 ...
- linux网卡
手动启动 ifup eth0 查询网卡配置信息 vim /etc/udev/rules.d/70-persistent-net.rules 备注:可以修改网卡名称和MAC地址
- 第一篇,VScode插架以及配置项
由于在开发的时候我们经常因为ESLint规范把自己搞的头晕眼花,修改起来又很浪费时间.所以我特别做个记录,如下代码可以轻松搞的. 工欲善其事必先利器,如果想要在开发的道路上如履平地必须要有得心 ...
- android 获取webview内容真实高度(webview上下可滚动距离)
正常获取: mainWebView.getContentHeight()//获取html高度 mainWebView.getScale()//手机上网页缩放比例 mainWebView.getHeig ...
- qq自己设定动态图像视屏
类似于样但是是自己定义的视屏先上壁纸 这个具体是怎么制作的呢? 先从网络上下载自己喜欢的mp4视屏 qq头像上面点击拍摄动态图像 先随意拍摄2秒保持拍摄完成的状态不要点击确定 然后用手机文件夹找到你要 ...
- 【StarUML】 活动图
StarUML中的活动图本质上是流程图,活动图相对来说,更加专业,它有对信号的处理,对状态动作.数据区别表示,使得更清晰地了解控制流的走向. 1.基本元素 a.活动状态图(Activity).动作状态 ...
- DVWA全级别之Insecure CAPTCHA(不安全的验证码)
Insecure CAPTCHA Insecure CAPTCHA,意思是不安全的验证码,CAPTCHA是Completely Automated Public Turing Test to Tell ...
- 牛客多校第二场H Second Large Rectangle 单调栈or悬线法
Second Large Rectangle 题意 给出n*m的01矩阵,问由1组成的第二大的矩阵的大小是多少? 分析 单调栈(or 悬线法)入门题 单调栈 预处理出每一个点的最大高度,然后单调栈每一 ...
- Go反射
一.引入 不同语言的反射模型不尽相同,有些语言还不支持反射.<Go 语言圣经>中是这样定义反射的: Go 语言提供了一种机制在运行时更新变量和检查它们的值.调用它们的方法,但是在编译时并不 ...
- 7_1 除法(UVa725)<选择合适的枚举对象>
如果把数字0到9分配成2个整数(各五位数),现在请你写一支程序找出所有的配对使得第一个数可以整除第二个数,而且商为N(2<=N<=79),也就是:abcde / fghijk = N这里每 ...