【C++ Qt】常用输入类下：Combo Box/Spin Box/DataTimeEdit/Dial/Slide

每日激励：“不设限和自我肯定的心态：I can do all things。 — Stephen Curry”

绪论​：
在Qt开发框架中，UI组件是构建用户交互界面的基石。本章将详细探讨Qt中常用的UI组件，包括下拉框（QComboBox）、微调框（QSpinBox/QDoubleSpinBox）、日期时间选择器（QDateTimeEdit）、旋钮（QDial）以及滑动条（QSlider）等。通过实际案例，我们将深入剖析这些组件的核心属性设置、关键方法调用以及信号机制应用，展示如何在实际项目中灵活组合与运用这些组件，以实现高效、美观且功能丰富的用户界面。
————————
早关注不迷路，话不多说安全带系好，发车啦（建议电脑观看）。

Combo Box 下拉框

核⼼属性

属性	说明
currentText	当前选中的⽂本
currentIndex	当前选中的条⽬下标（从 0 开始）从 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. 三个label：请选择汉堡、小食、饮料
2. 添加三个下拉框
3. 增加一个按钮：提交
4. 针对下拉框添加选项（addItem）：
   1. 麦辣鸡腿堡、巨无霸、双层牛堡
   2. 中薯条、麦乐鸡块、麦辣鸡块
   3. 可乐、雪碧
5. 给按钮添加点击信号的信号槽
   1. 打印三个选项中当前选中的值

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->comboBox->addItem("麦辣鸡腿堡");ui->comboBox->addItem("巨无霸");ui->comboBox->addItem("双层牛堡");ui->comboBox_2->addItem("中薯条");ui->comboBox_2->addItem("麦乐鸡块");ui->comboBox_2->addItem("土豆泥");ui->comboBox_3->addItem("无糖可乐");ui->comboBox_3->addItem("可乐");ui->comboBox_3->addItem("雪碧");
}Widget::~Widget()
{delete ui;
}void Widget::on_pushButton_clicked()
{//打印查看选择的内容qDebug() <<"汉堡：" << ui->comboBox->currentText();qDebug() <<"小食：" << ui->comboBox_2->currentText();qDebug() <<"饮料：" << ui->comboBox_3->currentText();}

当把添加选项代码去掉，通过右击按钮然后选择编辑组合框选项进行添加

引入 文件进行 加载

下拉框里的内容，很多时候不是代码写死的，而是通过文件/网络加载数据得到的~
本次先了解如何通过文件获取

1. 先准备一个文件config.txt，内部存着一些想要获取的内容（以换行分割）
2. 拖拽一个label、一个下拉框
3. 构造函数
   1. 需要读取文件内容，把文件中的每一行读取出来作为combo box的选项：
   2. 本质很c/c++中一样、使用fstream类进行文件读写，包含头文件：fstream
   3. 使用ifstream（input输入）进行读取文件数据（路径）
   4. 判断文件是否打开，失败打印日志，并返回
   5. 循环 按行读取文本内容 getline（流函数、输出参数）
   6. 取到的每一行内容，设置到下拉框中（QString::fromStdString(string) 将String变成QString）
   7. 关闭文件（别忘了~）

#include "widget.h"
#include "ui_widget.h"
#include <fstream>
#include <iostream>
#include <QDebug>
#include <string>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);std::ifstream file("D:/QtCode/qt-warehouse/Combo_2/config.txt");if(!file.is_open()){qDebug() << "打开文件失败！" ;return;}std::string str;while(std::getline(file,str)){
//        ui->comboBox->addItem(QString(str.c_str()));//QString 内部只能通过 char* 所以是使用c_strui->comboBox->addItem(QString::fromStdString(str));//QString::fromStdString 将string装换成QString类型}file.close();//注意别忘了
}Widget::~Widget()
{delete ui;
}

输入输出的看待

Spin Box 微调框

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

由于 SpinBox 和 QDoubleSpinBox（小数） ⽤法基本相同, 就只介绍 SpinBox 的使⽤了

QSpinBox 关键属性

属性	说明
value	存储的数值.
singleStep	每次调整的 “步⻓”. 按下⼀次按钮数据变化多少.
displayInteger	数字的进制. 例如 displayInteger 设为 10, 则是按照 10 进制表⽰. 设为 2 则为 2 进制表⽰.
minimum	最⼩值
maximum	最⼤值
suffix	后缀（xxx 个）
prefix	前缀（第 xxx）
wrapping	是否允许换⾏
frame	是否带边框
alignment	⽂字对⻬⽅式.
readOnly	是否允许修改
buttonSymbol	按钮上的图标 、UpDownArrows 上下箭头形式、UpDownArrows 上下箭头形式、NoButtons 没有按钮
accelerated (加速的)	按下按钮时是否为快速调整模式
correctionMode	输⼊有误时如何修正QAbstractSpinBox::CorrectToPreviousValue : 如果⽤⼾输⼊了⼀个⽆效的值（例如，在只能显⽰正整数的SpinBox中输⼊了负数），那么SpinBox会恢复为上⼀个有效值。例如，如果SpinBox的初始值是1，⽤⼾输⼊了-1（⽆效），然后SpinBox会恢复为1、QAbstractSpinBox::CorrectToNearestValue : 如果⽤⼾输⼊了⼀个⽆效的值，SpinBox会恢复为最接近的有效值。例如，如果SpinBox的初始值是1，⽤⼾输⼊了-1（⽆效），那么SpinBox会恢复为0
keyboardTrack	是否开启键盘跟踪. 设为 true, 每次在输⼊框输⼊⼀个数字, 都会触发⼀次 valueChanged() 和 textChanged() 信号. 设为 false, 只有在最终按下 enter 或者输⼊框失去焦点, 才会触发 valueChanged() 和 textChanged() 信号

核⼼信号

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

实操微调框实现点餐

1. 构造函数：
   1. 初始化下拉菜单 addItem（和上面一样）
   2. 设置范围 setRange1 ~ 5
   3. 给按钮添加槽函数，打印每行的combobox的值和spinbox的值
      

#include "widget.h"
#include "ui_widget.h"
#include <fstream>
#include <iostream>
#include <QDebug>
#include <string>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->comboBox_2->addItem("麦辣鸡腿堡");ui->comboBox_2->addItem("巨无霸");ui->comboBox_2->addItem("...");ui->comboBox_3->addItem("薯条");ui->comboBox_3->addItem("土豆泥");ui->comboBox_3->addItem("...");ui->comboBox_4->addItem("无糖可乐");ui->comboBox_4->addItem("雪碧");ui->comboBox_4->addItem("...");ui->spinBox->setRange(1,5);ui->spinBox_2->setRange(1,5);ui->spinBox_3->setRange(1,5);
}Widget::~Widget()
{delete ui;
}void Widget::on_pushButton_clicked()
{qDebug() << "汉堡：" << ui->comboBox_2->currentText() << " " << ui->spinBox->text();qDebug() << "小食：" << ui->comboBox_3->currentText() << " " << ui->spinBox_2->text();qDebug() << "饮料：" << ui->comboBox_4->currentText() << " " << ui->spinBox_3->text();
}

DataTimeEdit

使⽤ QDateEdit 作为⽇期的微调框

QDateTimeEdit 核⼼属性

属性	说明
dateTime	时间⽇期的值. 形如 2000/1/1 0:00:00
date	单纯⽇期的值. 形如 2001/1/1
time	单纯时间的值. 形如 0:00:00
displayFormat	时间⽇期格式（通过特殊字符来描述时间日期的格式）. 形如 yyyy/M/d H:mm • y 表⽰年份 • M 表⽰⽉份 • d 表⽰⽇期 • H 表⽰⼩时 • m 表⽰分钟 • s 表⽰秒 注意: 这⾥的格式化符号的含义, 不要记忆. 不同语⾔/库的设定规则 是存在差异的. ⼀定是⽤的时候再去查（如：yyyy/M/d H:mm 2020/1/1 0:00）
minimumDateTime	最⼩时间⽇期
maximumDateTime	最⼤时间⽇期
timeSpec（规范）	• Qt::LocalTime ：显⽰本地时间。 • Qt::UTC ：显⽰协调世界时（UTC 标准时间）。 • Qt::OffsetFromUTC ：显⽰相对于UTC的偏移量(时差).

关于 本地时间(LocalTime) 和 协调世界时(UTC)
UTC 时间是⼀个基于原⼦钟的标准时间. 不受地球的⾃转周期影响. 和格林威治时间 (GMT) 是
⾮常接近的. 科学家会通过精密的设备来测量并维护. 咱们的计算机内部使⽤的时间就是基于 UTC 时间，本地时间则是基于不同的时区, 对 UTC 时间做出了⼀些调整. ⽐如咱们使⽤的北京时间, 位于 “东⼋区”, 就需要在 UTC 时间基础上 +8 个⼩时的时差（英国 格林威治天文台）

核⼼信号

信号	说明
dateChanged(QDate)	⽇期改变时触发.
timeChanged(QTime)	时间改变时触发.
dateTimeChanged(QDateTime)	时间⽇期任意⼀个改变时触发.

实例：时间计数器

计算两个时间中间相隔的多少天/多少小时

1. 拖拽两个QDateTimeEdit、一个按钮、一个label显示结果
2. 给按钮添加槽函数
   1. 两个时间日期控件通过dateTime获取时间
   2. 计算日期的差值
   3. 通过QDateTime的函数进行计算
   4. daysTo 计算时间的日期差值、secsTo 计算秒数的差值
   5. 其中对于秒数要换算成小时 seconds / 3600 % 24（求出小时，天数已经算过了所以余上24）
      
   6. 最终将计算结果放到label中，注意需要装换成QString

其中有点问题（因为在计算天数的过程中，只要天数发送改变就会增加天数，例如：23::55 到 0:05 时 即使只是过了10分钟但也会算一天）

所以将天数的计算改成使用秒数来进行计算：day = (seconds / 3600) / 24

源码：

#include "widget.h"
#include "ui_widget.h"
#include <iostream>
#include <string>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);}Widget::~Widget()
{delete ui;
}void Widget::on_pushButton_clicked()
{QDateTime time1 = ui->dateTimeEdit->dateTime();QDateTime time2 = ui->dateTimeEdit_2->dateTime();//计算出 天数 和 小时//day,这里并不是使用int day = time1.daysTo(time2);//这里计算出天数int sec = time1.secsTo(time2);//计算出 time1 与 time2 的秒数差//因为day内部计算天数是有一定问题的day = sec / 3600 / 24;//使用秒数来计算int h = (sec / 3600) % 24;ui->label_2->setText("时间差值为：" +  QString::fromStdString(std::to_string(day))+ "天" + QString::fromStdString(std::to_string(h)) + "小时");
}

网上找到一个计数器（验证）：

Dial

使⽤ QDial 表⽰⼀个 旋钮（如下图）

有些程序, 通过⿏标拖动旋钮旋转, 即可完成⼀些相关的设置：
核⼼属性

属性	说明
value	持有的数值.
minimum	最⼩值
maximum	最⼤值
singleStep	按下⽅向键的时候改变的步⻓.
pageStep	按下 pageUp / pageDown 的时候改变的步⻓.
sliderPosition	界⾯上旋钮显⽰的 初始位置
tracking	外观是否会跟踪数值变化. 默认值为 true. ⼀般不需要修改.
wrapping	是否允许循环调整. 即数值如果超过最⼤值, 是否允许回到最⼩值. (调整过程能否 “套圈”)
notchesVisible	是否显⽰ 刻度线
notchTarget	刻度线之间的相对位置. 数字越⼤, 刻度线越稀疏.

核⼼信号

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

实操：通过旋钮控制窗口的不透明度

1. 拖拽一个dial控件

2. 设置范围：0 ~ 100、初始为100、wrapping（允许套圈 当超过最大值变回最小值）、刻度线
   

3. 使用valueChanged信号进行创建信号槽，参数int就是当前的value值

4. 其中注意设置的value是整数0~100，而WindowsOpacity内部是一个 0 ~ 1 的小数，所以我们需要给value / 100，变成 0 ~ 1 的小数

源码：

#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);
}Widget::~Widget()
{delete ui;
}void Widget::on_dial_valueChanged(int value)
{//将value的值设置成窗口的透明度 Opacity//但注意的是 Opacity 的范围是 0 ~ 1//而我们的value是0 ~ 100 所以需要除以 100double temp = value / 100.00;this->setWindowOpacity(temp);//并且将透明度设置到label上ui->label->setText("当前不透明度:"+ QString::number(temp * 100));}

Slider 滑动条

使⽤ QSlider 表⽰⼀个滑动条.

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

属性	说明
value	持有的数值.
minimum	最⼩值
maximum	最⼤值
singleStep	按下⽅向键的时候改变的步⻓.
pageStep	按下 pageUp / pageDown 的时候改变的步⻓.
sliderPosition	滑动条显⽰的 初始位置
tracking	外观是否会跟踪数值变化. 默认值为 true. ⼀般不需要修改.
orientation	滑动条的⽅向是⽔平还是垂直
invertedAppearance	是否要翻转滑动条的⽅向
tickPosition	刻度的位置.
tickInterval	刻度的密集程度.

核⼼信号

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

实操：通过两个滑动条控制窗口大小

1. 拖拽两个Slider滑动条（Horizontal水平的、Vertical垂直的）
2. 并且将垂直的滑动条进行翻转（invertedappearance 设置的值符合常理：上到下是减少，默认是从下到上的）
3. 初始化：
   1. 设置范围：给水平的值设为 100 ~ 1000（minimum/maxmum），初始为800（sliderPosition），⽅向键改变的步⻓为50(singleStep)、垂直的值设为 100 ~ 1500，初始化为600，⽅向键改变的步⻓为50
4. 水平滑动条通过valueChanged信号设置信号槽
   1. 通过Geometry属性方法获取得到QRect对象
   2. 在保持高很位置不变的情况，将参数value的值设置为窗口的宽度setGeometry
5. 水平：
   1. 同上操作，只不过修改的是高度

源码：

#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);}Widget::~Widget()
{delete ui;
}void Widget::on_horizontalSlider_valueChanged(int value)
{//设置窗口大小 GeometryQRect rect = this->geometry();this->setGeometry(rect.x(),rect.y(),value,rect.height());
}void Widget::on_verticalSlider_valueChanged(int value)
{//设置窗口大小 GeometryQRect rect = this->geometry();this->setGeometry(rect.x(),rect.y(),rect.width(),value);
}

自定义快捷键 QShotCut

这里直接根据上一个的水平Slide添加快捷键

1. 构造函数中通过 QShotCut 类定义快捷键：
   1. 需要两个快捷键，- 进行减少，+ 进行增加
   2. 创建QShortCut对象
   3. 通过该对象的setKey方法进行设置，内部参数填写 QKeySequence(“-”)、… “+”
2. 使用信号槽，感知快捷键被触发
   1. 使用QShortCut::activated信号，调用自身编写的槽函数subValue
   2. 同上添加槽函数 addValue
3. 槽函数：subValue/addValue
   1. 获取当前的Slide中的值，value
   2. 获取当前slide设置的步长signalStep
   3. 设置setValue中的值，每次对原value增加或者减少step步长的值

源码：

#include "widget.h"
#include "ui_widget.h"
#include <QShortcut>
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//设置快捷键QShortcut* sub = new QShortcut(this);sub->setKey(QKeySequence("-"));QShortcut* add = new QShortcut(this);add->setKey(QKeySequence("+"));connect(sub,&QShortcut::activated,this,&Widget::subValue);connect(add,&QShortcut::activated,this,&Widget::addValue);
}Widget::~Widget()
{delete ui;
}void Widget::subValue()
{//获取当前Slide的值int value = ui->horizontalSlider->value();//减少步长的值int step = ui->horizontalSlider->singleStep();ui->horizontalSlider->setValue(value-step);
}void Widget::addValue()
{//获取当前Slide的值int value = ui->horizontalSlider->value();//减少步长的值int step = ui->horizontalSlider->singleStep();ui->horizontalSlider->setValue(value+step);
}void Widget::on_horizontalSlider_valueChanged(int value)
{//设置窗口大小 GeometryQRect rect = this->geometry();this->setGeometry(rect.x(),rect.y(),value,rect.height());
}void Widget::on_verticalSlider_valueChanged(int value)
{//设置窗口大小 GeometryQRect rect = this->geometry();this->setGeometry(rect.x(),rect.y(),rect.width(),value);
}

---

本章完。预知后事如何，暂听下回分解。

如果有任何问题欢迎讨论哈！

如果觉得这篇文章对你有所帮助的话点点赞吧！

持续更新大量C++ Qt细致内容，早关注不迷路。

​