目录
1. Line Edit
2. Text Edit
3. Combo Box
4. Spin Box
5. Date Edit & Time Edit
6. Dial
7. Slider
1. Line Edit
QLineEdit ⽤来表示单行输入框. 可以输⼊⼀段⽂本, 但是不能换⾏.
核心属性
| 属性 | 说明 |
| text | 输⼊框中的⽂本 |
| inputMask | 输⼊内容格式约束 |
| maxLength | 最⼤⻓度 |
| frame | 是否添加边框 |
| echoMode | 显示方式:
|
| cursorPosition | 光标所在位置 |
| alignment | ⽂字对齐方式, 设置水平和垂直方向的对齐 |
| dragEnabled | 是否允许拖拽 |
| readOnly | 是否是只读的(不允许修改) |
| 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是新的⽂本。 代码对⽂本的修改不能触发这个信号. |
eg:让用户输入个人信息:姓名、密码、性别、电话,通过提交按钮,把上述内容统一获取到
姓名:
没有进行输入时便有提示:
一输入,提示便消失:
此时,后面还有清除的按钮:
密码:
同样的有提示:
输入的密码,以原点的形式来显示,同时也有清除的按钮:
电话:
电话的文本框中有一定的格式:
必须是:3-4-4的格式进行输入:
inputMask 可以针对输入框中的内容进行简单的校验
对提交按钮进行设置,当一点提交按钮的时候,可以将上面的内容简单的显示出来,实际开发中可以通过网络把数据发给服务器:
inputMask 功能比较优先,只能进行简单的验证,要需要比较复杂的功能,就需要使用 “正则表达式”
正则表达式,本质上就是一个带有特殊字符的字符串,特殊字符用来表示另一个字符串的特征。此时就可以借助正则表达式来描述出一些具有一定特点的字符串。基于这些特点,就可以完成字符串的匹配。
正则表达式在用到的时候又去查。
按钮在开始的时候是禁用的状态
当用户在输入框中输入的内容是否为合法的手机号码,如果是就显示为可以提交的状态,如果不是,按钮是禁用的状态。
上述代码只是注册一个验证器,具体验证器怎么使用,还需要写其它代码来完成。
验证输入框的内容,是否合法。只要输入框中的内容发生改变了,验证操作就应该被执行。
第一个参数:是要验证的字符串,参数类型是:QString&,不是 const
所以,text 不能直接使用
第二个参数:如果你的字符串不符合规则,是从哪个位置开始不符合的,但是实际上这个参数没有太大的用处
virtual QValidator::State validate(QString& input, int& pos) const override,返回类型是枚举类型:
输入数字为10位的时候仍然是不可用的:
但是当我们在输入一位的时候,此时按钮就变为可用的状态:
eg:验证两次密码的一致性
使用 testEdited 信号,来触发对于两个输入框内容的判定:
修改代码:
但是这里显示的有警告:
解决方法:类型转换
这个写法对于代码的实际墨迹是没有任何影响的,同时可以“骗过”编译器,警告就没有了。
eg:针对密码,可以切换 “显示密码” 的状态
运行:
2. Text Edit
QPlainTextEdit:也是表示多行输入框,但是只能表示纯文本(Plain Text)
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 | 垂直⽅向滚动条的出现策略
|
| horizontalScrollBarPolicy | ⽔平⽅向滚动条的出现策略
|
核心信号
| 信号 | 说明 |
| textChanged() | ⽂本内容改变时触发 |
| selectionChanged() | 选中范围改变时触发 |
| cursorPositionChanged() | 光标移动时触发 |
| undoAvailable(bool) | 可以进⾏ undo 操作时触发 |
| redoAvailable(bool) | 可以进⾏ redo 操作时触发 |
| copyAvaiable(bool) | ⽂本被选中/取消选中时触发 |
eg:获取多行输入框的内容
此时的 kkkk 不是敲在了 输入框里面,而是输入到了 “输入法给你提供的窗口中”,当你按下空格键或者是回车键的时候,输入法的内容才会进入输入框中,所谓的输入法,其实是单独的一个窗口。所以不会显示到上面的 label 中。
eg:演示 QTextEdit 的信号
textChanged():内容改变触发该信号
selectionChanged:选中内容改变触发该信号
运行:
cursorPositionChanged:光标位置改变触发该信号
undoAvailable (bool)、redoAvailable (bool)、copyAvailable(bool b)
输入一个字符之后,便可进行undoAvailable 操作:
ctrl + z 之后:undoAvailable false,redoAvailable: true
ctrl + y 之后:undoAvailable true,redoAvailable: false
选中内容之后:copyAvailable: true
取消选中之后:copyAvailable: false
3. Combo Box
QComboBox 表示下拉框
核心属性
| 属性 | 说明 |
| 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 时有效) |
eg:模拟一下塔斯汀点餐
运行:
也可通过图形化的界面完成上面的操作:
右键,选择编辑项目:
也是可以完成项目的添加,后面的小食和饮料的操作也是如此
下拉框中内容不是写死的,而是通过文件/网络加载数据得到的:选课操作,以文件加载为例:
修改文件内容后,需要重启程序才能更新内容。
4. Spin Box
使⽤ QSpinBox 或者 QDoubleSpinBox 表示"微调框", 它是带有按钮的输⼊框. 可以⽤来输⼊整数/浮点数. 通过点击按钮来修改数值大小.由于 SpinBox 和 QDoubleSpinBox 用法基本相同, 就只介绍 SpinBox 的使⽤了
QSpinBox 关键属性
| 属性 | 说明 |
| value | 存储的数值. |
| singleStep | 每次调整的 "步⻓". 按下⼀次按钮数据变化多少. |
| displayInteger | 数字的进制. 例如 displayInteger 设为 10, 则是按照 10 进制表示意. 设为 2 则为 2进制表示. |
| minimum | 最小值 |
| maximum | 最大值 |
| suffix | 后缀 |
| prefix | 前缀 |
| wrapping | 是否允许换行 |
| frame | 是否带边框 |
| alignment | ⽂字对齐方式. |
| readOnly | 是否允许修改 |
| buttonSymbol | 按钮上的图标.
|
| accelerated (加速的) | 按下按钮时是否为快速调整模式 |
| correctionMode | 输⼊有误时如何修正.
|
| keyboardTrack | 是否开启键盘跟踪. 设为 true, 每次在输⼊框输⼊⼀个数字, 都会触发⼀次 valueChanged() 和 textChanged() 信号. 设为 false, 只有在最终按下 enter 或者输⼊框失去焦点, 才会触发valueChanged() 和 textChanged() 信号. |
核心信号
| 信号 | 说明 |
| textChanged(QString) | 微调框的⽂本发⽣改变时会触发. 参数 QString 带有 前缀 和 后缀 |
| valueChanged(int) | 微调框的⽂本发⽣改变时会触发. 参数 int, 表⽰当前的数值. |
通过 下拉框 选择每个食物 的种类,再通过 微调框 来选择数量
规定:下单数应该最少是1才行,每种吃的最大的单数不超过20。
5. Date Edit & Time Edit
使⽤ QDateEdit 作为⽇期的微调框.
使⽤ QTimeEdit 作为时间的微调框.
使⽤ QDateTimeEdit 作为时间⽇期的微调框.
这⼏个控件⽤法⾮常相似, 我们以 QDateTimeEdit 为例进⾏介绍.
QDateTimeEdit 核心属性
| 属性 | 说明 |
| dateTime | 时间⽇期的值. 形如 2000/1/1 0:00:00 |
| date | 单纯⽇期的值. 形如 2001/1/1 |
| time | 单纯时间的值. 形如 0:00:00 |
| displayFormat | 时间⽇期格式. 形如 yyyy/M/d H:mm M 表示⽉份 注意: 这⾥的格式化符号的含义, 不要记忆. 不同语⾔/库的设定规则是存在差异的. ⼀定是⽤的时候再去查. |
| minimumDateTime | 最小时间⽇期 |
| maximumDateTime | 最大时间⽇期 |
| timeSpec | Qt::LocalTime :显⽰本地时间。 Qt::UTC :显⽰协调世界时(UTC)。 |
核心信号
| 信号 | 说明 |
| dateChanged(QDate) | ⽇期改变时触发. |
| timeChanged(QTime) | 时间改变时触发. |
| dateTimeChanged(QDateTime) | 时间⽇期任意⼀个改变时触发. |
eg:时间计算器,计算两个时间之间的是相隔多少天,或者是多少小时的
QDateTime 提供了两个函数:
- daysTo:计算两个时间之间的天数的差值,但是官方文档中写着不满24小时也会算作一天
- secsTo:计算两个时间之间的秒数的差值
所以用secsTo来演示:
运行:
6. Dial
使⽤ QDial 表示⼀个 旋钮
有些程序, 通过⿏标拖动旋钮旋转, 即可完成⼀些相关的设置
核心属性
| 属性 | 说明 |
| value | 持有的数值. |
| minimum | 最⼩值 |
| maximum | 最⼤值 |
| singleStep | 按下⽅向键的时候改变的步⻓ |
| pageStep | 按下 pageUp / pageDown 的时候改变的步⻓. |
| sliderPosition | 界⾯上旋钮显示的 初始位置 |
| tracking | 外观是否会跟踪数值变化. 默认值为 true. ⼀般不需要修改. |
| wrapping | 是否允许循环调整. 即数值如果超过最⼤值, 是否允许回到最⼩值. (调整过程能否 "套圈") |
| notchesVisible | 是否显⽰ 刻度线 |
| notchTarget | 刻度线之间的相对位置. 数字越⼤, 刻度线越稀疏. |
核心信号
| 属性 | 说明 |
| valueChanged(int) | 数值改变时触发 |
| rangeChanged(int, int) | 范围变化时触发 |
初始化的状态:
在向右滑动的话就会出现卡顿的现象
勾选warpping选项
再次运行,就不会出现卡顿的现象了:
显示刻度线:
eg:通过旋钮,控制窗口的不透明度
初始值的设置,让它在最开始就是100,完全不透明度
先看看值的变化:
通过数值去设置不透明度,注意不透明之间的范围是0-1,1是完全不透明,0是完全透明,所以我们得处理一下:(double)value / 100
加一个显示内容的label:
7. Slider
使⽤ QSlider 表示⼀个滑动条.
QSlider 和 QDial 都是继承⾃ QAbstractSlider , 因此⽤法上基本相同
核心属性
| 属性 | 说明 |
| value | 持有的数值. |
| minimum | 最⼩值 |
| maximum | 最⼤值 |
| singleStep | 按下⽅向键的时候改变的步⻓ |
| pageStep | 按下 pageUp / pageDown 的时候改变的步⻓. |
| sliderPosition | 滑动条显⽰的 初始位置 |
| tracking | 外观是否会跟踪数值变化. 默认值为 true. ⼀般不需要修改. |
| orientation | 滑动条的⽅向是⽔平还是垂直 |
| invertedAppearance | 是否要翻转滑动条的方向 |
| tickPosition | 刻度的位置 |
| tickInterval | 刻度的密集程度. |
核心信号
| 属性 | 说明 |
| valueChanged(int) | 数值改变时触发 |
| rangeChanged(int, int) | 范围变化时触发 |
eg:在窗口上有两个滑动条,一个水平,一个垂直,能够调整窗口的宽度和高度
勾选:
运行:
自定义快捷键,滑动条本身就可以通过方向键和 pageUp pageBown操作,但是我们也是可以通过自定义: