【QT:控件】
目录
控件状态:编辑
geometry :
window frame
windowlcon:
qrc机制
qrc的使用方式:
window opacity
cursor
font:
ToolTip
focusPolicy:
styleSheet:
按钮类控件:
PushButton:
给按钮添加图标:
给按钮添加快捷键
Radio Button:
checkbox:
显示类控件:
编辑文本
显示图片:编辑
LCD Number:
ProgressBar:
calendar:
输入类控件:
Line Edit:
Text Edit:
Combo Box:
Date Edit&Time Edit
Slider:
多元素控件:
List Widget:
TableWidget:
容器类控件:
QGroupBox分组框:
Tab Widget:
布局管理器:
垂直布局:
水平管理器:
网格布局:编辑
表单布局:
控件总结:
QT中提供了很多内置的控件,如:按钮,文本框,单选按钮,复选按钮等控件。
Widget是这些控件的统称。很早的时期开发GUI没有控件的概念,界面上显示的东西全都是“画”出来的,为了提高开发效率,引入控件的概念。
QT中的控件可以对应着HTML中的标签理解,HTML中不同的标签能体现出不同的效果。
QT中的各种控件都是继承QWidget类
控件状态:

在QT Creator的右侧有QWidget的属性,其中enabled描述了控件是否是“可用”状态,与之对应的概念:禁用状态。禁用状态:该控件不能接收任何用户的输入事件,且外观上往往是灰色的,如果一个控件被禁用,那它的子元素也会被禁用。
isEnabled | 获取控件的可用状态 |
setEnabled | 设置控件是否可用。True表示可用,False表示禁用 |
实例:
在同一个界面中,要求不同的控件objectName也是必须不同的,后续可以通过Ui->objectNmae方式获取到对应的控件对象
当前自动生成的ObjectNmae的名字根据控件类型+下划线+数字的方式
clicked信号有两个版本,无参数的,和一个Bool参数的
通过按钮来切换可用状态,实例:
geometry :
表示当前控件的位置和尺寸
geometry | 获取控件的位置和尺寸,返回的结果是一个QRect(矩形),包含了x,y,width,height |
setGeometry(QRect) setGeometry(int x,int y,int width,int height) | 设置控件的位置和尺寸,可以直接设置一个QRect,也可以分四个属性单独设置 |
QPoint表示一个点,QRect表示一个矩形,属于小对象,占用的空间小。
实例:
window frame
在QT中,有的API函数以widget本体的左上角为原点,不考虑window frame,如:geometry()、setGeometry()。有的API函数的位置信息以window frame左上角为原点,如:frameGeometry(),setFrameGeometry()。
windowlcon:
表示窗口图标
windowlcon() | 获取到控件的窗口图标,返回Qlcon(表示一个图标)对象 |
setWindowlcon(const Qlcon& icon) | 设置控件的窗口图标 |
这俩api都是针对顶层窗口使用,对窗口内的控件没有效果
Qlcon是一个比较小的对象,创建之后需要设置到某个QWidget里面,Qlcon对象本身是否释放不影响图标的显示,此外,Qlcon也不支持对象树,无法给它执行父对象,
实例:
注:
- 路径不能带中文
- 路径分隔符使用/
但引用绝对路径的方式不科学的,因为无法确保开发机上的路径和用户电脑上图片的路径完全一致,所以这里使用相对路径更靠谱
qrc机制
- 确保你的图片所在路径在目标用户机器上存在
- 确保图片不会被用户误删
原理:给QT项目引入一个额外的xml文件(后缀名用.qrc表示)在这个xml中吧要使用的图片资源导入进来,并在xml中进行记录。QT在编译项目的时候会根据qrc中描述的图片信息找到图片内容,并提取图片的二进制数据,把这些二进制数据转成C++代码,最终编译到exe中
qrc缺点:无法导入太大的资源文件
qrc的使用方式:
- 在项目中创建qrc,不可以带中文和特殊符号
把文件导入到qrc中
- 先创建一个“前缀”(虚拟目录)
- 把图片导入到资源目录中
注:导入图片时,需要保证导入的图片必须在resource的同级目录下,或者它的子目录中
创建的前缀名叫什么代码中就写什么,当代码需要访问qrc中的文件时,需要在路径上带有前缀
window opacity
调整窗口的透明度。
代码实例:
为什么窗口的不透明度变化并非精确?
浮点数在内存中的存储遵守IEEE 754标准,该标准规定了浮点数要使用二进制的科学计数法方式表示。把浮点数分为三部分:符号位、有效数字、指数部分。有效数字使用二进制表示,且都是小于0的小数部分。第一个有效数字位表示0.5,第二个有效数字位表示0.25,第三个有效数字位表示0.125,例如二进制中小数点后的101,则可以表示0.625(0.5+0.125),但象0.1这样的小数无法精确的表示,只能说无限接近。所以对于float和double的值的比较需要我们使用做差的方式通过比较差的绝对值与误差范围进行比较。采用这种方式的优点:运算速度快,占用空间小,缺点:无法精确表示小数。
cursor
cursor() | 获取到当前widget的cursor属性,返回QCursor对象。当鼠标悬停在该widget上时,就会显示出对应的形状 |
setCursor(const QCursor& cursor) | 设置该widget光标的形状,仅在鼠标停留在该widget上生效 |
QGuiApplication::setOverrideCursor(const QCursor& cursor) | 设置全局光标的形状,对整个程序中的所有widget都会生效,覆盖上面的setCursor设置的内容 |
使用实例:
QT可以自定义图片设置光标,同样使用qrc的机制进行设置
font:
font() | 获取当前widget的字体信息,返回QFont对象 |
setFont(const QFont& font) | 设置当前widget的字体信息 |
QFont:
实例:
ToolTip
一个GUI程序界面复杂,通过向将鼠标悬停弹出提示信息
setToolTip | 设置toolTip,鼠标悬停在该Widget上时会有提示说明 |
setToolTipDuring | 设置toolTip提示的时间,单位ms,时间到后toolTip自动消失 |
这里设置也可以在控件这里设置,不用代码设置
focusPolicy:
focusPolicy() | 获取widget的focusPolicy,返回Qt::FocusPolicy |
setFocusPolicy(Qt::FocusPolicy) | 设置widget的focusPolicy |
通过控件设置焦点
styleSheet:
通过CSS设置widget样式
实例:
按钮类控件:
PushButton:
给按钮添加图标:
给按钮添加快捷键
- 将图片资源添加到qrc中
- 设置按钮
- 设置方向按钮的槽函数
- 设置快捷键,程序一启动,快捷键有效
快捷键默认是连发的,鼠标点击不是,想让鼠标连发可以设置:setAutoRepeat()函数即可连发
Radio Button:
QRadioButton是单选按钮,属性如下:
checkable | 是否能选中 |
checked | 是否已经被选中,checkable是checked的前提条件 |
autoExclusive | 是否排它 选中一个按钮后是否会取消其他按钮的选中 |
radiobutton默认是排他的,当需要“多组”单选按钮时可以选择使用QButtonGroup类可以针对单选按钮进行分组
checkbox:
QCheckbox表示复选按钮,可以允许选中多个。
显示类控件:
编辑文本
显示图片:

将图片自动拉伸填满窗口
但这里存在一个BUG,窗口拉伸后,图片不会跟着填满
所以这里需要引用事件。
在QT中表示用户操作有两种概念:1.信号 2.事件。当用户拖拽修改窗口大小时,就会触发resize事件,而类似与resize事件是连续变化的,把窗口尺寸从A拖到B这个过程中,会触发一系列的resizeEvent,此时就可以通过resizeEvent完成目标功能。让Widget窗口类重写父类(QWidget)的resizeEvent虚函数,在鼠标拖动窗口的过程中,该函数会被反复调用
Qlabel的文本对齐:
setAlignment(Qt::Alignment) | 设置文本对齐 |
setWordWrap(bool) | 设置自动换行 |
setIndent(int) | 设置缩减(此处设置缩进,即使换行后续的行也会产生缩进) |
setMargin(int) | 设置边距 |
QLable设置伙伴:
Qt中,QLabel中写的文本是指定“快捷键”的,此处快捷键的规则功能上要比QPushButton弱很多,在文本上,需要使用&和一个字符来表示快捷键,例如&A就需要通过键盘上的Alt+A触发这个快捷键,绑定伙伴后就可以通过快捷键触发选中对应的按钮
LCD Number:
intValue | QLCDNumber显示的数字值 |
value | QLCDNumber显示的数字值,和 |
digitCount | 显示几位数字 |
mode | 数字显示形式 |
segmentStyle | 设置显示风格 |
smallDecimalpoint | 设置比较小的小数点 |
倒计时实例:
为什么下面代码没有显示?会先执行widget的构造函数,构造函数执行
完毕后才会执行后续的显示操作
想法1:在构造函数中创建一个线程,在新线程中执行上述代码。
显然方法是不可行的,因为QT中界面有一个专门的线程负责维护更新的(主线程)
对GUI来说,内部包含了很多隐藏状态,QT为了保证修改界面的过程中,线程安全不受影响的,所以QT禁止了其他线程直接修改界面,同时QT为了确保线程安全,要求所有的对界面的修改操作必须在主线程中完成。
对于Qt的槽函数来讲,默认情况下,槽函数都是由主线程调用的,在槽函数中修改界面没有任何问题
ProgressBar:
mininum | 进度条最小值 |
maxinum | 进度条最大值 |
value | 进度条当前值 |
textVisible | 进度条数字是否可见 |
orientation | 是否朝反方向增长进度 |
textDirection | 文本的朝向 |
alignment | 文本在进度条的对齐方式 |
format | 展示的数字格式 |
创建一个进度条:
calendar:
selectDate | 当前选中的日期 |
minimumDate | 最小日期 |
maximumDate | 最大日期 |
firstDayOfWeek | 每周的第一天 |
gridVisible | 是否显示表格的边框 |
selectionMode | 是否允许选择日期 |
dateEditEnabled | 是否允许日期被编辑 |
navigationBarVisible | 日历上方标题是否显示 |
输入类控件:
Line Edit:
text | 输入框中的文本 |
inputMask | 输入内容格式约束 |
maxLength | 最大长度 |
frame | 是否添加边框 |
echoMode | 显示方式 |
clearButtonEnabled | 当输入框中有内容时,右侧会出现删除的按钮 |
各函数的使用实例:
基于正则表达式的验证
不显示密码两次验证:
切换显示密码状态:
Text Edit:
表示多行输入框,也是一个富文本&markdown编辑器,并且能够在内容超出编辑范围时自动提供滚条。QTextEdit不仅能表示纯文本还可以表示html和markdown,QPlainTextEdit只能表示纯文本
markdown | 支持markdown格式,能够自动的对markdown文本进行渲染成html |
html | 可以支持大部分html标签 |
placeHolderText | 输入框为空时提示内容 |
readOnly | 是否是只读的 |
acceptRichText | 是否接收富文本内容 |
演示QTextEdit信号
Combo Box:
表示下拉框
addltem(const QString&) | 添加一个条目 |
currentIndex() | 获取当前条目的下标 |
currentText() | 获取当前条目的文本内容 |
activated(int) activated(const QString& text) | 当用户选择了一个选项时发出。这时相当于用户点开下拉框并且鼠标滑过某个选项,还没有做出选择 |
currentIndexChanged(int) currentIndexChanged(const QString& text) | 当选项改变时发出 此时用户已经明确选择了一个选项,用户操作或者通过程序操作都会触发这个信号 |
editTextChanged(const QString& text) | 当编辑框中的文本改变时发出(editable为true时有效) |
使用这个下拉菜单模拟点餐:
除了用代码写,也可以跳转到Ui界面,右击下拉框
spin box(微调框)
带有按钮的的输入框,可以通过按钮来修改数值大小
value | 存储的数值 |
singleStep | 按下按钮变化的步长 |
displayInteger | 数字的进制 |
wraping | 是否允许换行 |
…… |
textChanged(QString) | 微调框的文本发生变化时会触发,参数QString带有前缀和后缀 |
valueChanged(int) | 微调框的文本发生改变时会触发,参数int 表示当前值 |
基于麦当劳点餐的模拟实现按钮微调实例:
Date Edit&Time Edit
Qt::LocalTime:显示本地时间,Qt::UTC:显示协调世界时
QDateTime提供了两个函数:daysTo计算两个时间的日期的差值,secsTo计算两个时间的秒数的差值
dateChanged(QDate) | 日期改变时触发 |
timeChanged(QTime) | 时间改变时触发 |
dateTimeChanged(QDateTime) | 时间日期任意一个改变时触发 |
计算两个日期的差值:
Dial:
通过旋钮来调节窗口透明度:
Slider:
表示一个滑动条
valueChanged(int) | 数值改变时触发 |
rangeChanged(int ,int) | 范围变化时触发 |
在窗口上放入两个滑动条,滑动两个滑动条来调节窗口大小,代码实例:
自定义快捷键,通过快捷键操作滑动条:
多元素控件:
QListWidget | 列表 |
QListView | |
QTableWidget | 表格 |
QTableView | |
QTreeWidget | 树形 |
QTreeView |
不难发现上面的共同点,后缀都是一样的,xxView是更底层的实现, xxWidget是基于xxView封装而来的,此处的xxView是MV结构的一种典型实现,MVC是软件开发中经典的软件结构的组织形式
List Widget:
可以纵向显示列表
current | 当前选中的是第几行 |
count | 一共有多少行数 |
sortingEnabled | 能否允许排序 |
isWrapping | 能否允许换行 |
itemAlignment | 元素的对齐方式 |
selectRectVisible | 被选中的元素矩形是否可见 |
spacing | 元素之间的间隔 |
listwidget添加元素可以通过代码添加,也可以通过图形化界面添加(右击QListWidget选择编辑选项)如果初始化内容固定,两种方法都可,如果内容不固定,需要通过读取网络或者文件构造数据就只能使用代码来添加
TableWidget:
Tree Widget:
表示的是一个树形控件,里面的每个元素都是一个QTreeWidegetItem,每个QTreeWidegetItem可以包含多个文本和图标,每个文本/图标为一个列,可以给QTreeWidget设置顶层节点(顶层节点可以多个),再给顶层节点添加子节点,从而构成树形结构
clear | 清空所有子节点 |
addTopLevelItem(QTreeWidgetItem* item) | 新增顶层节点 |
topLeventItem(int index) | 获取指定下标的顶层节点 |
topLevelItemCount() | 获取顶层节点个数 |
currentItem() | 获取到当前选中的节点 |
代码实例:
容器类控件:
QGroupBox分组框:
让界面更加清晰明了,效果如图:
Tab Widget:
实现一个带有标签的控件,可以往里面添加一些widget,进一步通过标签页来切换
tabPositon | 标签页所在的位置 |
currentIndex | 当前选中了第几个标签页 |
currentTabText | 当前选中标签页的文本 |
currentTabName | 当前选中标签页的名字 |
currentTablcon | 当前选中的标签页的图标 |
movable | 标签页是否可以移动 |
创建一个程序,带有tablewidget作为标签页,提供两个按钮,分别创建新的标签页和关闭当前选中的标签页,当切换标签页时可以感知变化
布局管理器:
在此之前对控件的布局都是手动的,但是手动调整布局不科学,所以使用布局管理器可以让布局更科学,窗口大小自适应。
垂直布局:
使用QVBoxLayout表示垂直的布局管理器,Layout只是用于界面布局,并没有提供信号
每个widget只能设置一个布局管理器
如果在代码中创建layout只是创建了layout,而在qtdesinger中创建的layout,是先创建了一个widget然后再在这个新的widget中添加一个layout。
水平管理器:
布局管理器也可以嵌套使用,如下:
网格布局:

布局管理局的尺寸都是均等的,需要创建尺寸大小不一致的控件就需要通过拉伸系数来设置
拉伸系数设为0表示不参与拉伸,拉伸参数固定
表单布局:
这种布局多用于让用户填写信息的场景。
Spacer:
使用布局管理器时,有时需要在控件之间添加一段空白,可以使用QSpaceItem来表示
控件总结:
每个控件都是可扩展的,且每个控件都对应这Qt内置的一个类,可以基于这个类,继承出自定义的类,在自定义的子类中,也可以添加更多的属性和方法