目录

QT控件

【QT:控件】


QT中提供了很多内置的控件,如:按钮,文本框,单选按钮,复选按钮等控件。

Widget是这些控件的统称。很早的时期开发GUI没有控件的概念,界面上显示的东西全都是“画”出来的,为了提高开发效率,引入控件的概念。

QT中的控件可以对应着HTML中的标签理解,HTML中不同的标签能体现出不同的效果。

QT中的各种控件都是继承QWidget类

控件状态:

在QT Creator的右侧有QWidget的属性,其中enabled描述了控件是否是“可用”状态,与之对应的概念:禁用状态。禁用状态:该控件不能接收任何用户的输入事件,且外观上往往是灰色的,如果一个控件被禁用,那它的子元素也会被禁用。

API函数

isEnabled获取控件的可用状态
setEnabled设置控件是否可用。True表示可用,False表示禁用

实例:

https://i-blog.csdnimg.cn/direct/3d3a54c472cb449496ba9d55d4fcdaf2.png

在同一个界面中,要求不同的控件objectName也是必须不同的,后续可以通过Ui->objectNmae方式获取到对应的控件对象

https://i-blog.csdnimg.cn/direct/3a458c2f5fbe455fa7748c9023651092.png

当前自动生成的ObjectNmae的名字根据控件类型+下划线+数字的方式

https://i-blog.csdnimg.cn/direct/4728d61f07c4428aa60feb0bc944fdb0.png

clicked信号有两个版本,无参数的,和一个Bool参数的

通过按钮来切换可用状态,实例:

https://i-blog.csdnimg.cn/direct/a87930eea0594db893ab295143f5e164.png https://i-blog.csdnimg.cn/direct/4e15af2fbc9549828109194e2eb8d1d0.png

geometry :

表示当前控件的位置和尺寸

https://i-blog.csdnimg.cn/direct/8b1741265c544876be6971440ddfaeee.png

API函数

geometry获取控件的位置和尺寸,返回的结果是一个QRect(矩形),包含了x,y,width,height
setGeometry(QRect) setGeometry(int x,int y,int width,int height)设置控件的位置和尺寸,可以直接设置一个QRect,也可以分四个属性单独设置

QPoint表示一个点,QRect表示一个矩形,属于小对象,占用的空间小。

实例:

https://i-blog.csdnimg.cn/direct/ee8ec16573ae4bd192d5c343d21169fc.png

https://i-blog.csdnimg.cn/direct/5b4edba587b34c3387ab19d8a4b7c5f7.png

window frame

https://i-blog.csdnimg.cn/direct/2ce9c1f2bab54e4ca3c0bc223c7ca0fb.png

在QT中,有的API函数以widget本体的左上角为原点,不考虑window frame,如:geometry()、setGeometry()。有的API函数的位置信息以window frame左上角为原点,如:frameGeometry(),setFrameGeometry()。

windowlcon:

表示窗口图标

API函数

windowlcon()获取到控件的窗口图标,返回Qlcon(表示一个图标)对象
setWindowlcon(const Qlcon& icon)设置控件的窗口图标

这俩api都是针对顶层窗口使用,对窗口内的控件没有效果

Qlcon是一个比较小的对象,创建之后需要设置到某个QWidget里面,Qlcon对象本身是否释放不影响图标的显示,此外,Qlcon也不支持对象树,无法给它执行父对象,

实例:

https://i-blog.csdnimg.cn/direct/0d825d870b694a6982c580787d35d1d4.png

注:

  • 路径不能带中文
  • 路径分隔符使用/

但引用绝对路径的方式不科学的,因为无法确保开发机上的路径和用户电脑上图片的路径完全一致,所以这里使用相对路径更靠谱


qrc机制

  • 确保你的图片所在路径在目标用户机器上存在
  • 确保图片不会被用户误删

原理:给QT项目引入一个额外的xml文件(后缀名用.qrc表示)在这个xml中吧要使用的图片资源导入进来,并在xml中进行记录。QT在编译项目的时候会根据qrc中描述的图片信息找到图片内容,并提取图片的二进制数据,把这些二进制数据转成C++代码,最终编译到exe中

qrc缺点:无法导入太大的资源文件

qrc的使用方式:

  1. 在项目中创建qrc,不可以带中文和特殊符号

https://i-blog.csdnimg.cn/direct/7ba0b01a93d542d0964466e94e1b8fce.png https://i-blog.csdnimg.cn/direct/4bbd585fff3b4fd5a78060ecd1a30f4d.png

把文件导入到qrc中

  • 先创建一个“前缀”(虚拟目录)
  • 把图片导入到资源目录中

https://i-blog.csdnimg.cn/direct/01d08cc3e48945e38b5d17098ab87523.png

https://i-blog.csdnimg.cn/direct/fe48498ff17940e78e5f24c0f308b308.png

注:导入图片时,需要保证导入的图片必须在resource的同级目录下,或者它的子目录中

https://i-blog.csdnimg.cn/direct/1a8d86e1558c41649253c9a67cff836b.png

创建的前缀名叫什么代码中就写什么,当代码需要访问qrc中的文件时,需要在路径上带有前缀

window opacity

调整窗口的透明度。

代码实例:

https://i-blog.csdnimg.cn/direct/8b0def44362643c9b50e115d5b5187e4.png 为什么窗口的不透明度变化并非精确?

浮点数在内存中的存储遵守IEEE 754标准,该标准规定了浮点数要使用二进制的科学计数法方式表示。把浮点数分为三部分:符号位、有效数字、指数部分。有效数字使用二进制表示,且都是小于0的小数部分。第一个有效数字位表示0.5,第二个有效数字位表示0.25,第三个有效数字位表示0.125,例如二进制中小数点后的101,则可以表示0.625(0.5+0.125),但象0.1这样的小数无法精确的表示,只能说无限接近。所以对于float和double的值的比较需要我们使用做差的方式通过比较差的绝对值与误差范围进行比较。采用这种方式的优点:运算速度快,占用空间小,缺点:无法精确表示小数。

cursor

API函数

cursor()获取到当前widget的cursor属性,返回QCursor对象。当鼠标悬停在该widget上时,就会显示出对应的形状
setCursor(const QCursor& cursor)设置该widget光标的形状,仅在鼠标停留在该widget上生效
QGuiApplication::setOverrideCursor(const QCursor& cursor)设置全局光标的形状,对整个程序中的所有widget都会生效,覆盖上面的setCursor设置的内容

使用实例:

https://i-blog.csdnimg.cn/direct/a255f96a2a7441df88cb463aed40669f.png

QT可以自定义图片设置光标,同样使用qrc的机制进行设置

https://i-blog.csdnimg.cn/direct/72caf79c1b5a4c74ab4cb7511609b0f5.png

font:

API函数

font()获取当前widget的字体信息,返回QFont对象
setFont(const QFont& font)设置当前widget的字体信息

QFont: https://i-blog.csdnimg.cn/direct/c1acafb73a2d4b39a6c63e7fa772240f.png

https://i-blog.csdnimg.cn/direct/df72436b29db41019bf1b4c507734495.png

实例:

https://i-blog.csdnimg.cn/direct/c8b9d425273944e18a71f3bfc956ea5e.png

ToolTip

一个GUI程序界面复杂,通过向将鼠标悬停弹出提示信息

API函数

setToolTip设置toolTip,鼠标悬停在该Widget上时会有提示说明
setToolTipDuring设置toolTip提示的时间,单位ms,时间到后toolTip自动消失

https://i-blog.csdnimg.cn/direct/c670bcd503714985941e32dbe5e846e4.png

这里设置也可以在控件这里设置,不用代码设置

https://i-blog.csdnimg.cn/direct/f5120e190af14d51a87b5b01fa7a2068.png

focusPolicy:

API函数

focusPolicy()获取widget的focusPolicy,返回Qt::FocusPolicy
setFocusPolicy(Qt::FocusPolicy)设置widget的focusPolicy

通过控件设置焦点

https://i-blog.csdnimg.cn/direct/1782df91cceb40b2823a5b4a063a6156.png

styleSheet:

通过CSS设置widget样式

实例:

https://i-blog.csdnimg.cn/direct/06de400d8c584662a0483115b86c0259.png

https://i-blog.csdnimg.cn/direct/f9a1e59a425d43eea49455aca20ff90f.png

按钮类控件:

PushButton:

给按钮添加图标:

https://i-blog.csdnimg.cn/direct/5933d1f9054c4c0fb89d9d59c3a8276d.png

给按钮添加快捷键

https://i-blog.csdnimg.cn/direct/18a6d9460b8448f3b19c65861d14ccb9.png https://i-blog.csdnimg.cn/direct/a8deb5995c66493b86e2181ec985cdbe.png

  1. 将图片资源添加到qrc中
  2. 设置按钮
  3. 设置方向按钮的槽函数
  4. 设置快捷键,程序一启动,快捷键有效

快捷键默认是连发的,鼠标点击不是,想让鼠标连发可以设置:setAutoRepeat()函数即可连发

Radio Button:

QRadioButton是单选按钮,属性如下:

属性

checkable是否能选中
checked是否已经被选中,checkable是checked的前提条件
autoExclusive是否排它 选中一个按钮后是否会取消其他按钮的选中

https://i-blog.csdnimg.cn/direct/eebc937a89144676b4f6b6e5ec9f81ce.png

radiobutton默认是排他的,当需要“多组”单选按钮时可以选择使用QButtonGroup类可以针对单选按钮进行分组

https://i-blog.csdnimg.cn/direct/5fba46e9ecca44649333b6274f5ca0e2.png

checkbox:

QCheckbox表示复选按钮,可以允许选中多个。

https://i-blog.csdnimg.cn/direct/5f9e5881786e4c199a0b791ae3b828a8.png


显示类控件:

编辑文本

https://i-blog.csdnimg.cn/direct/db3e28b05b4749a38c774fd9dbd1baca.png

显示图片:

将图片自动拉伸填满窗口

https://i-blog.csdnimg.cn/direct/f792597a23c847d4ae81d2f1955bba7e.png

但这里存在一个BUG,窗口拉伸后,图片不会跟着填满

所以这里需要引用事件。

在QT中表示用户操作有两种概念:1.信号 2.事件。当用户拖拽修改窗口大小时,就会触发resize事件,而类似与resize事件是连续变化的,把窗口尺寸从A拖到B这个过程中,会触发一系列的resizeEvent,此时就可以通过resizeEvent完成目标功能。让Widget窗口类重写父类(QWidget)的resizeEvent虚函数,在鼠标拖动窗口的过程中,该函数会被反复调用

Qlabel的文本对齐:

https://i-blog.csdnimg.cn/direct/6a58ed2c4b214e1fb6f9453b47e8663e.png

文本操作函数

setAlignment(Qt::Alignment)设置文本对齐
setWordWrap(bool)设置自动换行
setIndent(int)设置缩减(此处设置缩进,即使换行后续的行也会产生缩进)
setMargin(int)设置边距

QLable设置伙伴:

Qt中,QLabel中写的文本是指定“快捷键”的,此处快捷键的规则功能上要比QPushButton弱很多,在文本上,需要使用&和一个字符来表示快捷键,例如&A就需要通过键盘上的Alt+A触发这个快捷键,绑定伙伴后就可以通过快捷键触发选中对应的按钮

https://i-blog.csdnimg.cn/direct/ba01a42eb5d84925b6c059b5486480f1.png

LCD Number:

属性

intValueQLCDNumber显示的数字值
valueQLCDNumber显示的数字值,和
digitCount显示几位数字
mode数字显示形式
segmentStyle设置显示风格
smallDecimalpoint设置比较小的小数点

倒计时实例:

https://i-blog.csdnimg.cn/direct/23bb0fdeba4f43ebbeb3ede57bd555dc.png

为什么下面代码没有显示?会先执行widget的构造函数,构造函数执行

完毕后才会执行后续的显示操作

https://i-blog.csdnimg.cn/direct/21db96f8c4504698ba75e05639d78408.png 想法1:在构造函数中创建一个线程,在新线程中执行上述代码。

https://i-blog.csdnimg.cn/direct/0f19381792584596bd2c48dc88c3eff4.png

https://i-blog.csdnimg.cn/direct/477b471effe14e0c98d5106f55eb6e98.png

显然方法是不可行的,因为QT中界面有一个专门的线程负责维护更新的(主线程)

对GUI来说,内部包含了很多隐藏状态,QT为了保证修改界面的过程中,线程安全不受影响的,所以QT禁止了其他线程直接修改界面,同时QT为了确保线程安全,要求所有的对界面的修改操作必须在主线程中完成。

对于Qt的槽函数来讲,默认情况下,槽函数都是由主线程调用的,在槽函数中修改界面没有任何问题

ProgressBar:

属性

mininum进度条最小值
maxinum进度条最大值
value进度条当前值
textVisible进度条数字是否可见
orientation是否朝反方向增长进度
textDirection文本的朝向
alignment文本在进度条的对齐方式
format展示的数字格式

创建一个进度条:

https://i-blog.csdnimg.cn/direct/d209d0d00cba442aaa6a734ca22a218d.png

https://i-blog.csdnimg.cn/direct/2af1779e03694252bbb70c9b1e767a0e.png

calendar:

属性

selectDate当前选中的日期
minimumDate最小日期
maximumDate最大日期
firstDayOfWeek每周的第一天
gridVisible是否显示表格的边框
selectionMode是否允许选择日期
dateEditEnabled是否允许日期被编辑
navigationBarVisible日历上方标题是否显示

https://i-blog.csdnimg.cn/direct/c3899e378efc4453bad27162a01646ff.png

输入类控件:

Line Edit:

属性

text输入框中的文本
inputMask输入内容格式约束
maxLength最大长度
frame是否添加边框
echoMode显示方式
clearButtonEnabled当输入框中有内容时,右侧会出现删除的按钮

各函数的使用实例:

https://i-blog.csdnimg.cn/direct/4483c9c7956f458aa1cddc907329d83c.png

基于正则表达式的验证

https://i-blog.csdnimg.cn/direct/6cadc59739464e93ba93dd9c295ec9d7.png

不显示密码两次验证:

https://i-blog.csdnimg.cn/direct/7aeee13618084ec694c18010db8862d1.png

https://i-blog.csdnimg.cn/direct/b30da07c6c404b1b9a1fdb719054bd36.png

切换显示密码状态:

https://i-blog.csdnimg.cn/direct/6236b7c574f245bab779d4c89765894e.png

Text Edit:

表示多行输入框,也是一个富文本&markdown编辑器,并且能够在内容超出编辑范围时自动提供滚条。QTextEdit不仅能表示纯文本还可以表示html和markdown,QPlainTextEdit只能表示纯文本

属性

markdown支持markdown格式,能够自动的对markdown文本进行渲染成html
html可以支持大部分html标签
placeHolderText输入框为空时提示内容
readOnly是否是只读的
acceptRichText是否接收富文本内容

演示QTextEdit信号

https://i-blog.csdnimg.cn/direct/8fe94bcb181a41f190e7bd7da992aa9a.png

Combo Box:

表示下拉框

API函数

addltem(const QString&)添加一个条目
currentIndex()获取当前条目的下标
currentText()获取当前条目的文本内容

信号

activated(int) activated(const QString& text)当用户选择了一个选项时发出。这时相当于用户点开下拉框并且鼠标滑过某个选项,还没有做出选择
currentIndexChanged(int) currentIndexChanged(const QString& text)当选项改变时发出 此时用户已经明确选择了一个选项,用户操作或者通过程序操作都会触发这个信号
editTextChanged(const QString& text)当编辑框中的文本改变时发出(editable为true时有效)

使用这个下拉菜单模拟点餐:

https://i-blog.csdnimg.cn/direct/f42cecb4ac7540bca7651198a66a94e7.png 除了用代码写,也可以跳转到Ui界面,右击下拉框

https://i-blog.csdnimg.cn/direct/e498c1fa3ee34b2b996a397b3207b270.png

spin box(微调框)

带有按钮的的输入框,可以通过按钮来修改数值大小

属性

value存储的数值
singleStep按下按钮变化的步长
displayInteger数字的进制
wraping是否允许换行
……

信号

textChanged(QString)微调框的文本发生变化时会触发,参数QString带有前缀和后缀
valueChanged(int)微调框的文本发生改变时会触发,参数int 表示当前值

基于麦当劳点餐的模拟实现按钮微调实例:

https://i-blog.csdnimg.cn/direct/1c6d8a45c0624ebe936295aafe2a70e2.png

Date Edit&Time Edit

Qt::LocalTime:显示本地时间,Qt::UTC:显示协调世界时

QDateTime提供了两个函数:daysTo计算两个时间的日期的差值,secsTo计算两个时间的秒数的差值

信号

dateChanged(QDate)日期改变时触发
timeChanged(QTime)时间改变时触发
dateTimeChanged(QDateTime)时间日期任意一个改变时触发

计算两个日期的差值:

https://i-blog.csdnimg.cn/direct/be176f5447f649f0933c1d016a50a9f8.png

Dial:

通过旋钮来调节窗口透明度:

https://i-blog.csdnimg.cn/direct/7fd2674d34744fecbfd8a9aa16aa45bd.png

Slider:

表示一个滑动条

信号

valueChanged(int)数值改变时触发
rangeChanged(int ,int)范围变化时触发

在窗口上放入两个滑动条,滑动两个滑动条来调节窗口大小,代码实例:

https://i-blog.csdnimg.cn/direct/71af3a8564394555a8842ef5a7e239f9.png

自定义快捷键,通过快捷键操作滑动条:

https://i-blog.csdnimg.cn/direct/53ee329a8c614022a0dbd2f2785194d2.png

多元素控件:

QListWidget列表
QListView
QTableWidget表格
QTableView
QTreeWidget树形
QTreeView

不难发现上面的共同点,后缀都是一样的,xxView是更底层的实现, xxWidget是基于xxView封装而来的,此处的xxView是MV结构的一种典型实现,MVC是软件开发中经典的软件结构的组织形式

List Widget:

可以纵向显示列表

属性

current当前选中的是第几行
count一共有多少行数
sortingEnabled能否允许排序
isWrapping能否允许换行
itemAlignment元素的对齐方式
selectRectVisible被选中的元素矩形是否可见
spacing元素之间的间隔

listwidget添加元素可以通过代码添加,也可以通过图形化界面添加(右击QListWidget选择编辑选项)如果初始化内容固定,两种方法都可,如果内容不固定,需要通过读取网络或者文件构造数据就只能使用代码来添加

https://i-blog.csdnimg.cn/direct/2f1d4759f282475f920efb370d3ec456.png

TableWidget:

https://i-blog.csdnimg.cn/direct/b22be0b0fbf74749b5b4dc66ae613063.png

Tree Widget:

表示的是一个树形控件,里面的每个元素都是一个QTreeWidegetItem,每个QTreeWidegetItem可以包含多个文本和图标,每个文本/图标为一个列,可以给QTreeWidget设置顶层节点(顶层节点可以多个),再给顶层节点添加子节点,从而构成树形结构

方法

clear清空所有子节点
addTopLevelItem(QTreeWidgetItem* item)新增顶层节点
topLeventItem(int index)获取指定下标的顶层节点
topLevelItemCount()获取顶层节点个数
currentItem()获取到当前选中的节点

代码实例:

https://i-blog.csdnimg.cn/direct/2662a2ea705340f2b039f68f267eaf5f.png https://i-blog.csdnimg.cn/direct/c94566510c7648a29fce19030a20494e.png

容器类控件:

QGroupBox分组框:

让界面更加清晰明了,效果如图:

https://i-blog.csdnimg.cn/direct/5fc52da65baa47558f92e93d57da5ea7.png

Tab Widget:

实现一个带有标签的控件,可以往里面添加一些widget,进一步通过标签页来切换

https://i-blog.csdnimg.cn/direct/0e6f33e1bee84e039c6bf5804ed22c11.png

属性

tabPositon标签页所在的位置
currentIndex当前选中了第几个标签页
currentTabText当前选中标签页的文本
currentTabName当前选中标签页的名字
currentTablcon当前选中的标签页的图标
movable标签页是否可以移动

创建一个程序,带有tablewidget作为标签页,提供两个按钮,分别创建新的标签页和关闭当前选中的标签页,当切换标签页时可以感知变化 https://i-blog.csdnimg.cn/direct/75f4e012ff894bdea48a68c71ebfdcdc.png

布局管理器:

在此之前对控件的布局都是手动的,但是手动调整布局不科学,所以使用布局管理器可以让布局更科学,窗口大小自适应。

垂直布局:

使用QVBoxLayout表示垂直的布局管理器,Layout只是用于界面布局,并没有提供信号

https://i-blog.csdnimg.cn/direct/56c855a1820c4c8ab0fa3dd77df9ec1e.png

每个widget只能设置一个布局管理器

如果在代码中创建layout只是创建了layout,而在qtdesinger中创建的layout,是先创建了一个widget然后再在这个新的widget中添加一个layout。

水平管理器:

https://i-blog.csdnimg.cn/direct/742acd8bbc3c458f9d359f900c4902eb.png

布局管理器也可以嵌套使用,如下:

https://i-blog.csdnimg.cn/direct/4f2d83a28de74c65943223ec4e407e88.png

网格布局:

布局管理局的尺寸都是均等的,需要创建尺寸大小不一致的控件就需要通过拉伸系数来设置

https://i-blog.csdnimg.cn/direct/17b58847e1d845cfa32edc871f210847.png

拉伸系数设为0表示不参与拉伸,拉伸参数固定

表单布局:

这种布局多用于让用户填写信息的场景。

https://i-blog.csdnimg.cn/direct/1cee0f832bfe4143bca7b95e559d561e.png

Spacer:

使用布局管理器时,有时需要在控件之间添加一段空白,可以使用QSpaceItem来表示

https://i-blog.csdnimg.cn/direct/42c84b031b754fdea1d33c3c2c9b5068.png

控件总结:

每个控件都是可扩展的,且每个控件都对应这Qt内置的一个类,可以基于这个类,继承出自定义的类,在自定义的子类中,也可以添加更多的属性和方法