🍑个人主页：Jupiter.
🚀 所属专栏：QT
欢迎大家点赞收藏评论😊

在这里插入图片描述

在这里插入图片描述

目录

🎁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) 在界⾯上创建三个输⼊框和两个单选按钮, ⼀个普通按钮.
三个输⼊框的 objectName 为 lineEdit_name , lineEdit_password ,lineEdit_phone
两个单选按钮的 objectName 为 radioButton_male , radioButton_female
按钮的 objectName 为 pushButton

在这里插入图片描述
2) 编写 widget.cpp, 在构造函数中编写初始化代码

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

    ui->lineEdit->setPlaceholderText("请输入姓名");
    ui->lineEdit->setClearButtonEnabled(true);


    ui->lineEdit_2->setPlaceholderText("请输入密码");
    ui->lineEdit->setClearButtonEnabled(true);
    ui->lineEdit_2->setEchoMode(QLineEdit::EchoMode::Password);

    ui->lineEdit_3->setPlaceholderText("请输入电话");
    ui->lineEdit->setClearButtonEnabled(true);

    ui->pushButton->setStyleSheet("background-color:#0AA");


}

3) 继续修改 widget.cpp, 给按钮添加 slot 函数

void Widget::on_pushButton_clicked()
{
    QString str;
    str+="姓名:"+ui->lineEdit->text()+"  ";
    str+="密码:"+ui->lineEdit_2->text()+"  ";
    if(ui->radioButton->isChecked())
        str+="性别:"+ui->radioButton->text()+" ";
    else
        str+="性别:"+ui->radioButton->text()+" ";

    str+="电话:"+ui->lineEdit_3->text()+"  ";

    qDebug()<<str;
}

4) 执⾏程序, 可以看到, 随着⽤⼾输⼊内容之后, 点击按钮, 就能打印到输⼊的信息

在这里插入图片描述

在这里插入图片描述

  • inputMask 只能进⾏简单的输⼊格式校验.实际开发中, 基于正则表达式的⽅式是更核⼼的⽅法.

代码⽰例: 使⽤正则表达式验证输⼊框的数据

此处要求在输⼊框中输⼊⼀个合法的电话号码 (1 开头, 11 位, 全都是数字). 如果验证不通过, 则确定按钮⽆法点击.

🥦关于正则表达式

1) 在界⾯上创建输⼊框和⼀个按钮.
在这里插入图片描述

2) 编写 widget.cpp, 把按钮初始 enabled 设为 false. 给输⼊框添加验证器.

  • 使⽤ QRegExp 创建⼀个正则表达式对象. “^1\d{10}$” 表⽰ “以 1 开头, 后⾯跟上任意的10个⼗进制数字”.
  • 使⽤ QRegExpValidator 创建⼀个验证器对象. Qt 中内置了四个主要的验证器对象.

在这里插入图片描述
QRegularExpressionValidator 在匹配性能上做出了⼀定优化. 但是从使⽤⻆度讲, 和 QRegExpValidator 差别不⼤. 我们使⽤ QRegExpValidator 即可。

Widget::Widget(QWidget *parent)
	:QWidget(parent)
 	,ui(new Ui::Widget)
{
 	ui->setupUi(this);
 	// 设置按钮默认是禁⽤状态
	 ui->pushButton->setEnabled(false);
 	// 给 lineEdit 注册⼀个 validator
 	ui->lineEdit->setValidator(new QRegExpValidator(QRegExp("^1\\d{10}$")));
}

3) 编写 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 &arg1)
{
 	qDebug() << arg1;
 	QString content = arg1;
 	int pos = 0;
 	if (ui->lineEdit->validator()->validate(content, pos) == QValidator::Acceptable) {
 		// 验证通过, 设置按钮的可⽤状态为启⽤.
 		ui->pushButton->setEnabled(true);
 	} else {
 		// 验证不通过, 设置按钮的可⽤状态为禁⽤.
 		ui->pushButton->setEnabled(false);
 	}
}

4) 执⾏程序, 观察效果. 可以看到此时尝试输⼊字⺟是⽆法输⼊的. 并且只有当输⼊的内容符合要求, 确定按钮才能被使⽤.
在这里插入图片描述

代码⽰例: 验证两次输⼊的密码⼀致

1) 在界⾯上创建两个输⼊框和⼀个 label

在这里插入图片描述

2) 编写代码, 设置两个输⼊框的 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);
}

3) 给两个输⼊框设置 textEdited slot 函数

void Widget::on_lineEdit_textEdited(const QString &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)
{
    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("两次输⼊的密码不同!");
    }
}

4) 执⾏程序, 观察效果.

可以看到当两个输⼊框内的密码相同时, 就会提⽰密码相同
在这里插入图片描述

⚽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) ⽂本被选中/取消选中时触发

代码⽰例: 获取多⾏输⼊框的内容,将内容那个显示到 label中

1) 创建⼀个多⾏输⼊框和⼀个label

在这里插入图片描述

2) 给多⾏输⼊框添加 slot 函数. 处理 textChanged 信号.

  • 通过 toPlainText ⽅法获取到内部的⽂本.
  • 类似的,QTextEdit 还提供了 toMarkdown 和 toHtml. 根据需要我们调整不同的获取⽅式
void Widget::on_textEdit_textChanged()
{
    QString content = ui->textEdit->toPlainText();

    ui->label->setText(content);
}

3) 执⾏程序, 可以看到当输⼊框中的内容发⽣变化时, label 中的内容同步发⽣改变
在这里插入图片描述

代码⽰例: 验证输⼊框的各种信号

信号名称 参数 描述
textChanged() 无 当文本内容发生变化时发射。
cursorPositionChanged() 无 当光标位置改变时发射。
selectionChanged() 无 当文本选择改变时发射。
redoAvailable(bool) bool available 当有可用的重做操作时发射，参数指示是否有可重做的操作。
undoAvailable(bool) bool available 当有可用的撤销操作时发射，参数指示是否有可撤销的操作。
copyAvailable(bool) bool yes 当复制操作可用时发射，参数指示是否可以复制（通常基于是否有选中内容）。
currentCharFormatChanged(const QTextCharFormat &) const QTextCharFormat &format 当当前字符格式改变时发射，参数为新的字符格式。

说明

1) 创建多⾏输⼊框

在这里插入图片描述

2) 给输⼊框添加以下⼏个 slot 函数

  • QTextEdit 中包含了⼀个 QTextCursor 对象, 通过这个对象可以获取到当前光标位置和选中的内容.

void Widget::on_textEdit_textChanged()
{
    qDebug() << "[textChanged] " << ui->textEdit->toPlainText();
}
void Widget::on_textEdit_selectionChanged()
{
    const QTextCursor& cursor = ui->textEdit->textCursor();
    qDebug() << "[selectionChanged] " << cursor.selectedText();
}
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;
}

3) 执⾏程序, 观察结果.

可以看到:

  1. 编写内容时, textChanged 和 cursorPositionChanged 会触发
  2. 选中⼀段⽂本时, cursorPositionChanged , selectionChanged , copyAvailable会触发.
  3. 按下 ctrl + z 时, textChanged , undoAvailable , redoAvailable ,cursorPositionChanged 会触发
  4. 按下 ctrl + y, textChanged , undoAvailable , redoAvailable ,cursorPositionChanged 会触发

🍁Combo Box

QComboBox 表⽰下拉框.

核⼼属性

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

核⼼⽅法

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

核⼼信号

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

代码⽰例: 使⽤下拉框模拟点餐

1) 在界⾯上创建三个下拉框, 和⼀个按钮.

在这里插入图片描述

2) 编写 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("柠檬水");
}

3) 编写 widget.cpp, 给按钮添加 slot 函数

void Widget::on_pushButton_clicked()
{
    QString str;
    str+=ui->label_4->text();
    str+=ui->comboBox->currentText()+" "+ui->comboBox_2->currentText()+" "+ui->comboBox_3->currentText();

    ui->label_4->setText(str);
}

4) 执⾏程序, 可以看到, 在点击确定按钮时, 就能获取到当前下拉框中选中的内容.
在这里插入图片描述

代码⽰例: 从⽂件中加载下拉框的选项

很多时候下拉框的选项并⾮是固定的, ⽽是通过读取⽂件/读取⽹络获取到的

1) 在界⾯上创建⼀个下拉框和标签

在这里插入图片描述

2) 创建⽂件 , 编写选项. 每个选项占⼀⾏.
在这里插入图片描述

3) 修改 widget.cpp, 从⽂件中读取选项.

  • 使⽤ ifstream 打开⽂件
  • 使⽤ getline 读取每⼀⾏
  • 使⽤ QString::fromStdString 把 std::string 转成 QString
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ifstream ifs("D:\\Data\\QT_code\\Widget_Combo_box_2/conf.txt");
    if(!ifs.is_open())
        return;

   string line;
   
   //获取下拉框标题
   getline(ifs,line);
   //设置
   ui->label->setText(QString::fromStdString(line));

   //读取每一行，并添加到combobox中
   while(getline(ifs,line))
   {
       ui->comboBox->addItem(QString::fromStdString(line));
   }

}

4) 执⾏程序, 可以看到⽂件内容已经被加载到下拉框中.
在这里插入图片描述

  • Qt 中也提供了 QFile 实现读写⽂件的功能. 当然使⽤ C++ 标准库的 std::fstream 也是完全可以的.之所以存在两套, 是因为 Qt 诞⽣较早 (1991 年左右), 此时 C++ 还没有完成 “标准化” 的⼯作,
  • C++ 标准库这样的概念⾃然也没有诞⽣.因此 Qt 就⾃⼰打造了⼀套库, 实现了字符串, 容器, ⽂件操作, 多线程, ⽹络操作, 定时器, 正则表达式等内容.(由于 C++ 标准委员会的不作为, ⾄今仍然有些 Qt 提供的功能, 是标准库不具备的)

🎉Spin Box

  • 使⽤ 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 输⼊有误时如何修正.
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) 在界⾯上创建下列内容

  • 三个下拉框: objectName 为 comboBox 到 comboBox_3
  • 三个微调框: objectName 为 spinBox 到 spinBox_3
  • ⼀个按钮: objectName 为 pushButton

2) 编写代码, 修改 widget.cpp, 给下拉框设置初始值，这里直接在ui文件中修改。
在这里插入图片描述

在这里插入图片描述

3) 编写代码, 给按钮添加 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();

}

4) 执⾏程序, 可以看到当⽤⼾选择不同的内容时, 点击按钮就能获取到对应的结果. 同时我们也⽆法输⼊⼀些超出范围的⾮法值.
在这里插入图片描述

🥛Date Edit & Time Edit

  • 使⽤ QDateEdit 作为⽇期的微调框.
    在这里插入图片描述

  • 使⽤ QTimeEdit 作为时间的微调框.
    在这里插入图片描述

  • 使⽤ QDateTimeEdit 作为时间⽇期的微调框.
    在这里插入图片描述

这⼏个控件⽤法⾮常相似, 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的偏移量(时差).

关于 本地时间(LocalTime) 和 协调世界时(UTC)

  • UTC 时间是⼀个基于原⼦钟的标准时间. 不受地球的⾃转周期影响. 和格林威治时间 (GMT) 是⾮常接近的. 科学家会通过精密的设备来测量并维护.咱们的计算机内部使⽤的时间就是基于 UTC 时间本地时间则是基于不同的时区, 对 UTC 时间做出了⼀些调整. ⽐如咱们使⽤的北京时间, 位于"东⼋区", 就需要在 UTC 时间基础上 +8 个⼩时的时差

核⼼信号

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

代码⽰例: 实现⽇期计算器

  • 1) 在界⾯上创建两个 QDateTimeEdit 和⼀个按钮, ⼀个 label QDateTimeEdit 的 objectName 为 dateTimeEdit_old 和 dateTimeEdit_new
    在这里插入图片描述

  • 2) 编写计算按钮的 slot 函数

  • 使⽤ daysTo 函数可以计算两个⽇期的天数.

  • 使⽤ secsTo 函数可以计算两个时间的秒数.

  • 通过 (秒数 / 3600) 换算成⼩时数, 再余上 24 得到零⼏个⼩时.

  • 使⽤ QString::number 把整数转成 QString 进⾏拼接.

void Widget::on_pushButton_clicked()
{
    QDate newdate = ui->dateTimeEdit_new->date();
    QDate olddate = ui->dateTimeEdit_old->date();

    int day = newdate.daysTo(olddate);

    ui->label->setText("计算结果:相差"+QString::number(day)+"天");
}
  • 3) 执⾏程序, 观察结果
    在这里插入图片描述

🎁Dial

  • 使⽤ QDial 表⽰⼀个 旋钮.有些程序, 通过⿏标拖动旋钮旋转, 即可完成⼀些相关的设置

在这里插入图片描述
核⼼属性

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

核⼼信号

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

代码⽰例: 调整窗⼝透明度

  • 1) 在界⾯上创建⼀个旋钮和⼀个 label
    在这里插入图片描述

  • 2) 编写 widget.cpp, 对旋钮初始化

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


    //设置当前位置的值
    ui->dial->setValue(100);
    //设置最大最小值
    ui->dial->setMaximum(100);
    ui->dial->setMinimum(0);

    //设置可以循环
    ui->dial->setWrapping(true);
    //设置显示刻度线
    ui->dial->setNotchesVisible(true);

}
  • 3) 编写 widget.cpp, 设置旋钮的 valueChanged slot 函数
void Widget::on_dial_valueChanged(int value)
{
    this->setWindowOpacity(value/100.0);
    ui->label->setText("当前的不透明度为:"+QString::number(value));
}
  • 4) 运⾏程序, 观察效果. 可以看到随着拖动旋钮旋转, 不透明度发⽣明显变化

在这里插入图片描述

🏝 Slider

  • 使⽤ QSlider 表⽰⼀个滑动条.

  • QSlider 和 QDial 都是继承⾃ QAbstractSlider , 因此⽤法上基本相同.

核⼼属性

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

核⼼信号

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

代码⽰例: 调整窗⼝⼤⼩
1) 在界⾯上创建两个滑动条, 分别是⽔平和垂直滑动条.

在这里插入图片描述

2) 编写代码初始化滑动条

  ui->horizontalSlider->setMinimum(500);
    ui->horizontalSlider->setMaximum(2000);
    ui->horizontalSlider->setSingleStep(100);
    ui->horizontalSlider->setValue(800);

    ui->verticalSlider->setMinimum(500);
    ui->verticalSlider->setMaximum(1500);
    ui->verticalSlider->setSingleStep(100);
    ui->verticalSlider->setValue(600);

    // 翻转朝向, 默认滑块从下向上增⻓, 改成从上往下增⻓.
    ui->verticalSlider->setInvertedAppearance(true);

3) 编写滑动条的 valueChanged slot 函数

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;
}

4) 执⾏程序, 可以看到调整滑动条, 窗⼝⼤⼩就会随之改变.
在这里插入图片描述

代码⽰例: 通过⾃定义快捷键调整滑动条位置.

  • 设置 - 减⼩ value, 设置 = 增加 value.
  • 默认情况下滑动条可以通过 ⽅向键 或者 pageUp / pageDown 调整⼤⼩.
    1) 在界⾯上创建滑动条和 label
    在这里插入图片描述

2) 编写初始化代码

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->label->setText("");
    ui->horizontalSlider->setMinimum(0);
    ui->horizontalSlider->setMaximum(100);
    ui->horizontalSlider->setSingleStep(10);
    ui->horizontalSlider->setValue(0);
}

3) 创建 valueChanged 的 slot 函数


void Widget::on_horizontalSlider_valueChanged(int value)
{
    ui->label->setText(QString::number(value));
}

4) 修改 widget.cpp 构造函数, 增加快捷键

  • 使⽤ QShortCut 类设置快捷键.
  • 快捷键触发时, 会发出 QShortcut::activated 信号, 我们连接到⾃⼰写的 slot 函数
   // 设置快捷键
    QShortcut* shortCut1 = new QShortcut(this);
    shortCut1->setKey(QKeySequence("-"));
    connect(shortCut1, &QShortcut::activated, this, &Widget::subValue);
    QShortcut* shortCut2 = new QShortcut(this);
    shortCut2->setKey(QKeySequence("="));
    connect(shortCut2, &QShortcut::activated, this, &Widget::addValue);

5) 编写⾃定义 slot 函数

void Widget::subValue()
{
    int value = ui->horizontalSlider->value();
     ui->horizontalSlider->setValue(value - 20);
}

void Widget::addValue()
{
    int value = ui->horizontalSlider->value();
    ui->horizontalSlider->setValue(value + 20);
}

6) 执⾏程序, 观察效果. 可以看到此时按下 - 和 = 就可以调整 value 的值了.

在这里插入图片描述

# qt # 开发语言 # 机器学习 # 正则表达式 # 后端开发 # 图形渲染
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

Flutter&OpenHarmony下拉刷新与加载更多

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter&OpenHarmony商城App图片预览组件开发

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter & OpenHarmony 运动App运动数据同步组件开发

avatar 开源鸿蒙跨平台开发者社区