Qt入门4——常用控件2
1. 显示类控件
1.1 Label
QLabel 可以用来显示文本和图片。
| 属性 | 说明 |
| text | QLabel 中的文本 |
| textFormat | 文本的格式 Qt::PlainText 纯文本 Qt::RichText 富文本(⽀持html标签) Qt::MarkdownText markdown格式 Qt::AutoText 根据文本内容⾃动决定⽂本格式. |
| pixmap | QLabel 内部包含的图片 |
| scaledContents | 设为true表示内容⾃动拉伸填充 QLabel 设为false则不会自动拉伸 |
| alignment | 对⻬⽅式. 可以设置⽔平和垂直⽅向如何对⻬ |
| wordWrap | 设为true内部的⽂本会⾃动换行. 设为false则内部⽂本不会⾃动换⾏. |
| indent | 设置⽂本缩进.⽔平和垂直⽅向都⽣效. |
| margin | 内部⽂本和边框之间的边距. 不同于于indent,但是是上下左右四个⽅向都同时有效. ⽽indent最多只是两个⽅向有效(具体哪两个⽅向有效取决于alignment) |
| openExternalLinks | 是否允许打开⼀个外部的链接. (当QLabel⽂本内容包含url的时候涉及到) |
| buddy | 给QLabel关联⼀个"伙伴",这样点击QLabel时就能激活对应的伙伴. 例如伙伴如果是⼀个QCheckBox,那么该QCheckBox就会被选中. |
示例1：
1.创建三个label
2.设置相关代码：
//把第一个label设置为纯文本
ui->label->setTextFormat(Qt::PlainText);
ui->label->setText("# <b>这是一段纯文本</b>");
//把第二个label设置为富文本
ui->label_2->setTextFormat(Qt::RichText);
ui->label_2->setText("# <b>这是一段富文本</b>");
//把第三个label设置为markdown文本
ui->label_3->setTextFormat(Qt::MarkdownText);
ui->label_3->setText("# 这是一段markdown文本");效果如图：
示例2：设置图片
1.创建一个label
2.设置代码：
//先把QLabel设置成与窗口一样大，并且把这个QLabel左上角设置到窗口的左上角
//1.先让整个QLabel铺满整个窗口
QRect windowRect = this->geometry();
ui->label->setGeometry(0,0,windowRect.width(),windowRect.height());
QPixmap pixmap(":/candle.png");
ui->label->setPixmap(pixmap);
//启动自动拉伸，此时图片就能充满整个窗口
ui->label->setScaledContents(true);效果如图：
示例2扩大缩小窗口，图片并不会随着窗口变化
示例3：优化示例2：
Qt中，表示用户的操作有两类概念，一个是信号，另一个是事件。
当我们拖拽窗口大小时，就会触发resize事件（resizeEvent），像resize这样的事件是连续变化的，把窗口尺寸从A脱到B的过程中会触发一系列的resizeEvent，此时就可以借助resizeEvent来完成上述的功能。
//此处的形参 event 是非常有用的，这里包含了触发这个resize事件这一时刻窗口尺寸的数值
//需包含头文件<QResizeEvent>
void Widget::resizeEvent(QResizeEvent *event)
{
ui->label->setGeometry(0,0,event->size().width(),event->size().height());
}效果如图：
示例4：设置文本对齐,自动换行,缩进,边距
1.创建四个label, 并且在 QFrame 中设置frameShape为 Box(设置边框之后看起来会更清晰⼀些)
2.设置代码：
//在构造函数中，给这几个label设置不同的属性
//设置对齐方式
ui->label->setText("这是一段文本");
ui->label->setAlignment(Qt::AlignRight | Qt::AlignTop);//右上
//设置自动换行
ui->label_2->setText("这是一段这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长");
ui->label_2->setWordWrap(true);
//设置缩进
ui->label_3->setText("这是一段这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长");
ui->label_3->setWordWrap(true);
ui->label_3->setIndent(50);
//设置边距
ui->label_4->setText("这是一段这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长");
ui->label_4->setWordWrap(true);
ui->label_4->setMargin(50);效果如图：
示例5：设置伙伴
1. 创建两个label和两个radioButton.
此处把label中的⽂本设置为"快捷键&A"这样的形式, 其中&后⾯跟着的字符,就是快捷键,可以通过alt+A的⽅式来触发该快捷键
需要注意的是：这里的快捷键和 QPushButton 的不同，需要搭配alt和单个字⺟的方式才能触
2.在构造函数设置伙伴关系
// 设置label和radioButton伙伴关系
ui->label->setBuddy(ui->radioButton);
ui->label_2->setBuddy(ui->radioButton_2);效果如图：alt+B:
1.2 LCD Number
QLCDNumer 是⼀个专门用来显示数字的控件.类似于"老式计算器"的效果 。
| 属性 | 说明 |
| intValue | QLCDNumber 显示的数字值(int). |
| value | QLCDNumber 显示的数字值(double). 和intValue是联动的. 例如给value设为1.5,intValue的值就是2. 另外,设置value和intValue的⽅法名字为 display ,而不是 setValue 或 者 setIntValue |
| digitCount | 显示几位数字. |
| mode | 数字显示形式. 1. QLCDNumber::Dec ：⼗进制模式，显示常规的⼗进制数字； 2. QLCDNumber::Hex ：⼗六进制模式，以⼗六进制格式显示数字； 3. QLCDNumber::Bin ：⼆进制模式，以⼆进制格式显示数字； 4. QLCDNumber::Oct ：⼋进制模式，以⼋进制格式显示数字。 |
| segmentStyle | 设置显示风格. 1. QLCDNumber::Flat ：平⾯的显示风格，数字呈现在⼀个平坦的表⾯上； 2. QLCDNumber::Outline ：轮廓显示风格，数字具有清晰的轮廓和阴影效果； 3. QLCDNumber::Filled ：填充显示风格，数字被填充颜⾊并与背景区分开。 |
| smallDecimalPoint | 设置⽐较⼩的⼩数点。 |
示例：倒计时
1.在界⾯上创建⼀个 QLCDNumber ,初始值设为10.
2. 修改widget.h代码，创建一个QTimer成员，和一个handle函数
void handle();
QTimer* timer;
3.修改widget.cpp,在构造函数中初始化QTimer：
•QTimer 表⽰定时器.通过 QTimer start ⽅法启动定时器之后,就会每隔⼀定周期,触发⼀次 QTimer::timeout 信号；
• 使⽤ connect 把 QTimer::timeout 信号和 次触发 Widget::handle连接起来,意味着每次触发 QTimer::timeout 都会执⾏ Widget::handle。
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);
}4.修改widget.cpp,实现handle：
void Widget::handle()
{
//先拿到LCDNumber中的数字
int value = ui->lcdNumber->intValue();
if(value <= 0)
{
//数字减到了0，停止定时器
timer->stop();
return;
}
ui->lcdNumber->display(value - 1);
}
效果如图：可以看到每隔⼀秒钟,显⽰的数字就减少1
1.3 ProgressBar
使用 QProgressBar 表示一个进度条.
| 属性 | 说明 |
| minimum | 进度条最小值 |
| maximum | 进度条最大值 |
| value | 进度条当前值 |
| alignment | ⽂本在进度条中的对齐方式； Qt::AlignLeft :左对齐； Qt::AlignRight :右对齐； Qt::AlignCenter :居中对齐 ； Qt::AlignJustify :两端对齐 |
| textVisible | 进度条的数字是否可见 |
| orientation | 进度条的⽅向是⽔平还是垂直 |
| invertAppearance | 是否是朝反⽅向增长进度 |
| textDirection | ⽂本的朝向 |
| format | 展示的数字格式. %p:表示进度的百分比（0-100）； %v:表示进度的数值（0-100）； %m:表示剩余时间（以毫秒为单位）； %t:表示总时间（以毫秒为单位） |
示例1：设置进度条按时间增长
1.在界面创建进度条
2.修改widget.h,创建 QTimer 和 handle 函数
public:
void handle();
private:
QTimer* timer;3.修改widget.cpp,初始化 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);
}4.修改widget.cpp,实现handle
void Widget::handle()
{
int value = ui->progressBar->value();
if(value >= 100)
{
//进度条满了就停止定时器
timer->stop();
return;
}
ui->progressBar->setValue(value + 1);
}
效果如图：
示例2： 将进度条变为红色
1.同示例1
2.在QtDesigner右侧的属性编辑器中,找到QWidget的 styleSheet 属性.
同时把 QProcessBar 的 比特就业课 alignment 属性设置为垂直⽔平居中.
效果如图：
1.4 Calendar Widget
QCalendarWidget 表示⼀个"日历"。
| 属性 | 说明 |
| selectDate | 当前选中的日期 |
| minimumDate | 最小日期 |
| maximumDate | 最大日期 |
| firstDayOfWeek | 每周的第⼀天(也就是日历的第⼀列)是周几 |
| gridVisible | 是否显示表格的边框 |
| selectionMode | 是否允许选择日期 |
| navigationBarVisible | 日历上⽅标题是否显示 |
| horizontalHeaderFormat | 日历上方标题显示的日期格式 |
| verticalHeaderFormat | 日历第⼀列显示的内容格式 |
| dateEditEnabled | 是否允许日期被编辑 |
重要信号：
| 信号 | 说明 |
| selectionChanged(const QDate&) | 当选中的日期发⽣改变时发出 |
| activated(const QDate&) | 当双击⼀个有效的⽇期或者按下回⻋键时发出，形参是⼀个QDate类型，保存了选中的日期 |
| currentPageChanged(int, int) | 当年份⽉份改变时发出，形参表示改变后的新年份和月份 |
示例：
1.在界⾯上创建⼀个 QCalendarWidget 和⼀个label
2.给 QCalendarWidget添加槽函数
void Widget::on_calendarWidget_selectionChanged()
{
QDate date = ui->calendarWidget->selectedDate();
//将选择的日期设置到label中
ui->label->setText(date.toString());
}效果如图：
2. 输入类控件
2.1 Line Edit
QLineEdit ⽤来表示单行输⼊框.可以输入⼀段文本,但是不能换行。
| 属性 | 说明 |
| text | 输⼊框中的⽂本 |
| inputMask | 输⼊内容格式约束 |
| maxLength | 最⼤⻓度 |
| frame | 是否添加边框 |
| echoMode | 显示⽅式. QLineEdit::Normal :这是默认值，文本框会显示输入的文本； QLineEdit::Password ：在这种模式下，输入的字符会被隐藏， 通常用星号（*）或等号（=）代替； QLineEdit::NoEcho ：在这种模式下，⽂本框不会显示任何输入的字符。 |
| cursorPosition | 光标所在位置 |
| alignment | ⽂字对齐⽅式,设置⽔平和垂直⽅向的对⻬. |
| dragEnabled | 是否允许拖拽 |
| readOnly | 是否是只读的(不允许修改) |
| placeHolderText | 当输⼊框内容为空的时候,显示什么样的提示信息 |
| clearButtonEnabled | 是否会⾃动显示出"清除按钮". |
核心信号：
| 属性 | 说明 |
| 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是新的文本。 代码对文本的修改不能触发这个信号. |
示例1：录入个人信息
1.在界面上创建三个输⼊框和两个单选按钮,⼀个普通按钮
2.在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);
//手机号有固定格式,此处的0代表数字
ui->lineEdit_phone->setInputMask("000-0000-0000");
}3.修改槽函数代码
void Widget::on_pushButton_clicked()
{
QString gender = ui->radioButton_male->isChecked() ? "男" : "女";
qDebug() << "姓名:" << ui->lineEdit_name->text()
<< "密码:" << ui->lineEdit_password->text()
<< "电话:" << ui->lineEdit_phone->text()
<< "性别:" << gender;
}效果如图：
事实上，我们在日常输入密码或电话时都会验证你输入的格式是否正确，怎么达到这一效果呢？
正则表达式是⼀种在计算机中常用的,使用特殊字符描述⼀个字符串的特征的机制，在进行字符串匹配时非常有用。
示例2：使⽤正则表达式验证输入框的数据
1.在界面上创建输入框和按钮
2.编写widget.cpp,把按钮初始enabled设为false.给输⼊框添加验证器，当验证通过时，按钮恢复正常
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
//使用正则表达式完成验证：“以1开头,后面跟上任意的10个⼗进制数字”
//设置验证器
QRegExp regExp("^1\\d{10}$");
ui->lineEdit->setValidator(new QRegExpValidator(regExp));//需包含头文件<QRegExpValidator>
}3.编写槽函数
// on_lineEdit_textEdited 的参数是当前输⼊框的内容.
void Widget::on_lineEdit_textEdited(const QString &text)
{
QString content = text;
int pos = 0;
//通过lineEdit->validator() 获取到内置的验证器.
//通过validate ⽅法验证⽂本是否符合要求.
//第⼀个参数填写的是要验证的字符串.由于参数要求是 QString& ,需要把这个变量复制⼀下.
//第⼆个参数是⼀个int&,是输出型参数.当验证的字符串不匹配时,返回这个字符串的⻓度.(没有啥实质作⽤).
//返回值是⼀个枚举.QValidator::Acceptable 表⽰验证通过,QValidator::Invalid 表⽰验证不通过.
if(ui->lineEdit->validator()->validate(content,pos) == QValidator::Acceptable)
{
//验证通过
ui->pushButton->setEnabled(true);
}
else
{
// 验证不通过
ui->pushButton->setEnabled(false);
}
}
效果如图：
示例3：验证两次密码一致
1.在界⾯上创建两个输⼊框和⼀个label
2.编写代码,设置两个输⼊框的 echoMode 为 Password
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("密码为空");
}3.给两个输入框设置槽函数，（自定义函数，然后令两个槽函数复用此函数，减少代码冗余）
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();
}
效果如图：
示例4：增加“显示密码”选项
1.创建⼀个输⼊框和⼀个复选按钮
2.修改widget.cpp,设置输⼊框的 echoMode 为 Password
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
//初识情况下，输入框按照密码方式显示
ui->lineEdit->setEchoMode(QLineEdit::Password);
}
3.设置槽函数
void Widget::on_checkBox_toggled(bool checked)
{
if(checked)
{
//true 则是“显示密码”状态，就把输入框的显示模式设为normal
ui->lineEdit->setEchoMode(QLineEdit::Normal);
}
else
{
//false 则是“隐藏密码”状态，就把输入框的显示模式设为password
ui->lineEdit->setEchoMode(QLineEdit::Password);
}
}效果如图：
2.2 Text Edit
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 | 垂直⽅向滚动条的出现策略 Qt::ScrollBarAsNeeded :根据内容⾃动决定是否需要滚动条，这是默认值； Qt::ScrollBarAlwaysOff :总是关闭滚动条； Qt::ScrollBarAlwaysOn :总是显示滚动条。 |
| horizontalScrollBarPolicy | ⽔平⽅向滚动条的出现策略 Qt::ScrollBarAsNeeded :根据内容⾃动决定是否需要滚动条，这是默认值； Qt::ScrollBarAlwaysOff :总是关闭滚动条； Qt::ScrollBarAlwaysOn :总是显示滚动条。 |
核心信号：
| 属性 | 说明 |
| textChanged() | ⽂本内容改变时触发 |
| selectionChanged() | 选中范围改变时触发 |
| cursorPositionChanged() | 光标移动时触发 |
| undoAvailable(bool) | 可以进⾏undo操作时触发 |
| redoAvailable(bool) | 可以进⾏redo操作时触发 |
| copyAvaiable(bool) | ⽂本被选中/取消选中时触发 |
示例1：获取多⾏输⼊框的内容
1.创建⼀个多⾏输⼊框和⼀个label
2.设置槽函数
void Widget::on_textEdit_textChanged()
{
//获取多行输入框中的内容
const QString& text = ui->textEdit->toPlainText();
ui->label->setText(text);
}
效果如图：
2.3 Combo Box
QComboBox 表示下拉框.
| 属性 | 说明 |
| currentText | 当前选中的文本 |
| currentIndex | 当前选中的条目下标 |
| editable | 是否允许修改 设为true时, QComboBox 的⾏为就非常接近 QLineEdit ,也可以 设置 validator |
| iconSize | 下拉框图标(小三角)的大小 |
| maxCount | 最多允许有多少个条目 |
核心方法：
| 方法 | 说明 |
| addItem(constQString&) | 添加⼀个条⽬ |
| currentIndex() | 获取当前条⽬的下标 从0开始计算.如果当前没有条⽬被选中,值为-1 |
| currentText() | 获取当前条⽬的⽂本内容 |
核心信号：
| 方法 | 说明 |
| activated(int) activated(constQString&text) | 当用户选择了⼀个选项时发出. 这个时候相当于⽤⼾点开下拉框,并且⿏标划过某个选项. 此时还没有确认做出选择. |
| currentIndexChanged(int) currentIndexChanged(constQString &text) | 当前选项改变时发出. 此时⽤⼾已经明确的选择了⼀个选项. 用户操作或者通过程序操作都会触发这个信号. |
| editTextChanged(constQString& text) | 当编辑框中的⽂本改变时发出 (editable为true时有效) |
示例1：模拟点餐
1.界面添加如图所需控件：
2.添加构造函数代码：
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("七喜 ");
}3.设置槽函数：
void Widget::on_pushButton_clicked()
{
QString result = "您选择的是：";
result = result + ui->comboBox->currentText() + ui->comboBox_2->currentText() + ui->comboBox_3->currentText();
ui->label_4->setText(result);
}效果如图：
示例2：从⽂件中加载下拉框的选项
1.创建下拉框
2.修改构造函数：
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
//需要读取文件内容，把文件每一行读取出来，作为应该combobox选项
std::ifstream file("D:/code/config.txt");//需包含头文件<fstream>
if(!file.is_open())
{
qDebug() << "文件打开失败";
return;
}
//按行读取文件内容
// getline 函数完成
std::string line;
while(std::getline(file,line))
{
//取到的每一行内容，设置到下拉框中
ui->comboBox->addItem(QString::fromStdString(line));
}
file.close();
}效果如图：
2.4 Spin Box
使用 QSpinBox 或者 QDoubleSpinBox 表示"微调框",它是带有按钮的输⼊框.可以⽤来输⼊整数/浮点数.通过点击按钮来修改数值大小.
| 属性 | 说明 |
| value | 存储的数值 |
| singleStep | 每次调整的"步长"，按下⼀次按钮数据变化多少 |
| displayInteger | 数字的进制.例如displayInteger设为10,则是按照10进制表示，设为2则为2进制表示 |
| minimum | 最⼩值 |
| maximum | 最⼤值 |
| suffix | 后缀 |
| prefix | 前缀 |
| wrapping | 是否允许换⾏ |
| frame | 是否带边框 |
| alignment | ⽂字对⻬⽅式 |
| readOnly | 是否允许修改 |
| buttonSymbol | 按钮上的图标 UpDownArrows 上下箭头形式； PlusMinus 加减号形式； 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.在界面添加控件：
2.设置构造函数：
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(" 七喜");
//对QSpinBox的范围进行设置
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);
}3.添加槽函数
void Widget::on_pushButton_clicked()
{
QString result = "您下单的数量为：";
result = result
+ ui->comboBox->currentText() + QString::number(ui->spinBox->value())
+ ui->comboBox_2->currentText() + QString::number(ui->spinBox_2->value())
+ ui->comboBox_3->currentText() + QString::number(ui->spinBox_3->value());
ui->label_4->setText(result);
}效果如图：
2.5 Date Edit &Time Edit
使用QDateEdit 作为日期的微调框；
使用QTimeEdit 作为时间的微调框；
使用QDateTimeEdit 作为时间日期的微调框。
以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 表示秒 |
| minimumDateTime | 最小时间日期 |
| maximumDateTime | 最大时间日期 |
| timeSpec | Qt::LocalTime ：显示本地时间。 Qt::UTC ：显示协调世界（UTC） Qt::OffsetFromUTC ：显示相对于UTC的偏移量(时差) |
核心信号：
| 信号 | 说明 |
| dateChanged(QDate) | ⽇期改变时触发 |
| timeChanged(QTime) | 时间改变时触发 |
| dateTimeChanged(QDateTime) | 时间⽇期任意⼀个改变时触发 |
示例：日期计算器
1.在界面添加控件：
2.添加槽函数
void Widget::on_pushButton_clicked()
{
// 1.先获取到这两个输入框之间的时间
QDateTime timeOld = ui->dateTimeEdit->dateTime();
QDateTime timeNew = ui->dateTimeEdit_2->dateTime();
// 2.计算日期的差值
//int days = timeOld.daysTo(timeNew);
int seconds = timeOld.secsTo(timeNew);
// 3.把秒换成小时
int days = (seconds / 3600) / 24;
int hours = (seconds / 3600) % 24;
// 4.把计算结果 放到label中
ui->label->setText(QString("爱你已经持续了") + QString::number(days)
+ QString("天零") + QString::number(hours) + QString("小时"));
}效果如图：
2.6 Dial
使用QDial 表示⼀个旋钮。
| 属性 | 说明 |
| value | 持有的数值 |
| minimum | 最⼩值 |
| maximum | 最⼤值 |
| singleStep | 按下⽅向键的时候改变的步⻓ |
| pageStep | 按下pageUp/pageDown的时候改变的步⻓ |
| sliderPosition | 界⾯上旋钮显示的初始位置 |
| tracking | 外观是否会跟踪数值变化.，默认值为true，⼀般不需要修改. |
| wrapping | 是否允许循环调整，即数值如果超过最⼤值,是否允许回到最⼩值。(调整过程能否"套圈") |
| notchesVisible | 是否显示刻度线 |
| notchTarget | 刻度线之间的相对位置，数字越⼤,刻度线越稀疏。 |
核心信号：
| 信号 | 说明 |
| valueChanged(int) | 数值改变时触发 |
| rangeChanged(int, int) | 范围变化时触发 |
示例：调整窗口透明度
1.在界面创建一个dial和一个label
2.转到槽函数
void Widget::on_dial_valueChanged(int value)
{
ui->label->setText(QString::number(value));
this->setWindowOpacity((double)value / 100);
}效果如图：
2.7 Slider
使用QSlider 表示⼀个滑动条.
| 属性 | 说明 |
| value | 持有的数值 |
| minimum | 最⼩值 |
| maximum | 最⼤值 |
| singleStep | 按下⽅向键的时候改变的步⻓ |
| pageStep | 按下pageUp/pageDown的时候改变的步⻓ |
| sliderPosition | 滑动条显示的初始位置 |
| tracking | 外观是否会跟踪数值变化.，默认值为true，⼀般不需要修改 |
| orientation | 滑动条的⽅向是⽔平还是垂直 |
| invertedAppearance | 是否要翻转滑动条的⽅向 |
| tickPosition | 刻度的位置 |
| tickInterval | 刻度的密集程度 |
核心信号：
| 信号 | 说明 |
| valueChanged(int) | 数值改变时触发 |
| rangeChanged(int,int) | 范围变化时触发 |
示例1：调整窗口大小
1.在界面设置控件：
2.设置构造函数代码：
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
//设置滑动条初始值
//水平方向
ui->horizontalSlider->setMinimum(100);
ui->horizontalSlider->setMaximum(2000);
ui->horizontalSlider->setValue(800);
ui->horizontalSlider->setSingleStep(50);
//垂直方向
ui->verticalSlider->setMinimum(100);
ui->verticalSlider->setMaximum(1500);
ui->verticalSlider->setValue(600);
ui->verticalSlider->setSingleStep(50);
}3.转到槽函数
void Widget::on_horizontalSlider_valueChanged(int value)
{
const QRect& rect = this->geometry();
ui->label->setText(QString::number(value));
this->setGeometry(rect.x(),rect.y(),value,rect.height());
}
void Widget::on_verticalSlider_valueChanged(int value)
{
const QRect& rect = this->geometry();
ui->label_2->setText(QString::number(value));
this->setGeometry(rect.x(),rect.y(),rect.width(),value);
}效果如图：
示例2： 使用快捷键调整窗口大小
1.界面创建控件
2.编写初始化代码：
ui->label->setText("");
ui->horizontalSlider->setMinimum(1000);
ui->horizontalSlider->setMaximum(2000);3.创建 valueChanged 的slot函数
void Widget::on_horizontalSlider_valueChanged(int value)
{
ui->label->setText(QString::number(value));
}4.修改widget.cpp构造函数,增加快捷键
//使用快捷键，需用到QShortCut类
//需要两个快捷键， - 减少， = 增加（=和+是一个按键）
QShortcut* shortCut1 = new QShortcut(this);
shortCut1->setKey(QKeySequence("-"));
QShortcut* shortCut2 = new QShortcut(this);
shortCut2->setKey(QKeySequence("="));
//使用信号槽，感知到快捷键被按下
connect(shortCut1,&QShortcut::activated,this,&Widget::sub);
connect(shortCut2,&QShortcut::activated,this,&Widget::add);
5.编写自定义槽函数
void Widget::add()
{
//获取当前值
int value = ui->horizontalSlider->value();
if(value >= ui->horizontalSlider->maximum())
{
return;
}
ui->horizontalSlider->setValue(value + 5);
}
void Widget::sub()
{
//获取当前值
int value = ui->horizontalSlider->value();
if(value <= ui->horizontalSlider->minimum())
{
return;
}
ui->horizontalSlider->setValue(value - 5);
}
效果如图：
（未完待续）
原文地址：https://blog.csdn.net/weixin_73629886/article/details/144032999
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！