当前位置: 首页 > news >正文

【QT】控件二(输入类控件、多元素控件、容器类控件与布局管理器)

文章目录

  • 1.输入类控件
    • 1.1 LineEdit
    • 1.2 Text Edit
    • 1.3 Combo Box
    • 1.4 SpinBox
    • 1.5 Date Edit & Time Edit
    • 1.6 Dial
    • 1.7 Slider
  • 2. 多元素控件
    • 2.1 List Widget
    • 2.2 Table Widget
    • 2.3 Tree Widget
  • 3. 容器类控件
    • 3.1 Group Box
    • 3.2 Tab Widget
  • 4. 布局管理器
    • 4.1 垂直布局
    • 4.2 水平布局
    • 4.3 网格布局
    • 4.4 表单布局
    • 4.5 Spacer

在这里插入图片描述

1.输入类控件

1.1 LineEdit

QLineEdit ⽤来表示单行输⼊框,可以输⼊一段文本,但是不能换行

核心属性说明

属性说明
text输⼊框中的⽂本
inputMask输⼊内容格式约束
maxLength最⼤⻓度
frame是否添加边框
echoMode显⽰⽅式。QLineEdit::Normal :这是默认值,⽂本框会显⽰输⼊的⽂本。 QLineEdit::Password :在这种模式下,输⼊的字符会被隐藏,通常⽤星号(*)或等号(=)代替QLineEdit::NoEcho :在这种模式下,⽂本框不会显⽰任何输⼊的字符。
cursorPosition光标所在位置
alignment文字对齐方式,设置⽔平和垂直⽅向的对⻬
dragEnabled是否允许拖拽
readOnly是否是只读的(不允许修改);类似于label
placeHolderText当输⼊框内容为空的时候,显示什么样的提⽰信息
clearButtonEnabled是否会自动显示出 “清除按钮”

核心信号

信号说明
void cursorPositionChanged(int old, int new)⿏标移动时发出此信号,old为先前的位置,new为新位置
void editingFinished()当按返回或者回⻋键时,或者⾏编辑失去焦点时,发出此信号
void returnPressed()当返回或回⻋键按下时发出此信号. 如果设置了验证器, 必须要验证通过, 才能触发.
void selectionChanged()选中的⽂本改变时,发出此信号
void textChanged(const QString &text)当QLineEdit中的⽂本改变时,发出此信号,text是新的⽂本。 代码对⽂本的修改能够触发这个信号.
void textEdited(const QString &text))当QLineEdit中的⽂本改变时,发出此信号,text是新的⽂本。 代码对⽂本的修改不能够触发这个信号
  1. 录入个人信息的案例:

在这里插入图片描述

  1. inputMask 只能进行简单的输⼊格式校验,实际开发中,基于正则表达式的方式是更核心的方法,下面我们来看一下正则表达式

此处要求在输⼊框中输⼊⼀个合法的电话号码(1 开头, 11 位, 全都是数字)。如果验证不通过,则确定按钮⽆法点击

  • 使用 QRegExp 创建⼀个正则表达式对象. “^1\\d{10}$” 表⽰ “以 1 开头, 后⾯跟上任意的10个⼗进制数字”.
  • 使用 QRegExpValidator 创建⼀个验证器对象. Qt 中内置了四个主要的验证器对象
    在这里插入图片描述

给 lineEdit 添加 textEdited 信号的 slot 函数

在这里插入图片描述
执⾏程序,观察效果,可以看到此时尝试输⼊字⺟是⽆法输⼊的,并且只有当输⼊的内容符合要求,确定按钮才能被使⽤。

  1. 其它属性:Alignment、MaxLength、槽函数

在这里插入图片描述

  1. 切换显示密码

在这里插入图片描述

1.2 Text Edit

QTextEdit 表示多行输⼊框,也是⼀个富文本 & markdown 编辑器,并且能在内容超出编辑框范围时⾃动提供滚动条。

属性说明
markdown输⼊框内持有的内容. ⽀持 markdown 格式. 能够⾃动的对markdown ⽂本进⾏渲染成 html
html输⼊框内持有的内容. 可以⽀持⼤部分 html 标签. 包括 img 和 table 等
placeHolderText输⼊框为空时提⽰的内容
readOnly是否是只读的
undoRedoEnable是否开启 undo / redo 功能。 按下 ctrl + z 触发 undo;按下 ctrl + y 触发 redo
autoFormating开启⾃动格式化.
tabstopWidth按下缩进占多少空间
overwriteMode是否开启覆盖写模式
acceptRichText是否接收富⽂本内容
verticalScrollBarPolicy垂直⽅向滚动条的出现策略 Qt::ScrollBarAsNeeded : 根据内容⾃动决定是否需要滚动条,这是默认值。 Qt::ScrollBarAlwaysOff : 总是关闭滚动条; Qt::ScrollBarAlwaysOn : 总是显⽰滚动条
horizontalScrollBarPolicy⽔平⽅向滚动条的出现策略 Qt::ScrollBarAsNeeded : 根据内容⾃动决定是否需要滚动条,这是默认值。 Qt::ScrollBarAlwaysOff : 总是关闭滚动条。 Qt::ScrollBarAlwaysOn : 总是显⽰滚动条。

核心信号:

信号说明
textChanged()⽂本内容改变时触发
selectionChanged()选中范围改变时触发
cursorPositionChanged()光标移动时触发
undoAvailable(bool)可以进⾏ undo 操作时触发
redoAvailable(bool)可以进⾏ redo 操作时触发
copyAvaiable(bool)⽂本被选中/取消选中时触发
  1. 获取多行输入框的内容

在这里插入图片描述

  1. 测试undo、redo、copy

在这里插入图片描述

1.3 Combo Box

QCombo Box 表示下拉框

属性说明
currentText当前选中的⽂本
currentIndex当前选中的条⽬下标,从 0 开始计算. 如果当前没有条⽬被选中, 值为 -1
editable是否允许修改 设为 true 时, QComboBox 的⾏为就⾮常接近 QLineEdit ,也可以设置 validator
iconSize下拉框图标 (⼩三⻆) 的大小
maxCount最多允许有多少个条⽬

核心方法

属性说明
addItem(const QString&)添加⼀个条⽬
currentIndex()当前选中的条⽬下标,从 0 开始计算. 如果当前没有条⽬被选中, 值为 -1
currentText()获取当前条⽬的⽂本内容

核心信号

信号说明
activated(int)当⽤⼾选择了⼀个选项时发出(下标)
activated(const QString & text)当⽤⼾选择了⼀个选项时发出(内容)
currentIndexChanged(int)当前选项改变时发出
currentIndexChanged(const QString & text)此时⽤⼾已经明确的选择了⼀个选项
editTextChanged(const QString & text)当编辑框中的⽂本改变时发出 (editable 为 true 时有效)
  1. 下面我们使用下拉框,实现一个点餐案例

在这里插入图片描述
很多时候下拉框的选项并非是固定的,而是通过读取文件/读取网络获取到的

  1. 从文件中读取

创建文件,编写选项,每个选项占⼀行

在这里插入图片描述

  • Qt 中也提供了 QFile 实现读写⽂件的功能. 当然使⽤ C++ 标准库的 std::fstream 也是完全可以的.
  • 之所以存在两套, 是因为 Qt 诞⽣较早 (1991 年左右), 此时 C++ 还没有完成 “标准化” 的⼯作, C++ 标准库这样的概念⾃然也没有诞⽣.
  • 因此 Qt 就⾃⼰打造了⼀套库, 实现了字符串, 容器, ⽂件操作, 多线程, ⽹络操作, 定时器, 正则表达式等内容

1.4 SpinBox

使用 QSpinBox 或者 QDoubleSpinBox 表示 “微调框”,它是带有按钮的输⼊框, 可以⽤来输⼊整数/浮点数,通过点击按钮来修改数值大小

属性说明
value存储的数值
singleStep每次调整的 “步⻓”. 按下⼀次按钮数据变化多少
displayInteger数字的进制. 例如 displayInteger 设为 10, 则是按照 10 进制表⽰. 设为 2 则为 2 进制表⽰
minimum、maximum最小值、最大值
wrapping是否允许换行
suffix、prefix后缀、前缀
buttonSymbol按钮上的图标。UpDownArrows 上下箭头形式 PlusMinus 加减号形式 NoButtons 没有按钮
accelerated按下按钮时是否为快速调整模式
correctionMode输⼊有误时如何修正。如果⽤⼾输⼊了⼀个⽆效的值,那么SpinBox会恢复为上⼀个有效值

核心信号

信号说明
textChanged(QString)微调框的⽂本发⽣改变时会触发,参数 QString 带有 前缀 和 后缀
valueChanged(int)微调框的⽂本发⽣改变时会触发,参数 int 表⽰当前的数值

该控件较为简单,就不过多赘述了
在这里插入图片描述

1.5 Date Edit & Time Edit

在这里插入图片描述
这⼏个控件⽤法⾮常相似,我们以 QDateTimeEdit 为例进⾏介绍

属性说明
dateTime时间⽇期的值. 形如 2000/1/1 0:00:00
date单纯⽇期的值. 形如 2001/1/1
time单纯时间的值. 形如 0:00:00
displayFormat时间⽇期格式. 形如 yyyy/M/d H:mm::ss (这⾥的格式化符号的含义,不同语⾔/库的设定规则是存在差异的)
minimumDateTime、maximumDateTime最小、最大时间日期
timeSpecQt::LocalTime :显⽰本地时间、 Qt::UTC :显⽰协调世界时(UTC)、Qt::OffsetFromUTC :显⽰相对于UTC的偏移量(时差)

核心信号

信号说明
dateChanged(QDate)⽇期改变时触发
timeChanged(QTime)时间改变时触发
dateTimeChanged(QDateTime)时间⽇期任意⼀个改变时触发.
  1. 案例:实现日期计算器
  • 使⽤ daysTo 函数可以计算两个⽇期的天数. time.daysTo(time2),使用time2-time1
  • 使⽤ secsTo 函数可以计算两个时间的秒数.
  • 通过 (秒数 / 3600) 换算成⼩时数, 再余上 24 得到零⼏个⼩时

在这里插入图片描述

1.6 Dial

使用 QDial 表示⼀个 旋钮

核心属性

属性说明
value持有的数值
minimum、maximum最小值、最大值
singleStep按下⽅向键的时候改变的步⻓
pageStep按下 pageUp / pageDown 的时候改变的步⻓
sliderPosition界面上旋钮显⽰的 初始位置
wrapping是否允许循环调整. 即数值如果超过最⼤值, 是否允许回到最⼩值. (调整过程能否 “套圈”)
value持有的数值
notchesVisible是否显示刻度线
notchTarget刻度线之间的相对位置. 数字越⼤, 刻度线越稀疏.

核心信号

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

使用旋钮调整不透明度
在这里插入图片描述

1.7 Slider

使用 QSlider 表示⼀个滑动条

QSlider 和 QDial 都是继承⾃ QAbstractSlider ,因此⽤法上基本相同.

下面值罗列一下Slider的核心属性

属性说明
sliderPosition滑动条显⽰的 初始位置
tracking外观是否会跟踪数值变化. 默认值为 true. ⼀般不需要修改
orientation滑动条的⽅向是⽔平还是垂直
invertedAppearance是否要翻转滑动条的⽅向
tickPosition刻度的位置
tickInterval刻度的密集程度
  1. 案例: 在界面上创建两个滑动条,分别是水平和垂直滑动条,用来调整窗口大小

在这里插入图片描述

  1. 通过自定义快捷键调整滑动条位置

设置 - 减小 value,设置 = 增加 value

默认情况下滑动条可以通过方向键或者 pageUp / pageDown 调整大小

在这里插入图片描述

2. 多元素控件

Qt 中提供的多元素控件有:

  • QListWidget
  • QListView
  • QTableWidget
  • QTableView
  • QTreeWidget
  • QTreeView
  • QTableView 是基于 MVC 设计的控件,QTableView 自身不持有数据,使用 QTableView 的时候需要⽤⼾创建⼀个 Model 对象 (比如 QStandardModel ),并且把 Model 和 QTableView 关联起来,后续修改 Model 中的数据就会影响 QTableView 的显示;修改 QTableView 的显示也会影响到 Model 中的数据(双向绑定).
  • QTableWidget 则是 QTableView 的子类,对 Model 进行了封装,不需要用户手动创建 Model 对象,直接就可以往 QTableWidget 中添加数据了

2.1 List Widget

使用 QListWidget 能够显示⼀个纵向的列表,其中的每个选项都可以被选中

核心属性

属性说明
currentRow当前被选中的是第几行
count⼀共有多少⾏
sortingEnabled是否允许排序
isWrapping是否允许换⾏
itemAlignment元素的对⻬⽅式
selectRectVisible被选中的元素矩形是否可⻅
spacing元素之间的间隔

核心方法

属性说明
addItem(const QString& label)列表中添加元素
addItem(QListWidgetItem *item)列表中添加元素
currentItem()返回 QListWidgetItem* 表⽰当前选中的元素
setCurrentItem(QListWidgetItem* item)设置选中哪个元素
setCurrentRow(int row)设置选中第⼏⾏的元素
insertItem(const QString& label, int row)在指定的位置插⼊元素
insertItem(QListWidgetItem *item, int row)在指定的位置插⼊元素
item(int row)返回 QListWidgetItem* 表⽰第 row ⾏的元素
takeItem(int row)删除指定⾏的元素, 返回 QListWidgetItem* 表⽰是哪个元素被删除了

还有核心信号这里就不罗列了

在上述介绍中,涉及到⼀个关键的类, QListWidgetItem,这个类表⽰ QListWidget 中的⼀个元素.
核心方法如下,本质上就是⼀个 “文本+图标” 构成的

方法说明
setFont设置字体
setIcon设置图标
setHidden设置隐藏
setSizeHint设置尺⼨
setSelected设置是否选中
setText设置⽂本
setTextAlignment设置⽂本对⻬⽅式

在界⾯上创建⼀个 ListView , 右键 => 变形为 => ListWidget

在这里插入图片描述

2.2 Table Widget

核心方法
在这里插入图片描述

  1. 创建表,设置表头名称

在这里插入图片描述

  1. 增加行/列

在这里插入图片描述

默认情况下,单元格中的内容直接就是可编辑的如果不想让用户编辑,可以设置 ui->tableWidget-> setEditTriggers(QAbstractItemView::NoEditTriggers);

2.3 Tree Widget

QTreeWidget 核心方法
在这里插入图片描述

QTreeWidgetItem 核心方法

方法说明
addChild(QTreeWidgetItem* child)新增⼦节点
childCount()⼦节点的个数
child(int index)获取指定下标的⼦节点. 返回 QTreeWidgetItem*
takeChild(int index)删除对应下标的⼦节点
removeChild(QTreeWidgetItem* child)删除对应的⼦节点
parent()获取该元素的⽗节点

QTreeWidget 支持多列显示,每一列都有一个从左到右的索引编号。索引从 0 开始,0 表示第一列,1 表示第二列,依此类推
在这里插入图片描述

设置槽函数
在这里插入图片描述

3. 容器类控件

3.1 Group Box

使用 QGroupBox 实现⼀个带有标题的分组框,可以把其他的控件放到里面作为⼀组,这样看起来能更好看⼀点.

可以把控件放到Group Box中,这些内部的控件的父元素就是这个Group Box了

核心属性

方法说明
title分组框的标题
alignment分组框内部内容的对⻬⽅式
checkable是否可选择. 设为 true, 则在 title 前⽅会多出⼀个可勾选的部分
checked描述分组框的选择状态 (前提是 checkable 为 true)

在这里插入图片描述

3.2 Tab Widget

使用 QTabWidget 实现⼀个带有标签页控件,可以往⾥⾯添加⼀些 widget. 进⼀步的就可以通过标签页来切换

核心属性

方法说明
tabPosition标签⻚所在的位置. North 上⽅ South 下⽅ West 左侧 East 右侧
currentIndex当前选中了第⼏个标签⻚ (从 0 开始计算)
currentTabText当前选中的标签⻚的⽂本
currentTabName当前选中的标签⻚的名字
currentTabIcon当前选中的标签⻚的图标
currentTabToolTip当前选中的标签⻚的提⽰信息
tabsCloseable标签⻚是否可以关闭
movable标签⻚是否可以移动

核心信号

方法说明
currentChanged(int)在标签⻚发⽣切换时触发, 参数为被点击的选项卡编号
tabBarClicked(int)在点击选项卡的标签条的时候触发. 参数为被点击的选项卡编号.
tabCloseRequest(int)在标签⻚关闭时触发,参数为被关闭的选项卡编号

在这里插入图片描述
实现部分槽函数
在这里插入图片描述

4. 布局管理器

之前使用 Qt 在界⾯上创建的控件,都是通过 “绝对定位” 的方式来设定的。也就是每个控件所在的位置,都需要计算坐标,最终通过 setGeometry 或者 move 方式摆放过去。

这种设定⽅式其实并不⽅便,尤其是界⾯如果内容⽐较多,不好计算。而且⼀个窗口大小往往是可以调整的, 按照绝对定位的⽅式,也⽆法自适应窗口大小。

因此 Qt 引⼊ “布局管理器” (Layout) 机制来解决上述问题

4.1 垂直布局

使用 QVBoxLayout 表示垂直的布局管理器( V 是 vertical 的缩写)

核心属性

方法说明
layoutLeftMargin左侧边距
layoutRightMargin右侧边距
layoutTopMargin上⽅边距
layoutBottomMargin下⽅边距
layoutSpacing相邻元素之间的间距

注意:Layout 只是⽤于界⾯布局,并没有提供信号

在这里插入图片描述
注意:⼀个 widget 只能包含⼀个 layout

通过 Qt Designer 创建的布局管理器,其实是先创建了⼀个 widget,设置过 geometry 属性的,再把这个 layout 设置到这个 widget 中,此时的布局并不会随着窗口大小的改变而改变

4.2 水平布局

核心属性与垂直布局相同,这里就不赘述了

在这里插入图片描述
使用嵌套布局

在这里插入图片描述

4.3 网格布局

Qt 中还提供了 QGridLayout 用来实现网格布局的效果,可以达到 M * N 的这种网格的效果

核心属性

方法说明
layoutLeftMargin左侧边距
layoutRightMargin右侧边距
layoutTopMargin上⽅边距
layoutBottomMargin下⽅边距
layoutHorizontalSpacing相邻元素之间⽔平⽅向的间距
layoutVerticalSpacing相邻元素之间垂直⽅向的间距
layoutRowStretch⾏⽅向的拉伸系数
layoutColumnStretch列⽅向的拉伸系数

在这里插入图片描述

设置行和列的时候,如果设置的是⼀个很⼤的值,但是这个值和上⼀个值之间并没有其他的元素,那么并不会在中间腾出额外的空间

在这里插入图片描述

另外,QGridLayout 也提供了 setRowStretch 设置⾏之间的拉伸系数,上述案例中,直接设置
setRowStretch 效果不明显,因为每个按钮的⾼度是固定的,需要把按钮的垂直⽅向的 sizePolicy 属性设置为
QSizePolicy::Expanding 尽可能填充满布局管理器,才能看到效果.

使用 setSizePolicy 设置按钮的尺⼨策略,可选的值如下:

  • QSizePolicy::Ignored : 忽略控件的尺⼨,不对布局产⽣影响。
  • QSizePolicy::Minimum : 控件的最⼩尺⼨为固定值,布局时不会超过该值。
  • QSizePolicy::Maximum : 控件的最⼤尺⼨为固定值,布局时不会⼩于该值。
  • QSizePolicy::Preferred : 控件的理想尺⼨为固定值,布局时会尽量接近该值。
  • QSizePolicy::Expanding : 控件的尺⼨可以根据空间调整,尽可能占据更多空间。
  • QSizePolicy::Shrinking : 控件的尺⼨可以根据空间调整,尽可能缩⼩以适应空间

在这里插入图片描述

4.4 表单布局

上述的布局管理器之外,Qt 还提供了 QFormLayout,属于是 QGridLayout 的特殊情况,专门用于实现两列表单的布局。

这种表单布局多用于让用户填写信息的场景,左侧列为提示,右侧列为输⼊框

在这里插入图片描述

4.5 Spacer

使⽤布局管理器的时候, 可能需要在控件之间, 添加⼀段空⽩. 就可以使⽤ QSpacerItem 来表⽰.

方法说明
width宽度
height⾼度
hData⽔平⽅向的 sizePolicy
vData垂直⽅向的 sizePolicy

在这里插入图片描述
在这里插入图片描述

相关文章:

  • 前端开发面试题总结-vue2框架篇(三)
  • 【6G技术探索】MCP协议整理分享
  • 黑马python(七)
  • 使用SymPy进行欧拉角与RPY角的符号与数值计算
  • 网络层协议 IP 协议介绍 -- IP 协议,网段划分,私有 IP 和 公网 IP,路由
  • java复习 20
  • VB逆向基础(一)
  • 【数据库】KingbaseES在线体验平台深度测试:从基础操作到增删改查实战
  • ffmpeg webm 透明通道视频转成rgba图片
  • 九日集训第六天
  • 基于Qt的配置管理界面实现:保存与加载配置文件
  • 338比特位技术
  • Day03_数据结构(手写)
  • rockylinuxapache和Linux服务配置
  • Python+pymysql中select count(*)/select *使用方式
  • 安装谷歌vue开发工具插件devtools支持vue2
  • linux内核-写时复制之实验+源码分析
  • Ajax 核心知识点全面总结
  • day40- 硬件学习之 51单片机II (中断处理)
  • 【MySQL】MySQL 数据库操作与设计
  • 建设项目环境影响评价公示网站/全国最大的关键词挖掘
  • 如何设计网站栏目/怎么在百度上推广自己的产品
  • 做网站推广的公司发展前景/广告留电话号的网站
  • 企业做网站的注意什么问题/宁德市蕉城区
  • 小说网站充值接口怎么做的/海南网站设计
  • 做初中试卷的网站/百度推广天津总代理