Qt 显示与输入类控件进阶：数字、进度、输入框实战攻略

🔥草莓熊Lotso： 个人主页
❄️个人专栏: 《C++知识分享》《Linux 入门到实践：零基础也能懂》
✨生活是默默的坚持，毅力是永久的享受！

🎬 博主简介：

文章目录

前言：
[一. 显示类控件：让数据呈现更清晰](#一. 显示类控件：让数据呈现更清晰)
- [1.1 LCDNumber：模拟计算器风格的数字显示](#1.1 LCDNumber：模拟计算器风格的数字显示)
- [1.2 . ProgressBar：直观展示任务进度](#1.2 . ProgressBar：直观展示任务进度)
- [1.3 CalendarWidget 日历控件（完整新增，核心重点）](#1.3 CalendarWidget 日历控件（完整新增，核心重点）)
[二. 输入类控件：让用户输入更流畅](#二. 输入类控件：让用户输入更流畅)
- [2.1 LineEdit：单行文本输入的首选](#2.1 LineEdit：单行文本输入的首选)
- [2.2 TextEdit：支持富文本的多行输入框](#2.2 TextEdit：支持富文本的多行输入框)
[三. 关键避坑指南](#三. 关键避坑指南)
结尾：

前言：

Qt 的显示类控件负责清晰呈现数据状态，输入类控件承担用户交互输入，二者共同构成 GUI 的 "信息展示 - 数据输入" 闭环。从模拟计算器的 LCDNumber、任务进度的 ProgressBar，到单行输入的 LineEdit、多行富文本的 TextEdit，这些控件覆盖了大多数数据交互场景。本文聚焦 4 类高频控件（LCDNumber、ProgressBar、LineEdit、TextEdit），通过实战代码拆解属性用法、核心信号和典型场景，帮你快速掌握数据展示与输入的核心技巧，让界面交互更流畅、数据呈现更直观。

一. 显示类控件：让数据呈现更清晰

显示类控件专注于数据可视化，无需用户输入，仅负责将程序状态或计算结果以直观形式展示，常用的有 LCDNumber（数字显示）和 ProgressBar（进度展示）。

1.1 LCDNumber：模拟计算器风格的数字显示

QLCDNumber 是专门用于数字展示的控件，支持十进制、十六进制等多种格式，外观类似老式计算器，适用于倒计时、计数器、数据仪表盘等场景。

核心属性与 API：

数据属性 ：intValue（整数数值）、value（浮点数值，与 intValue 联动）、digitCount（显示位数）；
格式属性 ：mode（显示模式：Dec 十进制、Hex 十六进制、Bin 二进制、Oct 八进制）、segmentStyle（显示风格：Flat 平面、Outline 轮廓、Filled 填充）；
核心 API ：
- display(int value) / display(double value)：设置显示的数字；
- intValue() / value()：获取当前显示的数值；
- setDigitCount(int count)：设置显示的最大位数；
- setMode(QLCDNumber::Mode mode)：切换数字显示模式。

实战示例：简易倒计时器

结合QTimer实现 10 秒倒计时，时间到后自动停止：

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"
#include <QTimer>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 设置初始值
    ui->lcdNumber->display("10");

    // 创建一个 QTimer 实例
    timer = new QTimer(this);
    // 把 QTimer 的 timeout 信号和自己的槽函数进行链接
    connect(timer, &QTimer::timeout, this, &Widget::handle);
    // 启动定时器,参数是触发 timeout 的周期，单位是 ms
    timer->start(1000); // 1000ms = 1s
}

Widget::~Widget()
{
    delete ui;
}

void Widget::handle()
{
    // 先拿到 LCDNumber 中的数字
    int value = ui->lcdNumber->intValue();
    if(value <= 0)
    {
        // 数字减到 0 了, 停止定时器
        timer->stop();
        return;
    }
    ui->lcdNumber->display(value - 1);
}

关键注意 ：Qt 中 GUI操作必须在主线程执行 ，不可用 std::thread + sleep 实现倒计时（会导致界面卡死），QTimer是安全且高效的选择

1.2 . ProgressBar：直观展示任务进度

QProgressBar 用于展示任务完成进度，适用于文件下载、数据处理等耗时操作，让用户清晰了解任务进展。

核心属性与 API：

范围属性：minimum（最小值，默认 0）、maximum（最大值，默认 100）、value（当前进度值）；
显示属性：textVisible（是否显示进度文本）、format（文本格式：% p 百分比、% v 当前值、% m 最大值）、orientation（方向：水平 / 垂直）；
核心 API ：
- setValue(int value)：设置当前进度值；
- setRange(int min, int max)：设置进度范围；
- setFormat(const QString& format)：自定义进度文本格式；
- setStyleSheet(const QString& style)：通过 QSS 修改进度条样式。

实战示例 1：自动增长的进度条

结合QTimer实现进度条从 0 到 100 自动增长，完成后停止：

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"
#include <QTimer>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    timer = new QTimer(this);
    connect(timer, &QTimer::timeout, this, &Widget::handle);
    // 启动定时器
    timer->start(100);
}

Widget::~Widget()
{
    delete ui;
}

void Widget::handle()
{
    // 获取当前进度条的数值
    int value = ui->progressBar->value();
    // 到了100就停止
    if(value >= 100)
    {
        timer->stop();
        return;
    }

    // 进度条数值的改变
    ui->progressBar->setValue(value + 1);
}

实战示例 2：自定义红色进度条

通过 QSS 修改进度条颜色，让进度块显示为红色：

cpp 复制代码

// 在构造函数中添加QSS样式
ui->progressBar->setStyleSheet("QProgressBar::chunk { background-color: #FF0000; }");
// 设置进度文本居中（解决默认文本偏移问题）
ui->progressBar->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);

效果：进度条背景为默认色，进度块为红色，文本居中显示。

1.3 CalendarWidget 日历控件（完整新增，核心重点）

QCalendarWidget 是 Qt 专门用于日期选择、日期展示的可视化控件，也是本次补充的核心控件，界面是本地化的日历样式，支持年份 / 月份切换、日期选中、日期格式化展示，常用于「生日选择、预约日期、文件创建日期」等所有需要日期交互的场景，是项目开发中的高频刚需控件，属性和用法都很轻量化，上手即会！

核心属性表：

属性	说明
`selectDate`	当前选中的日期
`minimumDate`	最小日期
`maximumDate`	最大日期
`firstDayOfWeek`	每周的第一天（即日历的第一列）是周几
`gridVisible`	是否显示表格的边框
`selectionMode`	是否允许选择日期
`navigationBarVisible`	日历上方标题是否显示
`horizontalHeaderFormat`	日历上方标题显示的日期格式
`verticalHeaderFormat`	日历第一列显示的内容格式
`dateEditEnabled`	是否允许日期被编辑

重要信号表：

信号	说明
`selectionChanged(const QDate&)`	当选中的日期发生改变时发出
`activated(const QDate&)`	当双击一个有效的日期或按下回车键时发出，形参是一个`QDate`类型，保存了选中的日期
`currentPageChanged(int year, int month)`	当年份或月份改变时发出，形参表示改变后的新年份和新月份

实战案例：选中当前日期显示出来

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
}

Widget::~Widget()
{
    delete ui;
}


void Widget::on_calendarWidget_selectionChanged()
{
    QDate date = ui->calendarWidget->selectedDate();
    qDebug() << date;

    ui->label->setText(date.toString());
}

二. 输入类控件：让用户输入更流畅

输入类控件负责接收用户输入，需处理输入校验、格式约束等逻辑，常用的有单行输入的 LineEdit 和多行富文本的 TextEdit。

2.1 LineEdit：单行文本输入的首选

QLineEdit 是最常用的单行输入控件，支持密码隐藏、输入格式校验、清除按钮等功能，适用于用户名、密码、手机号等单行输入场景。

核心属性与 API：

输入属性 ：text（输入文本）、echoMode（显示模式：Normal 正常、Password 密码隐藏、NoEcho 不显示）、maxLength（最大输入长度）；
交互属性 ：placeholderText（输入提示文本）、clearButtonEnabled（是否显示清除按钮）、readOnly（是否只读）；
校验属性 ：inputMask（输入格式掩码）、validator（输入验证器，支持正则）；
核心信号 ：
- textChanged(const QString& text)：文本改变时触发（代码修改也会触发）；
- textEdited(const QString& text)：用户编辑文本时触发（代码修改不触发）；
- returnPressed()：按下回车键时触发；
核心 API ：
- text()：获取输入的文本；
- setText(const QString& text)：设置输入框文本；
- setEchoMode(QLineEdit::EchoMode mode)：设置显示模式（如密码隐藏）；
- setInputMask(const QString& mask)：设置输入格式约束；
- setValidator(const QValidator* validator)：设置输入验证器。

实战示例 1：手机号输入校验（输入掩码 + 正则）

限制手机号为 11 位数字，按 "3-4-4" 格式输入，且仅允许数字输入：

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>

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->setPlaceholderText("请输入密码");
    ui->lineEdit_password->setClearButtonEnabled(true);
    ui->lineEdit_password->setEchoMode(QLineEdit::Password); // 显示模式设置成密码模式

    // 初始化第三个输入框
    ui->lineEdit_phone->setPlaceholderText("请输入手机号码");
    ui->lineEdit_phone->setClearButtonEnabled(true);
    ui->lineEdit_phone->setInputMask("000-0000-0000");
}

Widget::~Widget()
{
    delete ui;
}


void Widget::on_pushButton_submit_clicked()
{
    QString gender = ui->radioButton_male->isChecked() ? "男" : "女";
    qDebug() << "姓名" << ui->lineEdit_name->text()
             << "密码" << ui->lineEdit_password->text()
             << "性别" << gender
             << "电话号码" << ui->lineEdit_phone->text();

}

利用正则表达式进行优化手机号验证

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"
#include <QRegExpValidator>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 需要给单行输入框设置验证器,基于正则表达式来完成验证
    QRegExp regExp("^1\\d{10}$");
    ui->lineEdit->setValidator(new QRegExpValidator(regExp));


}

Widget::~Widget()
{
    delete ui;
}


void Widget::on_lineEdit_textEdited(const QString &text)
{
    QString content = text;
    int pos = 0;
    if(ui->lineEdit->validator()->validate(content, pos) == QValidator::Acceptable)
    {
        // 验证通过
        ui->pushButton->setEnabled(true);
    }
    else{
        ui->pushButton->setEnabled(false);
    }
}

实战示例 2：密码显示 / 隐藏切换 && 密码一致性验证

结合QCheckBox实现密码明文 / 密文切换：

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 初始为密码隐藏模式
    ui->lineEdit->setEchoMode(QLineEdit::Password);
}

Widget::~Widget()
{
    delete ui;
}

// 复选框状态切换时触发
void Widget::on_checkBox_toggled(bool checked)
{
    if(checked)
    {
     	// 显示密码（正常模式）
        ui->lineEdit->setEchoMode(QLineEdit::Normal);
    }
    else{
    		// 隐藏密码（密码模式）
        ui->lineEdit->setEchoMode(QLineEdit::Password);
    }
}

密码一致性验证：

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 初始化, 把这两个输入框的 echoMode 设置一下
    ui->lineEdit->setEchoMode(QLineEdit::Password);
    ui->lineEdit_2->setEchoMode(QLineEdit::Password);
    ui->label->setText("密码为空");
}

Widget::~Widget()
{
    delete ui;
}

void Widget::compare()
{
    const QString& s1 = ui->lineEdit->text();
    const QString& s2 = ui->lineEdit_2->text();
    if(s1.isEmpty() && s2.isEmpty())
    {
        ui->label->setText("密码为空");
    }
    else if(s1 == s2)
    {
        ui->label->setText("密码一致");
    }
    else
    {
        ui->label->setText("密码不一致");
    }
}


void Widget::on_lineEdit_textEdited(const QString &arg1)
{
    (void) arg1;
    this->compare();
}


void Widget::on_lineEdit_2_textEdited(const QString &arg1)
{
    (void) arg1;
    this->compare();
}

2.2 TextEdit：支持富文本的多行输入框

QTextEdit 是功能更强的输入控件，支持多行文本、富文本（HTML/Markdown）、自动滚动条，适用于备注输入、富文本编辑、日志展示等场景。

核心属性与 API：

内容属性 ：markdown（Markdown 格式内容）、html（HTML 格式内容）、placeholderText（输入提示）；
功能属性 ：readOnly（只读）、undoRedoEnabled（开启撤销 / 重做）、acceptRichText（是否接收富文本）；
滚动属性 ：verticalScrollBarPolicy（垂直滚动条策略）、horizontalScrollBarPolicy（水平滚动条策略）；
核心信号 ：
- textChanged()：文本内容改变时触发；
- selectionChanged()：选中的文本范围改变时触发；
- cursorPositionChanged()：光标位置改变时触发；
核心 API ：
- toPlainText()：获取纯文本内容；
- toMarkdown() / toHtml()：获取 Markdown/HTML 格式内容；
- setPlainText(const QString& text) / setMarkdown(const QString& text) / - setHtml(const QString& text)：设置输入框内容；
- clear()：清空输入内容。

实战示例 1：实时同步输入内容

输入框文本变化时，实时同步到 Label 中显示：

cpp 复制代码

#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_textEdit_textChanged()
{
    // 获取多行输入框中的内容
    const QString& text = ui->textEdit->toPlainText();
    ui->label->setText(text);
}

实战示例 2：验证输入框的各种信号

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
}

Widget::~Widget()
{
    delete ui;
}

void Widget::on_textEdit_textChanged()
{
    qDebug() << "textChanged" <<ui->textEdit->toPlainText();
}

void Widget::on_textEdit_selectionChanged()
{
    QTextCursor cursor = ui->textEdit->textCursor();
    qDebug() << "selectionChanged" << cursor.selectedText();
}

void Widget::on_textEdit_cursorPositionChanged()
{
    QTextCursor cursor = ui->textEdit->textCursor();
    qDebug() << "cursorPositionChanged" << cursor.position();
}

void Widget::on_textEdit_undoAvailable(bool b)
{
    qDebug() << "undoAvailable" << b;
}

void Widget::on_textEdit_redoAvailable(bool b)
{
    qDebug() << "redoAvailable" << b;
}

void Widget::on_textEdit_copyAvailable(bool b)
{
    qDebug() << "copyAvailable" << b;
}

三. 关键避坑指南

LCDNumber 显示模式：仅十进制（Dec）支持小数点，其他模式（Hex/Bin/Oct）仅显示整数；
ProgressBar 样式：通过 QSS 修改chunk（进度块）颜色，文本偏移需手动设置alignment居中；
LineEdit 输入校验：inputMask仅约束格式（如分隔符），validator（正则）校验内容合法性，二者结合更严谨；
TextEdit 信号区别：textChanged会被代码修改触发，textEdited仅用户编辑时触发，根据需求选择；
GUI 线程安全：修改 LCDNumber、ProgressBar 等显示控件时，必须在主线程执行，不可在自定义线程中直接操作（会导致程序崩溃）。

结尾：

html 复制代码

🍓 我是草莓熊 Lotso！若这篇技术干货帮你打通了学习中的卡点：
👀 【关注】跟我一起深耕技术领域，从基础到进阶，见证每一次成长
❤️ 【点赞】让优质内容被更多人看见，让知识传递更有力量
⭐ 【收藏】把核心知识点、实战技巧存好，需要时直接查、随时用
💬 【评论】分享你的经验或疑问（比如曾踩过的技术坑？），一起交流避坑
🗳️ 【投票】用你的选择助力社区内容方向，告诉大家哪个技术点最该重点拆解
技术之路难免有困惑，但同行的人会让前进更有方向～愿我们都能在自己专注的领域里，一步步靠近心中的技术目标！

结语：

✨把这些内容吃透超牛的！放松下吧✨ ʕ˘ᴥ˘ʔ づきらど