1. QLineEdit
QLineEdit 用来表示单行输入框.可以输入一段文本,但是不能换行
核心属性
属性 | 说明 |
---|---|
text | 输入框中的文本 |
inputMask | 输入内容格式约束 |
maxLength | 最大长度 |
frame | 是否添加边框 |
echoMode | 显示方式. QLineEdit::Normal :这是默认值,文本框会显示输入的文本。 QLineEdit::Password:在这种模式下,输入的字符会被隐藏,通常用星号(*)或等号(=)代替。 QLineEdit::NoEcho:在这种模式下,文本框不会显示任何输入的字符。 |
cursorPosition | 光标所在位置 |
alignment | 文字对齐方式,设置水平和垂直方向的对齐 |
dragEnabled | 是否允许拖拽 |
readOnly | 是否是只读的(不允许修改) |
placeHolderText | 当输入框内容为空的时候,显示什么样的提示信息 |
clearButtonEnabled | 是否会自动显示出“清除按钮" |
核心信号
属性 | 说明 |
---|---|
void cursorPositionChanged(intold, int new) | 当鼠标移动时发出此信号,old为先前的位置,new为新位置。 |
void editingFinished() | 当按返回或者回车键时,或者行编辑失去焦点时,发出此信号。 |
void returnPressed() | 当返回或回车键按下时发出此信号 如果设置了验证器,必须要验证通过,才能触发 |
void selectionchanged() | 当选中的文本改变时,发出此信号。 |
void textChanged(constQString &text) | 当QLineEdit中的文本改变时,发出此信号,text是新的文本。 代码对文本的修改能够触发这个信号. |
void textEdited(const Qstring&text)) | 当QLineEdit中的文本改变时,发出此信号,text是新的文本。代码对文本的修改不能触发这个信号, |
代码示例:录入个人信息
- 在界面上创建三个输入框和两个单选按钮,一个普通按钮
三个输入框的 objectName 为lineEdit_name,lineEdit_passwordlineEdit_phone
两个单选按钮的 objectName 为 radioButton_male,radioButton_female
按钮的 objectName 为 pushButton
- 编写 widget.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->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.cpp,给按钮添加 slot 函数
void Widget::on_pushButton_submit_clicked()
{
QString ate=ui->radioButton_man->isChecked() ? "男" : "女";
qDebug()<<"姓名:"<< ui->lineEdit_name->text();
qDebug()<<"密码:"<< ui->lineEdit_password->text();
qDebug()<<"性别:"<< ate;
qDebug()<<"电话:"<< ui->lineEdit_phone->text();
}
- 执行程序,可以看到,随着用户输入内容之后,点击按钮,就能打印到输入的信息
inputMask 只能进行简单的输入格式校验,实际开发中,基于正则表达式的方式是更核心的方法
正则表达式,本质上就是一个带有特殊字符的字符串,特殊字符用来表示另一个字符串的特征此时就可以借助正则表达式来描述出一些具有一定特点的字符串.
代码示例:使用正则表达式验证输入框的数据此处要求在输入框中输入一个合法的电话号码(1 开头,11 位,全都是数字).如果验证不通过,则确定按钮无法点击.
- 在界面上创建输入框和一个按钮
- 编写 widget.cpp,把按钮初始 enabled 设为 false.给输入框添加验证器,
使用 QRegExp 创建一个正则表达式对象。“^1\d{10}$”表示"以1开头,后面跟上任意的10个十进制数字”.
使用 QRegExpValidator 创建一个验证器对象.Qt 中内置了四个主要的验证器对象
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.cpp,给 lineEdit 添加 textEdited 信号的 slot 函数
on_lineEdit_textEdited 的参数是当前输入框的内容
通过 lineEdit->validator()获取到内置的验证器
通过 validate 方法验证文本是否符合要求,
第一个参数填写的是要验证的字符串,由于参数要求是 QString&而不是 const。QString&,需要把这个变量复制一下,
第二个参数是一个int&,是输出型参数,当验证的字符串不匹配时,返回这个字符串的长度.(没有。啥实质作用).
返回值是一个枚举,QValidator::Acceptable 表示验证通过QValidator::Invalid 表示验证不通过
void Widget::on_lineEdit_textEdited(const QString &text)
{
QString context=text;
int pos=0;
if (ui->lineEdit->validator()->validate(context,pos)==QValidator::Acceptable)
{
// 验证通过
ui->pushButton->setEnabled(true);
}
else {
// 验证不通过
ui->pushButton->setEnabled(false);
}
}
- 执行程序,观察效果,可以看到此时尝试输入字母是无法输入的,并且只有当输入的内容符合要求,确
定按钮才能被使用.
代码示例:验证两次输入的密码一致
- 在界面上创建两个输入框和一个label
- 编写代码,设置两个输入框的 echoMode 为 Password
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 验证两次输入的密码一致
// 设置密码格式
ui->lineEdit->setEchoMode(QLineEdit::Password);
ui->lineEdit_2->setEchoMode(QLineEdit::Password);
}
- 给两个输入框设置 textEdited slot函数
void Widget::Compare()
{
// 获取输入的密码
QString s1 = ui->lineEdit->text();
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)
{
Compare();
}
void Widget::on_lineEdit_2_textEdited(const QString &arg1)
{
Compare();
}
- 执行程序,观察效果,可以看到当两个输入框内的密码相同时,就会提示密码相同
代码示例:切换显示密码
- 创建一个输入框和一个复选按钮
- 修改 widget.cpp,设置输入框的 echoMode为 Password
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 用复选框点击改变密码的显示模式
// 默认情况下
ui->lineEdit->setEchoMode(QLineEdit::Password);
}
- 修改widget.cpp,给 checkBox 添加 slot 函数
void Widget::on_checkBox_toggled(bool checked)
{
if(checked)
{
ui->lineEdit->setEchoMode(QLineEdit::Normal);
}
else
{
ui->lineEdit->setEchoMode(QLineEdit::Password);
}
}
- 执行程序,可以看到切换复选框的状态,就可以控制输入框显示密码
2. QTextEdit
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 | 垂直方向滚动条的出现策略 |
verticalScrollBarPolicy | 垂直方向滚动条的出现策略 Qt::ScrollBarAsNeeded:根据内容自动决定是否需要滚动条。这是默认值。 Qt::ScrollBarAlwaysOff:总是关闭滚动条。 Qt::ScrollBarAlwaysOn:总是显示滚动条。 |
horizontalScrollBarPolicy | 水平方向滚动条的出现策略 Qt::ScrollBarAsNeeded:根据内容自动决定是否需要滚动条。这是默认值。 Qt::ScrollBarAlwaysOff:总是关闭滚动条。 Qt::ScrollBarAlwaysOn:总是显示滚动条。 |
核心信号
信号 | 说明 |
---|---|
textChanged() | 文本内容改变时触发 |
selectionChanged() | 选中范围改变时触发 |
cursorPositionChanged() | 光标移动时触发 |
undoAvailable(bool) | 可以进行 undo 操作时触发 |
redoAvailable(bool) | 可以进行 redo 操作时触发 |
copyAvaiable(bool) | 文本被选中/取消选中时触发 |
代码示例: 获取多行输入框的内容
- 创建一个多行输入框和一个label
- 给多行输入框添加 slot函数.处理 textChanged 信号
通过 toPlainText 方法获取到内部的文本.
类似的,QTextEdit 还提供了 toMarkdown 和 toHtml.根据需要我们调整不同的获取方式
void Widget::on_textEdit_textChanged()
{
const QString& content = ui->textEdit->toPlainText();
qDebug() << content;
ui->label->setText(content);
}
- 执行程序,可以看到当输入框中的内容发生变化时,label 中的内容同步发生改变
3. QComboBox
表示下拉框QComboBox
核心属性
属性 | 说明 |
---|---|
currentText | 当前选中的文本 |
currentindex | 当前选中的条目下标 从 0开始计算.如果当前没有条目被选中,值为-1 |
editable | 是否允许修改 设为 true 时,QComboBox 的行为就非常接近 QLineEdit,也可以设置 validator |
iconSize | 下拉框图标(小三角)的大小 |
maxCount | 最多允许有多少个条目 |
核心方法
方法 | 说明 |
---|---|
addltem(const QString&) | 添加一个条目 |
currentindex() | 获取当前条目的下标 从 0开始计算.如果当前没有条目被选中,值为-1 |
currentText() | 获取当前条目的文本内容 |
核心信号
方法 | 说明 |
---|---|
activated(int) activated(const QString & text) | 当用户选择了一个选项时发出这个时候相当于用户点开下拉框,并且鼠标划过某个选项,此时还没有确认做出选择, |
currentindexChanged(int) currentindexChanged(const QString& text) | 当前选项改变时发出. 此时用户已经明确的选择了一个选项 用户操作或者通过程序操作都会触发这个信号 |
editTextChanged(const QString & text) | 当编辑框中的文本改变时发出(editable 为 true 时有效) |
代码示例:使用下拉框模拟麦当劳点餐
- 在界面上创建三个下拉框,和一个按钮,
- 编写 widget.cpp,初始化三个下拉框的内容
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 模拟麦当劳点餐
// 给ComboBox添加
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.cpp,给按钮添加 slot 函数
void Widget::on_pushButton_clicked()
{
qDebug()<<ui->comboBox->currentText() <<", "<<ui->comboBox_2->currentText() <<", "<<ui->comboBox_3->currentText();
}
- 执行程序,可以看到,在点击确定按钮时,就能获取到当前下拉框中选中的内容
代码示例2: 从文件中加载下拉框的选项很多时候下拉框的选项并非是固定的,而是通过读取文件/读取网络获取到的
- 在界面上创建一个下拉框
- 创建 E:/code/1.txt 文件
- 修改 widget.cpp,从文件中读取选项
使用 ifstream 打开文件
使用 getline 读取每一行
使用 QString::fromstdstring 把 std::string 转成 QString
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 需要读取文件内容,把文件的每一行都读出来,作为一个ComboBox 的选项
std::fstream file("E:/code/1.txt");
// 判断文件是否被打开
if(!file.is_open())
{
qDebug()<<"文件打开失败";
return;
}
// 按行来读取文本
std::string line;
while(std::getline(file,line))
{
// 取到的每一行的内容,添加的下拉菜单中
ui->comboBox->addItem(QString::fromStdString(line));
}
file.close();
}
- 执⾏程序, 可以看到⽂件内容已经被加载到下拉框中
4. QSpinBox
使用 QSpinBox 或者 QDoubleSpinBox 表示"微调框",它是带有按钮的输入框.可以用来输入整数/浮点数.通过点击按钮来修改数值大小.
由于 SpinBox 和 QDoubleSpinBox 用法基本相同,就只介绍 SpinBox 的使用了
QSpinBox 关键属性
属性 | 说明 |
---|---|
value | 存储的数值. |
singlestep | 每次调整的"步长".按下一次按钮数据变化多少 |
displayInteger | 数字的进制.例如 displayInteger 设为 10,则是按照 10 进制表示. 设为 2 则为 2进制表示. |
minimum | 最小值 |
maximum | 最大值 |
suffix | 后缀 |
prefix | 前缀 |
wrapping | 是否允许换行 |
frame | 是否带边框 |
alignment | 文字对齐方式 |
readOnly | 是否允许修改 |
buttonSymbol | 按钮上的图标. UpDownArrows 上下箭头形式 PlusMinus 加减号形式 NoButtons 没有按钮 |
accelerated(加速的) | 按下按钮时是否为快速调整模式 |
correctionMode | 输入有误时如何修正 1. QAbstractSpinBox::CorrectToPreviousValue:如果用户输入了一个无效的值(例如,在只能显示正整数的SpinBox中输入了负数),那么SpinBox会恢复为上一个有效值。例如,如果SpinBox的初始值是1,用户输入了-1(无效),然后SpinBox会恢复为1。 2. QAbstractSpinBox::CorrectToNearestValue:如果用户输入了一个无效的值,SpinBox会恢复为最接近的有效值。例如,如果SpinBox的初始值是1,用户输入了-1(无效),那么SpinBox会恢复为0。 |
keyboardTrack | 是否开启键盘跟踪. 设为 true,每次在输入框输入一个数字,都会触发一次 valueChanged() 和textChanged()信号. 设为 false,只有在最终按下 enter 或者输入框失去焦点,才会触发valueChanged()和textChanged()信号 |
核心信号
信号 | 说明 |
---|---|
textChanged(QString) | 微调框的文本发生改变时会触发参数 QString 带有 前缀 和 后缀 |
valueChanged(int) | 微调框的文本发生改变时会触发参数 int,表示当前的数值, |
代码示例:调整麦当劳购物车中的份数
- 在界面上创建下列内容
三个下拉框:objectName为comboBox到comboBox_3三个微调框:objectName为spinBox到spinBox_3-个按钮:objectName为pushButton
- 编写代码,修改 widget.cpp,给下拉框设置初始值
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("芬达");
// 设置微调框的范围
ui->spinBox->setRange(1,5);
ui->spinBox_2->setRange(1,5);
ui->spinBox_3->setRange(1,5);
// 设置初始值
ui->spinBox->setValue(1);
ui->spinBox_2->setValue(1);
ui->spinBox_3->setValue(1);
}
- 编写代码,给按钮添加 slot 函数
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();
}
- 执行程序,可以看到当用户选择不同的内容时,点击按钮就能获取到对应的结果,同时我们也无法输入一些超出范围的非法值.
5. QDateTimeEdit
使⽤ QDateEdit 作为⽇期的微调框
使用 QTimeEdit 作为时间的微调框
使用 ODateTimeEdit 作为时间日期的微调框
这几个控件用法非常相似,我们以 QDateTimeEdit 为例进行介绍
QDateTimeEdit 核⼼属性
属性 | 说明 |
---|---|
dateTime | 时间日期的值.形如 2000/1/1 0:00:00 |
date | 单纯日期的值.形如 2001/1/1 |
time | 单纯时间的值.形如0:00:00 |
displayFormat | 时间日期格式.形如 yyyy/M/d H:mm
|
minimumDateTime | 最小时间日期 |
maximumDateTime | 最大时间日期 |
timeSpec |
|
核⼼信号
信号 | 说明 |
---|---|
dateChanged(QDate) | ⽇期改变时触发. |
timeChanged(QTime) | 时间改变时触发. |
dateTimeChanged(QDateTime) | 时间⽇期任意⼀个改变时触发. |
代码示例: 实现日期计算器
- 在界面上创建两个 QDateTimeEdit 和一个按钮,一个label
ODateTimeEdit的objectName 为dateTimedit old 和 dateTimeEdit new
2)编写计算按钮的 slot 函数
- 使用 daysTo 函数可以计算两个日期的天数
- 使用 secsTo
- 函数可以计算两个时间的秒数
- 通过(秒数 /3600)换算成小时数,再余上 24 得到零几个小时使用 Qstring::number 把整数转成 QString 进行拼接
void Widget::on_pushButton_clicked()
{
// 首先获取两个日期的当前日期
QDateTime dateOld = ui->dateTimeEdit->dateTime();
QDateTime dateNew = ui->dateTimeEdit_2->dateTime();
qDebug()<<dateOld<<dateNew;
// 计算两个日期的差值天数
//int days=dateOld.daysTo(dateNew);// 会有缺陷,如果差值小于24小时,会多算一天
// 计算两个日期的差值秒数
int seconds=dateOld.secsTo(dateNew);
// 计算多余的小时
int hours=(seconds/3600)%24;
int days=(seconds/3600)/24;
// 把计算结果输出到label中
ui->label->setText(QString("持续爱你已经")+ QString(days)+QString("天")
+QString(hours)+ QString("小时"));
}
- 执⾏程序, 观察结果
6. QDial
使用 QDial 表示一个 旋钮
核心属性
属性 | 说明 |
---|---|
value | 持有的数值, |
minimum | 最小值 |
maximum | 最大值 |
singleStep | 按下方向键的时候改变的步长 |
pageStep | 按下 pageUp/pageDown 的时候改变的步长 |
sliderPosition | 界面上旋钮显示的 初始位置 |
tracking | 外观是否会跟踪数值变化 默认值为 true.一般不需要修改 |
wrapping | 是否允许循环调整 即数值如果超过最大值,是否允许回到最小值,(调整过程能否"套圈") |
notchesVisible | 是否显示 刻度线 |
notchTarget | 刻度线之间的相对位置 数字越大,刻度线越稀疏 |
核心信号
属性 | 说明 |
---|---|
valueChanged(int) | 数值改变时触发 |
rangeChanged(int, int) | 范围变化时触发 |
代码示例:调整窗口透明度
- 在界面上创建一个旋钮和一个label
- 编写 widget.cpp,对旋钮初始化
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.cpp,设置旋钮的 valuechanged slot函数
void Widget::on_dial_valueChanged(int value)
{
ui->label->setText(QString("当前不透明度为: ") + QString::number(value));
this->setWindowOpacity((double)value / 100);
}
- 运行程序,观察效果,可以看到随着拖动旋钮旋转,不透明度发生明显变化
7. QSlider
使⽤ QSlider 表⽰⼀个滑动条.
QSlider 和 QDial 都是继承自 QAbstractslider,因此用法上基本相同
核心属性
属性 | 说明 |
---|---|
value | 持有的数值. |
minimum | 最小值 |
maximum | 最大值 |
singleStep | 按下方向键的时候改变的步长, |
pageStep | 按下pageUp/pageDown 的时候改变的步长, |
sliderPosition | 滑动条显示的 初始位置 |
tracking | 外观是否会跟踪数值变化, 默认值为 true.一般不需要修改. |
orientation | 滑动条的方向是水平还是垂直 |
invertedAppearance | 是否要翻转滑动条的方向 |
tickPosition | 刻度的位置. |
tickinterval | 刻度的密集程度 |
核心信号
属性 | 说明 |
---|---|
valueChanged(int) | 数值改变时触发 |
rangeChanged(int, int) | 范围变化时触发 |
代码示例: 通过自定义快捷键调整滑动条位置设置 -减小 value,设置=增加 value.默认情况下滑动条****可以通过 方向键 或者 pageUp/pageDown 调整大小.
- 在界面上创建滑动条和 label
- 编写 Widget.cpp 代码
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 使用快捷键,- 和 =(也就相当于+),来调节滚动条
// 1.设置快捷键
QShortcut *st1=new QShortcut(this);
st1->setKey(QKeySequence("-"));
QShortcut *st2=new QShortcut(this);
st2->setKey(QKeySequence("="));
// 2.用connect函数进行信号与槽的连接
connect(st1,&QShortcut::activated,this,&Widget::mudValue);
connect(st2,&QShortcut::activated,this,&Widget::addValue);
}
void Widget::addValue()
{
// 获取当前的数值
int value=ui->horizontalSlider->value();
if(value>=ui->horizontalSlider->maximum())
{
return;
}
ui->horizontalSlider->setValue(value+5);
}
void Widget::mudValue()
{
// 获取当前的数值
int value=ui->horizontalSlider->value();
if(value<=ui->horizontalSlider->minimum())
{
return;
}
ui->horizontalSlider->setValue(value-5);
}
void Widget::on_horizontalSlider_valueChanged(int value)
{
ui->label->setText("当前的数值为:"+ QString::number(value));
}