Qt 学习之路:QML 基本元素
QML 基本元素可以分为可视元素和不可视元素两类。可视元素(例如前面提到过的Rectangle
)具有几何坐标,会在屏幕上占据一块显示区域。不可视元素(例如Timer
)通常提供一种功能,这些功能可以作用于可视元素。
本章我们将会集中介绍集中最基本的可视元素:Item
、Rectangle
、Text
、Image
和MouseArea
。
Item
是所有可视元素中最基本的一个。它是所有其它可视元素的父元素,可以说是所有其它可视元素都继承Item
。Item
本身没有任何绘制,它的作用是定义所有可视元素的通用属性:
分组 | 属性 |
---|---|
几何 |
x 和y 用于定义元素左上角的坐标,width 和height 则定义了元素的范围。z 定义了元素上下的层叠关系。
|
布局 |
anchors (具有 left、right、top、bottom、vertical 和 horizontal center 等属性)用于定位元素相对于其它元素的margins 的位置。
|
键盘处理 |
Key 和KeyNavigation 属性用于控制键盘;focus 属性则用于启用键盘处理,也就是获取焦点。
|
变形 |
提供scale 和rotate 变形以及更一般的针对 x、y、z 坐标值变换以及transformOrigin 点的transform 属性列表。
|
可视化 |
opacity 属性用于控制透明度;visible 属性用于控制显示/隐藏元素;clip 属性用于剪切元素;smooth 属性用于增强渲染质量。
|
状态定义 |
提供一个由状态组成的列表states 和当前状态state 属性;同时还有一个transitions 列表,用于设置状态切换时的动画效果。
|
前面我们说过,Item
定义了所有可视元素都具有的属性。所以在下面的内容中,我们会再次详细介绍这些属性。
除了定义通用属性,Item
另外一个重要作用是作为其它可视元素的容器。从这一点来说,Item
非常类似于 HTML 中 div 标签的作用。
Rectangle
继承了Item
,并在Item
的基础之上增加了填充色属性、边框相关的属性。为了定义圆角矩形,Rectangle
还有一个radius
属性。下面的代码定义了一个宽 100 像素、高 150 像素,浅金属蓝填充,红色 4 像素的边框的矩形:
1
2
3
4
5
6
7
8
9
10
11
|
Rectangle {
id: rect
width: 100
height: 150
color: "lightsteelblue"
border {
color: "#FF0000"
width: 4
}
radius: 8
}
|
QML 中的颜色值可以使用颜色名字,也可以使用 # 十六进制的形式。这里的颜色名字同 SVG 颜色定义一致,具体可以参见这个网页。
Rectangle
除了color
属性之外,还有一个gradient
属性,用于定义使用渐变色填充。例如:
1
2
3
4
5
6
7
8
9
10
|
Rectangle {
width: 100
height: 150
gradient: Gradient {
GradientStop { position: 0.0; color: "red" }
GradientStop { position: 0.33; color: "yellow" }
GradientStop { position: 1.0; color: "green" }
}
border.color: "slategray"
}
|
gradient
要求一个Gradient
对象。该对象需要一个GradientStop
的列表。我们可以这样理解渐变:所谓渐变,就是我们指定在某个位置必须是某种颜色,这期间的过渡色则由计算而得。GradientStop
对象就是用于这种指定,它需要两个属性:position
和color
。前者是一个 0.0 到 1.0 的浮点数,说明 y 轴方向的位置,例如元素的最顶部是 0.0,最底部是 1.0,介于最顶和最底之间的位置可以用这么一个浮点数表示,也就是一个比例;后者是这个位置的颜色值。例如上面的GradientStop { position: 0.33; color: "yellow" }
说明在从上往下三分之一处是黄色。当前最新版本的 QML(Qt 5.2)只支持 y 轴方向的渐变,如果需要 x 轴方向的渐变,则需要执行旋转操作,我们会在后文说明。另外,当前版本 QML 也不支持角度渐变。如果你需要角度渐变,那么最好选择一张事先制作的图片。这段代码的执行结果如下:
需要注意的是,Rectangle
必须同时指定(显式地或隐式地)宽和高,否则的话是不能在屏幕上面显示出来的。这通常是一个常见的错误。
如果需要显示文本,你需要使用Text
元素。Text
元素最重要的属性当然就是text
属性。这个属性类型是string
。Text
元素会根据文本和字体计算自己的初始宽度和高度。字体则可以通过字体属性组设置(例如font.family
、font.pixelSize
等)。如果要设置文本颜色,只需要设置color
属性。Text
最简单的使用如下:
1
2
3
4
5
6
|
Text {
text: "The quick brown fox"
color: "#303030"
font.family: "Century"
font.pixelSize: 28
}
|
运行结果:
Text
元素中的文本可以使用horizontalAlignment
和verticalAlignment
属性指定对齐方式。为了进一步增强文本渲染,我们还可以使用style
和styleColor
两个属性。这两个属性允许我们指定文本的显示样式和这些样式的颜色。对于很长的文本,通常我们会选择在文本末尾使用 … ,此时我们需要使用elide
属性。elide
属性还允许你指定 … 的显示位置。如果不希望使用这种显示方式,我们还可以选择通过wrapMode
属性指定换行模式。例如下面的代码:
1
2
3
4
5
6
7
8
9
10
11
12
|
Text {
width: 160
height: 120
text: "A very very long text"
elide: Text.ElideMiddle
style: Text.Sunken
styleColor: '#FF4444'
verticalAlignment: Text.AlignTop
font {
pixelSize: 24
}
}
|
这里的Text
元素的文本省略号位置这一行文本的中部;具有一个 #FF4444 颜色的样式 Sunken。
Text
元素的作用是显示文本。它不会显示文本的任何背景,这是另外的元素需要完成的事情。
Image
元素则用于显示图像。目前 QML 支持的图像格式有 PNG、JPG、GIF 和 BMP 等。除此之外,我们也可以直接给source
属性一个 URL 来自动从网络加载图片,也可以通过fillMode
属性设置改变大小的行为。例如下面代码片段:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
Image {
x: 12;
y: 12
// width: 48
// height: 118
source: "assets/rocket.png"
}
Image {
x: 112;
y: 12
width: 48
height: 118/2
source: "assets/rocket.png"
fillMode: Image.PreserveAspectCrop
clip: true
}
|
注意这里我们说的 URL,可以是本地路径(./images/home.png),也可以使网络路径(http://example.org/home.png)。这也是 QML 的一大特色:网络透明。如果还记得先前我们尝试做的那个天气预报程序,那时候为了从网络加载图片,我们费了很大的精力。但是在 QML 中,这都不是问题。如果一个 URL 是网络的,QML 会自动从这个地址加载对应的资源。
上面的代码中,我们使用了Image.PreserveAspectCrop
,意思是等比例切割。此时,我们需要同时设置clip
属性,避免所要渲染的对象超出元素范围。
最后一个我们要介绍的基本元素是MouseArea
。顾名思义,这个元素用于用户交互。这是一个不可见的矩形区域,用于捕获鼠标事件。我们在前面的例子中已经见过这个元素。通常,我们会将这个元素与一个可视元素结合起来使用,以便这个可视元素能够与用户交互。例如:
1
2
3
4
5
6
7
8
9
10
11
|
Rectangle {
id: rect1
x: 12;
y: 12
width: 76;
height: 96
color: "lightsteelblue"
MouseArea {
/* ~~ */
}
}
|
MouseArea
是 QtQuick 的重要组成部分,它将可视化展示与用户输入控制解耦。通过这种技术,你可以显示一个较小的元素,但是它有一个很大的可交互区域,以便在界面显示与用户交互之间找到一个平衡(如果在移动设备上,较小的区域非常不容易被用户成功点击。苹果公司要求界面的交互部分最少要有 40 像素以上,才能够很容易被手指点中)。
转载于:https://www.cnblogs.com/lvdongjie/p/4810636.html
Qt 学习之路:QML 基本元素相关推荐
- 《Qt 学习之路 2》
Home / Qt 学习之路 2 / <Qt 学习之路 2>目录 <Qt 学习之路 2>目录 序 Qt 前言 Hello, world! 信号槽 自定义信号槽 Qt 模块简介 ...
- 转载: Qt 学习之路 2归档
Qt 学习之路 2归档 http://www.devbean.net/2012/08/qt-study-road-2-catelog/
- 对QT学习之路12-14的源代码补充与修正
QT学习之路12-14的源代码有些不完整,为了更好的让大家学习,本人做了一点修正与补充,谢谢.源代码如下: 头文件: #ifndef MAINWINDOW_H #define MAINWINDOW_H ...
- java qt gui_工控编程,Qt 学习之路
原标题:工控编程,Qt 学习之路 Qt 是一个著名的 C++ 库--或许并不能说这只是一个 GUI 库,因为 Qt 十分庞大,并不仅仅是 GUI.使用 Qt,在一定程序上你获得的是一个"一站 ...
- Qt学习之路_12(简易数据管理系统)
原文地址为: Qt学习之路_12(简易数据管理系统) 前言 最近从大陆来到台湾,之间杂事很多,挤不出时间来更新博客- 这次主要是通过做一个简易的数据库管理系统,来学习在Qt中对数据库,xml,界面的各 ...
- QT学习之路2 学习笔记
QT学习之路2 学习笔记 1.Qt 是一个著名的 C++ 应用程序框架.你并不能说它只是一个 GUI 库,因为 Qt 十分庞大,并不仅仅是 GUI 组件.使用 Qt,在一定程度上你获得的是一个&quo ...
- QT学习之路(一)ubuntu 18.04的Qt Creator在线安装
文章目录 前言 一.准备工作 二.安装步骤 参考链接 前言 Qt是嵌入式开发的必备工具之一,在Linux下安装尤其重要. Qt是C++的一个库,或者说是开发框架,里面集成了一些库函数,提高开发效率. ...
- Qt学习之路(24): QPainter(改写paintEvent)
Qt学习之路(24): QPainter(改写paintEvent) 多些大家对我的支持啊!有朋友也提出,前面的几节有关event的教程缺少例子.因为event比较难做例子,也就没有去写,只是把大概写 ...
- [记录]学习QT学习之路2第四天
今天学习内容对应<<QT学习之路2>>第18到23部分,主要是有关于QT事件这一部分的内容(=_=真是看到我快吐了,感觉这本书不适合我这种初学者). 先放出思维导图 难点总结 ...
- [记录]QT学习之路2学习第三天
今天的内容对应的是<<QT学习之路2>>第13到17部分. 主要内容由思维导图总结 一,什么是QT对话框 二,什么是QT标准对话框 三,怎么样实现QT对话框数据传递 四,深入了 ...
最新文章
- Keras【Deep Learning With Python】LSTM 循环神经网络解决Regressor回归问题
- python requests post 中文乱码问题
- DEV express 对Gridview某行的元素赋值
- codeforces 435 B. Pasha Maximizes 解题报告
- 英语语法---形容词短语详解
- leetcode -- 129. 求根到叶子节点数字之和
- 【theano-windows】学习笔记四——theano中的条件语句
- AUTOSAR从入门到精通100讲(三十六)-AUTOSAR 通信服务两步走-CanSM概念-配置及代码分析
- tomcat 报错:Error occurred during initialization of VM
- Linux 下 ascii 的查看方式
- selenium启动火狐浏览器_selenium之nodejs入门使用
- python离线安装tensorflow_TensorFlow 在Linux系统下离线安装
- steam显示网页错误怎么办?
- 不能打开淘宝单个商品页面
- Selenium Chrome版本兼容问题
- 什么是算法?数据结构与算法概念
- python清华源的设置
- 计算机科学与技术是学什么的1001无标题,计算机科学与技术学院计科1001.doc
- 1.8 监督学习应用
- 上海的“户口”和“居住证”到底有哪些不同?