【QT（七）】—— 常用控件（四）

努力学习的小廉2026-01-18 14:37

单行输入框 QLineEdit

QLineEdit表示一个单行输入框，可以输入一段文本，但是不能换行。

常见属性

属性 说明
text 输入框中的文本
inputMask 输入内容格式的约束
maxLength 最大长度
frame 边框（true添加边框）
cursorPosition 光标的位置
alignment 对齐方式
dragEnabled 是否允许拖拽
readOnly 是否只读（true只读）
PlaceHolderText 输入框内容为空时，显示的提示信息
clearButtonEnabled 清除按钮是否启动
echoMode 回显方式（QLineEdit::Normal：回显文本；QLineEdit::Password：密码显示，使用*等字符代替；QLineEdit::NoEcho：不会显，输入框中包含显示输入的内容）
Validator 验证器

对于QLineText，前几个属性还是非常好理解的；

除此之外，这里也有对应的信号：

  • textChanged ： 输入框中内容发生改变
  • textEdited ： 输入框中有内容输入
  • selectionChanged ： 鼠标旋转内容发生改变
  • cursorPositionChanged ： 光标位置发生改变
  • editingFinished ： 输入完成（按下回车键或者失去焦点时触发）
  • returnPressed ： 按下回车或者返回键，（如果设置了验证器，必须验证成功才会触发）

1. 基本属性

示例：创建行输入框，设置回显方式、空提示信息、清空按钮、内容约束等

这里就实现 信息收集表：姓名、密码、性别、电话

这里要做的就是：

设置空提示信息 、启用清空按钮 、设置输入密码时的回显方式 ；在电话输入框约束内容格式：xxx-xxxx-xxxx

最后填写完毕后，点击确认按钮提交信息；（这里就调用qDebug输出一下即可）

cpp 复制代码 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //姓名
    ui->lineEdit_name->setPlaceholderText("请输入姓名");
    ui->lineEdit_name->setClearButtonEnabled(true);

    //密码
    ui->lineEdit_password->setEchoMode(QLineEdit::Password);
    ui->lineEdit_password->setPlaceholderText("请输入密码");
    ui->lineEdit_password->setClearButtonEnabled(true);

    // 电话
    ui->lineEdit_phone->setInputMask("000-0000-0000");

}
void Widget::on_pushButton_clicked()
{
    qDebug() << "姓名 : " << ui->lineEdit_name->text()
             << ",密码 : " << ui->lineEdit_password->text()
             << ",性别 : " << (ui->radioButton->isChecked()? "男" : "女")
             << ",电话 : " << ui->lineEdit_phone->text();
}

2. 验证器

上述代码中，我们将电话输入框在的格式约束设置成了 "000-0000-0000"，这个格式约束只是在输入时按照格式显示出来了，并不能判断我们输入的内容是符合要求的。要判断输入的内容是否符合要求，就要使用到 验证器

正则表达式

要设置验证器，这里就可以使用正则表达式；（感兴趣可以深入了解）

^x表示以x开头、\d表示数字、{n}表示前面的内容连续出现n次、$表示结束。

对于验证器 QValidator，这里就使用QRegExpValidator；

QRegExpValidator在构造时，需要一个QRegExp对象；而QRegExp在构造时传递这里的正则表达式即可。

所以这里就可以对电话输入框 lineEdit_phone设置验证器：

cpp 复制代码 
	ui->lineEdit_phone->setValidator(new QRegExpValidator(QRegExp("^1\\d{10}$")));

到这里，只是设置了验证器，还需要在合适的时候验证输入内容是否正确；

这里就在输入内容时，也就是QLineEdit::textEdit输入内容时或者QLineEdit::textChanged输入框内容发生改变时进行验证，也可以在点击提交按钮时进行验证。

验证过程：

  • 调用Validator会返回一个QValidator对象；
  • QValidator中的validate就是进行验证的函数(参数：要验证的字符串QString和pos。pos在执行完Validate后表示不匹配的位置)。
  • Validate返回值有三种：QValidator::Invalid表示不匹配、QValidator::Intermediate、QValidator::Acceptable表示可接受也就是匹配。

这里就将提交按钮初始启用状态设置为false、只有在输入内容验证成功时才会启用提交按钮。

cpp 复制代码 
void Widget::on_lineEdit_phone_textChanged(const QString &arg1)
{
    QString text = arg1;
    int pos = 0;
    if(ui->lineEdit_phone->validator()->validate(text,pos) == QValidator::Acceptable)
        ui->pushButton->setEnabled(true);
    else
        ui->pushButton->setEnabled(false);
}

多行输入框 QTextEdit

QTextEdit 表示多行输入框，也是一个富文本编辑器；并且在内容超出编辑范围时还会自动提供滚动条。

常见属性：

属性 说明
markdown 输入框中的内容支持 markdown 格式，并能够对markdown文本渲染成 html
html 输入框中的内容支持 大部分html标签,例如：img、table等标签
placeHolderText 输入框内容为空时的提示信息
readOnly 是否只读
autoFormating 是否自动格式化
tabstopWidth 按下Tab缩进多少字节
overwriteMode 是否开启覆盖写模式
acceptRichText 是否接受富文本内容
verticalScrollBarPolicy 垂直方向滚动条出现的策略
horizontalScrollBarPolicy 水平方向上滚动条出现的策略
undoRedoEnable 是否启用undo、redo功能（撤回和取消撤回）

对于TextEdit，和LineEdit相比，多了滚动条和undo、redo以及支持markdown、html等。

滚动条策略

Qt::ScrollBarAsNeeded：根据内容决定是否需要（默认值）；

Qt::ScrollBarAlwaysOff：总是关闭滚动条；

Qt::ScrollBarAlwaysOn ：总是显示滚动条

常用信号：

  • textChanged() ：输入框内容发生改变
  • undoAvailable(bool)：撤回状态发生改变（true表示当前可以撤回、false表示当前不能撤回）（启用undoRedo功能）
  • redoAvailable(bool)：取消撤回状态发生改变（true表示当前可以取消撤回、false表示当前不能取消撤回）
  • copyAvailable(bool)：文本选中状态发生改变
  • cursorPositionChanged：光标位置发生改变
  • selectionChanged()：鼠标选中内容发生改变

下拉框 QComboBox

属性 说明
currentText 当前选中的文本
currentIndex 当前选中文本对应的下标（从0开始，-1表示没有选中文本）
editable 是否可以修改
inconSize 下拉框图标的大小
maxCount 最大的条目数

QComboBox整体来说还是比较简单的，常见的接口：

  • currentText：当前选中条目中的内容
  • currentIndex：当前选中条目的下标
  • addItem：增加一个条目

常见信号：

  • activated(int) / activated(const QString& text)：当用户选择一个选项时触发（鼠标划过，没有点击选项）
  • currentIndexChanged(int) / currentIndexChanged(const QString& text)：当前选项发生改变时触发。
  • editTextChanged(const QString& text)：编辑框中文本发生改变时触发（editable为true时才能修改）

示例：使用下拉框来完成点餐功能

这里就创建三个下拉框，表示选择 汉堡、小吃、饮料；一个确认按钮。（最终点击确认，使用qDebug来输出一下选择的内容）

cpp 复制代码 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 设置下拉框内容
    ui->comboBox_1->addItem("黑椒牛肉堡");
    ui->comboBox_1->addItem("奥尔良鸡腿堡");
    ui->comboBox_1->addItem("巨无霸汉堡");

    ui->comboBox_2->addItem("薯条");
    ui->comboBox_2->addItem("鸡米花");
    ui->comboBox_2->addItem("快枪手鸡腿");

    ui->comboBox_3->addItem("可乐");
    ui->comboBox_3->addItem("雪碧");
}
// pushButton按钮关联槽函数
void Widget::on_pushButton_clicked()
{
    qDebug() << ui->label_1->text() << ui->comboBox_1->currentText()
             << ui->label_2->text() << ui->comboBox_2->currentText()
             << ui->label_3->text() << ui->comboBox_3->currentText();
}

这样就简单完成了一个点餐功能。

但是在实际开发过程当中，这些数据并不是直接写好的，而是从 文件、网络中读取到，然后再设置到下拉框中的。

示例：从文件中读取数据并设置到下来框中

cpp 复制代码 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    std::ifstream in("E:/test.txt");
    if(!in.is_open())
        exit(1);
    std::string line;
    while(std::getline(in,line))
    {
        ui->comboBox->addItem(QString::fromStdString(line));
    }
    in.close();
}

微调框 QSpinBox

微调框，是带有按钮的输入框，可以输入整数/浮点数，也可以通过按钮来调整数值的大小。

常见属性：

属性 说明
value 存储的数值
singleStep 每次调整的 "步⻓"，按下一次按钮数据变化多少
displayInteger 数字的进制，例如设为 10 则按十进制表示，设为 2 则按二进制表示
minimum 最小值
maximum 最大值
suffix 后缀
prefix 前缀
wrapping 是否允许换行
frame 是否带边框
alignment 文字对齐方式
readOnly 是否允许修改
buttonSymbol 按钮上的图标：UpDownArrows：上下箭头形式；PlusMinus：加减号形式；NoButtons：没有按钮
accelerated 按下按钮时是否为快速调整模式（加速的）
correctionMode 输入有误时的修正方式：QAbstractSpinBox::CorrectToPreviousValue：输入无效值时，恢复为上一个有效值； QAbstractSpinBox::CorrectToNearestValue：输入无效值时，恢复为最接近的有效值
keyboardTrack 是否开启键盘跟踪：true：输入框每输入一个数字，立即触发 valueChanged () 和 textChanged () 信号；false：仅在按下 Enter 或输入框失去焦点时，触发 valueChanged () 和 textChanged () 信号

常用信号：

信号 说明
textChanged(QString) 微调框的文本发生改变时会触发，参数 QString 包含前缀和后缀
valueChanged(int) 微调框的数值发生改变时会触发，参数 int 表示当前的数值

示例：给上面点餐功能，增加一个微调框，表示份数

cpp 复制代码 
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 设置下拉框内容
    ui->comboBox_1->addItem("黑椒牛肉堡");
    ui->comboBox_1->addItem("奥尔良鸡腿堡");
    ui->comboBox_1->addItem("巨无霸汉堡");

    ui->comboBox_2->addItem("薯条");
    ui->comboBox_2->addItem("鸡米花");
    ui->comboBox_2->addItem("快枪手鸡腿");

    ui->comboBox_3->addItem("可乐");
    ui->comboBox_3->addItem("雪碧");

    // 设置数目
    ui->spinBox_1->setMaximum(5); // 最大值
    ui->spinBox_1->setMinimum(0); // 最小值
    ui->spinBox_1->setValue(1);   // 当前值

    ui->spinBox_2->setMaximum(3);
    ui->spinBox_2->setMinimum(0);
    ui->spinBox_2->setValue(1);

    ui->spinBox_3->setMaximum(3);
    ui->spinBox_3->setMinimum(0);
    ui->spinBox_3->setValue(1);
}

当然，这里也可以增加一个按钮，关联槽函数，获取到当前选择的餐品和数量。

这里设置数据范围也可以使用setRange方法。（range(x,y)表示最小值是x、最大值是y）

日期时间 QDateTimeEdit

QDate 表示日期、QTime 表示时间、QDateTime 表示日期时间

它和单行输入框非常相似，只不过增加了一些格式要求。

QDateTime 预期效果：

属性 说明
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：表示秒）
minimumDateTime 最小时间日期
maximumDateTime 最大时间日期
timeSpec 时间规格：Qt::LocalTime：显示本地时间；Qt::UTC：显示协调世界时（UTC）； Qt::OffsetFromUTC：显示相对于 UTC 的偏移量（时差）
信号 说明
dateChanged(QDate) 日期改变时触发
timeChanged(QTime) 时间改变时触发
dateTimeChanged(QDateTime) 时间或日期任意一个改变时触发

示例：日历计算器（在输入/修改日期时计算并显示）

修改日期，触发datetimeChanged信号，关联槽函数，计算日期时间之间的天数和小时数。

cpp 复制代码 
void Widget::OutPut(const QDateTime& old_datetime, const QDateTime& new_datetime)
{
    int sec = old_datetime.secsTo(new_datetime);
    int days = (sec / 3600) / 24;
    int hours = (sec / 3600) % 24;
    qDebug() << "已经过去 " << days << "天, 零 "  << hours << "个小时了";
    QString text = "已经过去 " + QString::fromStdString(std::to_string(days)) + "天, 零 " + QString::fromStdString(std::to_string(hours)) + "个小时了";
    ui->label->setText(text);
}
void Widget::on_dateTimeEdit_old_dateTimeChanged(const QDateTime &dateTime)
{
    QDateTime old_datetime= dateTime;
    QDateTime new_datetime = ui->dateTimeEdit_new->dateTime();
    OutPut(old_datetime,new_datetime);
}
void Widget::on_dateTimeEdit_new_dateTimeChanged(const QDateTime &dateTime)
{
    QDateTime old_datetime= ui->dateTimeEdit_old->dateTime();
    QDateTime new_datetime = dateTime;
    OutPut(old_datetime,new_datetime);
}

旋钮 QDial

QDial控件表示一个旋钮，预期效果：

属性 说明
value 持有的数值
minimum 最小值
maximum 最大值
singleStep 按方向键时数值改变的步长
pageStep 按 PageUp / PageDown 键时数值改变的步长
sliderPosition 界面上旋钮显示的初始位置
tracking 外观是否会跟踪数值变化，默认值为 true，一般不需要修改
wrapping 是否允许循环调整（即数值超过最大值时，是否回到最小值；调整过程能否 "套圈"）
notchesVisible 是否显示刻度线
notchTarget 刻度线之间的相对位置，数字越大，刻度线越稀疏
信号 说明
valueChanged(int) 数值改变时触发
rangeChanged(int, int) 范围（最小值 / 最大值）变化时触发，两个参数分别对应新的最小值和新的最大值

示例：通过旋钮来控制窗口的不透明度

在使用鼠标转动旋钮时，数值发生改变，就会触发valueChanged信号，通过关联槽函数来设置窗口不透明度

cpp 复制代码 
void Widget::on_dial_valueChanged(int value)
{
    // 设置不透明度
    this->setWindowOpacity((double)value / 100);
    qDebug() << value;
}

滑动条 QSlider

QSlider 和 QDial 都是继承自 QAbstractSlider，用法上基本相同。

像QDial中的value、minimum、maximum等这些属性在QSlider中也是有的。

  • orientation：方向，Horizontal水平方向、Vertical垂直方向

在 Qt Creator 中，垂直方向和水平方向的滑动条是分开的，方便我们使用。

示例：通过滑动条来设置窗口的大小

这个就相对比较简单了，这里窗口初识大小为800*600，这里水平方向滑动条和垂直方向上滑动条初始值都是0；

水平方向上数值每增加1，窗口长度就增加8。

数值方向上数值每增加1，窗口宽度就增加6。

cpp 复制代码 
// HorizontalSlider  ValueChanged关联槽函数
void Widget::on_horizontalSlider_valueChanged(int value)
{
    // 水平方向长度 800 -> 0
    QRect rect = this->geometry();
    int width = 800 + value * 8;
    this->setGeometry(rect.x(),rect.y(),width,rect.height());
}
// VerticalSlider  ValueChanged关联槽函数
void Widget::on_verticalSlider_valueChanged(int value)
{
    QRect rect = this->geometry();
    int heigh = 600 + value*6;
    this->setGeometry(rect.x(),rect.y(),rect.width(),heigh);
}

本篇文章到这里就结束了，感谢支持

我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=2oul0hvapjsws

相关推荐
用户805533698031 天前
不止三件套：QObject 属性系统全关键字与运行时反射!
c++·qt
xcyxiner1 天前
DicomViewer (vcpkg Windows和ubuntu编译)7
qt
Quz6 天前
QML Hello World 入门示例
qt
xcyxiner9 天前
DicomViewer (dcmtk读取dcm文件)5
qt
xcyxiner10 天前
DicomViewer (后台线程处理文件)4
qt
xcyxiner10 天前
DicomViewer (添加模型类)3
qt
xcyxiner11 天前
DicomViewer (目录调整) 2
qt
xcyxiner11 天前
dcmtk vtk vtk-dicom(gdcm) 编译(debug) v2
qt
LDR00613 天前
Type-C 快充全面升级！LDR6601 赋能个人护理便携电机，重塑剃须刀 / 理发器新体验
c语言·开发语言
雪碧聊技术13 天前
Tree.js是什么？一文讲透
开发语言·javascript·ecmascript
热门推荐
012026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？022026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？032026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf04【AI】2026 年具身智能模型和世界模型总结05Trae国际版与国内版深度测评：AI原生IDE的双生花06飞书长连接_事件订阅（接收消息，审批任务状态变更）07Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析082026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？09GitHub 镜像站点102026年AI架构实战：彻底解决OpenAI接口超时与封号，Python调用GPT-5.2/Sora2企业级架构详解（附源码+压测报告）