010 Qt_输入类控件(LineEdit、TextEdit、ComboBox、SpinBox、DateTimeEdit、Dial、Slider)

前言

本文将会向你介绍输入类控件：LineEdit、TextEdit、ComboBox、SpinBox、DateTimeEdit、Dial、Slider

一、QLineEdit

1.简介

QLineEdit 用来表示单行输入框. 可以输入一段文本, 但是不能换行.
QLineEdit 具有许多功能，包括自动完成、输入限制、密码模式等。它还可以设置最大长度、光标样式、输入校验等。QLineEdit 可以被嵌入到其他 Qt 小部件中，如对话框、窗口等。

2.常见属性及说明

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

3.重要信号及说明

信号	说明
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是新的⽂本。代码对⽂本的修改不能触发这个信号.

4.示例一：用户登录界面

①在界面上创建三个输入框和两个单选按钮, ⼀个普通按钮

② 编写widget.cpp文件，初始化输入框的内容，演示inputMask（格式约束）、echoMode（显示方式）、placeHolderText（提示信息）、clearButtonEnabled（清除按钮）等属性

#include "widget.h"
#include "ui_widget.h"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);//约束格式：输入11位数，按照3-4-4形式ui->lineEdit_phone->setInputMask("000-0000-0000");
}Widget::~Widget()
{delete ui;
}void Widget::on_pushButton_clicked()
{QString gender=ui->radioButton_male->isChecked() ? "男" : "女";qDebug()<<"姓名:"<<ui->lineEdit_name->text() << "密码:" << ui->lineEdit_password->text()<< "性别: " << gender<< "手机: " << ui->lineEdit_phone->text();
}

5.示例二：验证两次输入的密码是否一致+显示密码

①创建两个LineEdit输入框和⼀个CheckBox复选框以及一个label

②编写widget.cpp文件，给两个输入框lineEdit添加判断两个密码是否相同逻辑的槽函数，给复选框添加切换显示模式的槽函数——演示void textEdited(const QString &text))信号（当QLineEdit中的⽂本改变时，发出此信号，text是新的⽂本。代码对文本的修改不能触发这个信号）

#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);ui->lineEdit_2->setEchoMode(QLineEdit::Password);ui->label->setText("密码为空");
}Widget::~Widget()
{delete ui;
}void Widget::on_checkBox_toggled(bool checked)
{if(checked){ui->lineEdit->setEchoMode(QLineEdit::Normal);ui->lineEdit_2->setEchoMode(QLineEdit::Normal);}else{ui->lineEdit->setEchoMode(QLineEdit::Password);ui->lineEdit_2->setEchoMode(QLineEdit::Password);}}void Widget::on_lineEdit_textEdited(const QString &arg1)
{(void)arg1; //类型转换，消除编译器未使用到arg1参数的警告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_2_textEdited(const QString &arg1)
{(void)arg1;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("两次输入的密码不同!");}
}

③运行程序，观察效果

二、TextEdit

1.简介

QTextEdit是Qt中的一个可编辑的文本框控件，可以用于显示和编辑多行文本。 它是基于QPlainTextEdit的一个子类，提供了更丰富的功能。

QTextEdit可以用于显示富文本，支持使用HTML或其他格式来设置文本的样式，包括字体、颜色、大小、对齐方式等。 它还可以显示图像和链接，并且可以响应用户的点击事件。

除了显示富文本，QTextEdit还支持一些基本的文本编辑操作，如复制、剪切、粘贴和撤销。它还提供了一些高级的编辑功能，如查找和替换、查看和修改文本的样式、插入列表和表格等

2.常见属性及说明

属性	说明
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 : 总是显⽰滚动条。

3.重要信号及说明

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

4.示例一：获取多行输入框的内容

①在界面中创建一个label和一个TextEdit控件

②编写多行输入框TextEdit的槽函数，信号选择textChanged()

#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()
{const QString& content = ui->textEdit->toPlainText();qDebug() << content;ui->label->setText(content);
}

③运行程序，观察结果

5.示例二：验证输入框的各种信号

①在界面上创建一个TextEdit控件

②给输入框添加以下几个 slot 函数，演示textChanged（文本内容发生变化时触发）、selectionChanged（选中的文本范围发生变化时触发）、cursorPositionChanged（光标位置发生变化时触发）、undoAvailable（可以撤消的操作存在时）、redoAvailable(可以重做的操作存在时)、copyAvaiable(可以复制的文本存在时)等信号

#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() << "[TextChange]"  << ui->textEdit->toPlainText();
}void Widget::on_textEdit_selectionChanged()
{const QTextCursor& cursor = ui->textEdit->textCursor();qDebug() << "[cursorPositionChanged]" << cursor.position();
}void Widget::on_textEdit_cursorPositionChanged()
{const 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;
}

③运行代码，查看结果
输入1，undoAvailable为true，说明我们可以撤回，cursorPositionChanged光标移动到1的位置处，textChanged文本内容为1，

Ctrl y撤回1，可看到undoAvailable为false，说明没有可以撤回的了，redoAvailable为true，说明我们可以撤回刚才那个撤回操作

ctrl y，redoAvailable就为false了

三、ComboBox

1.简介

QComboBox是一个下拉框控件，用于在一个预定义的列表中选择一个选项。它是Qt库中的一个类，可以在Qt应用程序中使用

2.常见属性及说明

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

3.核心方法 说明

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

4.核心信号 说明

核心信号	说明
activated(int)； activated(const QString & text)	当用户选择了⼀个选项时发出，这个时候相当于用户点开下拉框, 并且⿏标划过某个选项.此时还没有确认做出选择.
currentIndexChanged(int) currentIndexChanged(const QString& text)	当前选项改变时发出. 此时用户已经明确的选择了⼀个选项. 用户操作或者通过程序操作都会触发这个信号.
editTextChanged(const QString &text)	当编辑框中的⽂本改变时发出(editable 为 true 时有效)

5.示例一：ComboBox的基本使用

①拖拽三个comboBox下拉框和一个pushbutton按钮

②编写widget.cpp文件，添加下拉框中的选项

#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_2->addItem("体育课");ui->comboBox_2->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();
}

③运行程序观察结果

6.示例二：从文件中读取数据填充下拉框中的条目

①从界面上拖拽一个下拉框comboBox，然后创建一个txt文件，每个数据占一行

②编写widget.cpp文件，从文件中读取数据添加条目到comboBox

#include "widget.h"
#include "ui_widget.h"
#include <fstream>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);std::ifstream file("D:/QT/code/ComboBox_2/config.txt");std::string line;while(std::getline(file, line)){ui->comboBox->addItem(QString::fromStdString(line)); //将std::string转化为QString}file.close();   //关闭文件，防止资源泄漏
}Widget::~Widget()
{delete ui;
}

③运行代码查看结果

四、SpinBox

1.简介

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

2.常见属性及说明

属性	说明
value	存储的数值.
singleStep	每次调整的 “步长”. 按下⼀次按钮数据变化多少.
displayInteger	数字的进制，例如 displayInteger 设为 10, 则是按照 10 进制表⽰. 设为 2 则为 2进制表⽰.
minimum	最小值
maximum	最大值
buttonSymbol	按钮上的图标
UpDownArrows	上下箭头形式
PlusMinus	加减号形式
NoButtons	没有按钮
accelerated (加速的)	按下按钮时是否为快速调整模式
correctionMode	输入有误时如何修正。

3.重要信号及说明

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

4.示例一：QSpinBox的使用

① 在界面中创建三个下拉框ComboBox、三个spinBox微调框、一个pushbutton按钮

②编写widget.cpp，微调框初始值设置为0

#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_2->addItem("薯条");ui->comboBox_2->addItem("⻨辣鸡翅");ui->comboBox_3->addItem("可乐");ui->comboBox_3->addItem("雪碧");ui->spinBox->setValue(0);       //设置初始值ui->spinBox->setRange(0, 5);    //设置范围ui->spinBox_2->setValue(0);ui->spinBox_2->setRange(0, 5);ui->spinBox_3->setValue(0);ui->spinBox_3->setRange(0, 5);
}Widget::~Widget()
{delete ui;
}void Widget::on_pushButton_clicked()
{qDebug() << "当前下单的内容："<< ui->comboBox->currentText() << " : " << ui->spinBox->value()<< ui->comboBox_2->currentText() << " : " << ui->spinBox_2->value()<< ui->comboBox_3->currentText() << " : " << ui->spinBox_3->value();
}

③运行程序，查看结果，我们可以通过spinBox来调整数量

五、DateTimeEdit

1.简介

QTimeEdit 作为时间的微调框.
QDateEdit 作为日期的微调框.
QDateTimeEdit 作为时间日期的微调框.
允许用户输入日期和时间，并提供了可视化的日历和时钟部件，方便用户选择日期和时间。它可以显示日期、时间或日期时间，具体取决于设置的格式。

2.常见属性及说明

属性	说明
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的偏移量(时差).

3.重要信号及说明

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

4.示例一：计算日期差值

①在界面上创建两个 QDateTimeEdit 和⼀个按钮, ⼀个 label

②编写widget.cpp，计算两个日期天、时、秒的差值

daysTo函数：计算两个日期的天数
secsTo 函数：计算两个时间的秒数.
两个日期之间的小时差值：通过 (秒数 / 3600) 换算成小时数,再余上 24 得到零几个小时.
使用 QString::number 把整数转成 QString 进行拼接.

#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_pushButton_clicked()
{QDateTime timeOld = ui->dateTimeEdit_old->dateTime();QDateTime timeNew = ui->dateTimeEdit_new->dateTime();//计算日期差值int days = timeOld.daysTo(timeNew);int hours = (timeOld.secsTo(timeNew) / 3600) % 24;//设置label的内容QString text = QString("距离生日已经过去") + QString::number(days) + QString(" 天 零")+ QString::number(hours) + QString(" 个小时！");ui->label->setText(text);
}

③运行程序观察结果

六、Dial

1.简介

QDial是Qt框架中的一个类，用于创建一个旋钮控件。它提供了一个圆形的旋钮，用户可以通过拖动旋钮或点击旋钮上的刻度来选择一个值。QDial可以用于设置音量、亮度等可调节的参数。

2.常见属性及说明

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

3.重要信号及说明

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

4.示例一：使用旋钮调整窗口透明度

①拖拽一个dial旋钮与l一个abel文本框

②编写widget.cpp文件，设置旋钮的初始状态

#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//设置可以循环旋转ui->dial->setWrapping(true);//设置刻度可见ui->dial->setNotchesVisible(true);//设置最大值为ui->dial->setMaximum(100);//设置最小值为ui->dial->setMinimum(0);//设置初始值为ui->dial->setValue(100);
}Widget::~Widget()
{delete ui;
}void Widget::on_dial_valueChanged(int value)
{ui->label->setText(QString("当前不透明度为：") + QString::number(value));this->setWindowOpacity((double)value / 100);
}

③运行程序观察结果

七、Slider

1.简介

QSlider是Qt框架中的一个控件，用于实现滑动条的功能。滑动条是用户界面中的常用控件之一，可以通过拖动滑块来选择一个值，或者通过点击滑条上的位置来快速定位。

2.常见属性及说明

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

3.重要信号及说明

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

4.示例一：调整窗口大小

①在界面中创建两个滑动条slider，一个是水平的一个垂直的

可以在此选择是垂直还是水平的滑动条

②完成slider滑动条的初始化，以及编写对应的槽函数
槽函数型号选用valueChanged

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->horizontalSlider->setMinimum(500);ui->horizontalSlider->setMaximum(2000);ui->horizontalSlider->setSingleStep(100); //滑块每次增加或减少的数值是 100ui->horizontalSlider->setValue(800);ui->verticalSlider->setMinimum(500);ui->verticalSlider->setMaximum(1500);ui->verticalSlider->setSingleStep(100);ui->verticalSlider->setValue(600);//翻转朝向：默认滑块从下向上，改成从上往下增长ui->verticalSlider->setTickInterval(true);
}Widget::~Widget()
{delete ui;
}//改变窗口大小
void Widget::on_horizontalSlider_valueChanged(int value)
{QRect rect = this->geometry();this->setGeometry(rect.x(), rect.y(), value, rect.height());qDebug() << value;
}void Widget::on_verticalSlider_valueChanged(int value)
{QRect rect = this->geometry();this->setGeometry(rect.x(), rect.y(), rect.width(), value);qDebug() << value;
}

③运行程序，可以观察到通过滑动滑动条可以实现窗口大小的改变

小结

今日分享就到这里啦，如果本文存在疏漏或错误的地方还请您能够指出，另外地，本年度的博客更新就到这啦，咱们明年见！！！