[Qt的学习日常]--常用控件3

前言

作者：小蜗牛向前冲

名言：我可以接受失败，但我不能接受放弃

如果觉的博主的文章还不错的话，还请点赞，收藏，关注👀支持博主。如果发现有问题的地方欢迎❀大家在评论区指正

一、显示类控件

1、Label

[2、LCD Number](#2、LCD Number)

3、ProgressBar

[4、Calendar Widget](#4、Calendar Widget)

本期：主要学习输入和输出控件

一、显示类控件

1、Label

Qt中，QLabel 是一个用于显示文本或图像的控件 。它常用于创建静态文本标签、图片显示或在UI中展示非交互内容。

核⼼属性如下

|-------------------|----------------------------------------------------------------------------------------------------------------------|
| 属性 | 说明 |
| 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就会被选中. |

显示图片：

在ui设计中，使用一个label控件

在widget.cpp中编写

cpp 复制代码

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

    //设置label和窗口一样大
    ui->label->setGeometry(0,0,800,600);

    QPixmap pixmap(":/qt.png");
    ui->label->setPixmap(pixmap);

    //设置内容伸缩
    ui->label->setScaledContents(true);//但是我们拖动窗口，图片的大小不会和窗口大小进行变动

}

void Widget::resizeEvent(QResizeEvent *event)
{
    // 可以直接通过 this->width() 和 this->height() 设置 label 新的尺⼨, 也可以通event 参数拿到新的尺⼨.
     ui->label->setGeometry(0, 0, this->width(), this->height());
//    ui->label->setGeometry((0,0,event->size().width(),event->size().height()));
   qDebug() << event->size();
}

此处的 resizeEvent 函数我们没有⼿动调⽤,但是能在窗⼝⼤⼩变化时被⾃动调⽤.
这个过程就是依赖C++中的多态来实现的.Qt框架内部管理着QWidget对象表⽰咱们的窗
⼝.在窗⼝⼤⼩发⽣改变时,Qt就会⾃动调⽤ resizeEvent 函数.
但是由于实际上这个表⽰窗⼝的并⾮是QWidget,⽽是QWidget的⼦类,也就是咱们⾃⼰写
的Widget.此时虽然是通过⽗类调⽤函数,但是实际上执⾏的是⼦类的函数(也就是我们重写
后的 resizeEvent ).
此处属于是多态机制的⼀种经典⽤法.通过上述过程,就可以把⾃定义的代码,插⼊到框架内
部执⾏.相当于"注册回调函数".

这里会显示一个全部的图片，而且当我们拖动窗口，图片尺寸也会变化设置文本

在ui中设置了二个label标签，并且有&

此处把label中的⽂本设置为"快捷键&A"这样的形式.其中&后⾯跟着的字符,就是快捷键.可以通过alt+A的⽅式来触发该快捷键.

cpp 复制代码

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //设置label的伙伴widget buddy
    ui->label->setBuddy(ui->radioButton);
    ui->label_2->setBuddy(ui->radioButton_2);
}

2、LCD Number

在Qt中，QLCDNumber 是一个用于显示数字的控件 ，通常用于模拟液晶数字显示器。QLCDNumber 可以显示整数或浮点数，并支持多种进制（如十进制、十六进制等）。

核⼼属性

|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 属性 | 说明 |
| 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.
objectName 为 lcdNumbe

2)修改widget.h代码,创建⼀个 QTimer 成员,和⼀个 updateTime 函数

cpp 复制代码

    QTimer* timer;

    void updateTime();

修改widget.cpp,在构造函数中初始化 QTimer

• QTimer 表⽰定时器.通过 start ⽅法启动定时器之后,就会每隔⼀定周期,触发⼀次
QTimer::timeout 信号.
• 使⽤ connect 把 QTimer::timeout 信号和 Widget::updateTime 连接起来,意味着每
次触发 QTimer::timeout 都会执⾏ Widget::updateTime

3)修改widget.cpp,在构造函数中初始化 QTimer

• QTimer 表⽰定时器.通过 start ⽅法启动定时器之后,就会每隔⼀定周期,触发⼀次
QTimer::timeout 信号.
• 使⽤ connect 把 QTimer::timeout 信号和 Widget::updateTime 连接起来,意味着每
次触发 QTimer::timeout 都会执⾏ Widget::updateTime

cpp 复制代码

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

    //创建timer实例
    timer = new QTimer(this);
    //连接信号和槽，每隔一段时间触发timeout信号，把timeout信号和槽函数updateTime连接起来
    connect(timer,&QTimer::timeout,this,&Widget::updateTime);
    //启动QTimer,每隔1000ms
    timer->start(1000);
    //qt为了保证线程安全，所有对界面的操作必须在主线程中完成

}

4)修改widget.cpp,实现 updateTime

• 通过 intValue 获取到 QLCDNumber 内部的数值.
• 如果value的值归0了,就停⽌ QTimer .接下来 QTimer 也就不会触发timeout信号了.

cpp 复制代码

void Widget::updateTime()
{
    qDebug()<<"updateTime";
    int value = ui->lcdNumber->intValue();
    if(value<=0)
    {
        //时间到停止计时
        timer->stop();
        return ;
    }
    ui->lcdNumber->display(value-1);
}

运行程序，时间就开始不断更新

对于上面的代码，大家可以会有二个想法：

我可以不可以直接在Widget构造函数中,通过⼀个循环+sleep的⽅式是否可以呢?

这里显然是不可以的，因为循环会导致Widget的构造函数⽆法执⾏完毕,此时界⾯是不能正确构造和显⽰的.

那可不可以在Widget构造函数中,另起⼀个线程,在新线程中完成循环+sleep是否可以呢?

这里也是不可以的 Qt中规定,任何对于GUI上内容的操作,必须在主线程中完成.像Widget构造
函数,以及connect连接的slot函数,都是在主线程中调⽤的.⽽我们⾃⼰创建的线程则不是.
当我们⾃⼰的线程中尝试对界⾯元素进⾏修改时,Qt程序往往会直接崩溃.

这样的约定主要是因为GUI中的状态往往是牵⼀发动全⾝的,修改⼀个地⽅,就需要同步的对
其他内容进⾏调整.
⽐如调整了某个元素的尺⼨,就可能影响到内部的⽂字位置,或者其他元素的位置.这⾥⼀连串
的修改,都是需要按照⼀定的顺序来完成的.
**由于多线程执行的顺序⽆法保障,**因此Qt从根本上禁⽌了其他线程修改GUI状态,避免后续的
⼀系列问题.

3、ProgressBar

在Qt中，QProgressBar 是一个用于显示任务进度的控件 。你可以使用 QProgressBar 来向用户展示任务的完成进度，例如文件下载、数据处理等。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 ：表⽰总时间（以毫秒为单位 |

案例：

在ui界面中创建一个显示进度条控件

修改widget.h,创建 QTimer 和 updateProgressBar 函数

cpp 复制代码

    QTime* timer;
    void updateProgressBar();

修改widget.cpp,初始化 QTimer
• 此处设置100ms触发⼀次timeout信号.也就是⼀秒钟触发10次

cpp 复制代码

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

    timer = new QTimer(this);
    connect(timer,&QTimer::timeout,this,&Widget::updateProgressBar);
    timer->start(100);
}

修改widget.cpp,实现 updateProgressBar

cpp 复制代码

void Widget::updateProgressBar()
{
    int value = ui->progressBar->value();
    if (value >= 100) {
        timer->stop();
        return;
    }
    ui->progressBar->setValue(value + 1);
}

在Qt框架中，QCalendarWidget是一个用于显示和选择日期的日历控件。它提供了一个直观的界面，允许用户通过点击日历来选择日期。

核⼼属性

|------------------------|-----------------------|
| 属性 | 说明 |
| selectDate | 当前选中的⽇期 |
| minimumDate | 最⼩⽇期 |
| maximumDate | 最⼤⽇期 |
| firstDayOfWeek | 每周的第⼀天(也就是⽇历的第⼀列)是周⼏. |
| gridVisible | 是否显⽰表格的边框 |
| selectionMode | 是否允许选择⽇期 |
| navigationBarVisible | ⽇历上⽅标题是否显⽰ |
| horizontalHeaderFormat | ⽇历上⽅标题显⽰的⽇期格式 |
| verticalHeaderFormat | ⽇历第⼀列显⽰的内容格式 |
| dateEditEnabled | 是否允许⽇期被编辑 |

重要信号

|---------------------------------|---------------------------------------------|
| 信号 | 说明 |
| selectionChanged(const QDate&) | 当选中的⽇期发⽣改变时发出 |
| activated(constQDate&) | 当双击⼀个有效的⽇期或者按下回⻋键时发出，形参是⼀个QDate类型，保存了选中的⽇期 |
| currentPageChanged(int, int) | 当年份⽉份改变时发出，形参表⽰改变后的新年份和⽉份 |

在界⾯上创建⼀个 QCalendarWidget 和⼀个label ： objectName 为 calendarWidget , label

给 QCalendarWidget 添加slot函数

cpp 复制代码

void Widget::on_calendarWidget_selectionChanged()
{
    QDate date = ui->calendarWidget->selectedDate();
    qDebug() << date;
    ui->label->setText(date.toString());
}

二、输出类控件

1、QLineEdit

在Qt框架中，QLineEdit是一个用于接收单行文本输入的小部件（widget） 。它提供了一个简单的文本框，用户可以在其中输入和编辑文本。QLineEdit是一个非常常用的控件，常用于表单、对话框和各种用户输入场景。

核⼼属性

|-----------|----------|
| 属性 | 说明 |
| text | 输⼊框中的⽂本 |
| inputMask | 输⼊内容格式约束 |
| maxLength | 最⼤⻓度 |

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

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

在界面创建二个输入框和一个lable

编写代码,设置两个输⼊框的echoMode 为 Password

cpp 复制代码

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函数

cpp 复制代码

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("两次输⼊的密码不同!");
	}
}

当我们输入相同密码的时候，就会提示密码相同

2、TextEdit

在Qt框架中**，QTextEdit是一个多行的文本编辑控件，用于显示和编辑富文本或纯文本。** 与QLineEdit不同，QTextEdit可以处理多行文本，并且支持各种文本格式和样式。

核心属性

|-----------------|---------------------------------------------------|
| 属性 | 说明 |
| markdown | 输⼊框内持有的内容.⽀持markdown格式.能够⾃动的对markdown⽂本进⾏渲染成html |
| html | 输⼊框内持有的内容.可以⽀持⼤部分html标签.包括img和table等. |
| placeHolderText | 输⼊框为空时提⽰的内容. |
| readOnly | 是否是只读的 |
| undoRedoEnable | 是否开启undo/redo功能. 按下ctrl+z触发undo 按下ctrl+y触发redo |
| autoFormating | 开启⾃动格式化. |
| tabstopWidth | 按下缩进占多少空间 |
| overwriteMode | 是否开启覆盖写模式 |
| acceptRichText | 是否接收富⽂本内容 |

核⼼信号

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

代码⽰例:获取多⾏输⼊框的内容

创建ui控件

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

cpp 复制代码

void Widget::on_textEdit_textChanged()
{
    const QString& content = ui->textEdit->toPlainText();
    qDebug()<<content;
    ui->label->setText(content);
}

运行输入，将输入框中的内容同步到Lable中,

3、ComboBox

在Qt框架中，QComboBox****是一个用于显示下拉列表的控件 。它允许用户从预定义的选项列表中进行选择。QComboBox可以显示静态列表，也可以动态添加和删除项目。

核心属性

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

核⼼⽅法

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

核⼼信号

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

代码⽰例:⽤下拉框模拟⻨当劳点餐

在ui界面中创建三个下拉框comboBox

在widget.cpp中初始化下拉框中条目的内容，并且添加对应的slot函数

cpp 复制代码

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

    //给下拉框添加条目
    ui->comboBox->addItem("汉堡1");
    ui->comboBox->addItem("汉堡包2");

    ui->comboBox_2->addItem("小吃1");
    ui->comboBox_2->addItem("小吃2");

    ui->comboBox_3->addItem("饮料1");
    ui->comboBox_3->addItem("饮料2");
}

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


void Widget::on_pushButton_clicked()
{
    qDebug()<<"汉堡选择"<<ui->comboBox->currentText();
    qDebug()<<"小吃选择"<<ui->comboBox_2->currentText();
    qDebug()<<"饮料选择"<<ui->comboBox_3->currentText();
}

4、其他核心输出控件

其他有一些非常核心的控件：SpinBox，DateEdit&TimeEdit，Dial,Slider。这些控件的都无非要学习其核心属性和核心方法，这里就不为大家一一解析了，大家可以不清楚的直接可以去查官方的文档

在Qt框架中，QSpinBox是一个用于接收整数输入的控件。 它提供了一个数字输入框和上下箭头，用户可以通过点击箭头或直接输入来改变数字值。QSpinBox还允许设置最小值、最大值和步长

对于这种微调框，在点餐系统中就是，数量的选择。

在Qt框架中，QDateEdit****和 QTimeEdit是两个控件，分别用于处理日期和时间的输入 。它们提供了一个类似于QLineEdit的输入框，并附带上下箭头，用户可以通过点击箭头或直接输入来改变日期和时间的值。

这二个控件的核心点就是能够处理日期和时间，我们就可以依靠这二个控件完成一个简单的日期计算器

在Qt框架中，QDial是一个圆形的控件，类似于旋钮，用于接收用户的输入值 。QDial的工作方式类似于QSlider，但它具有圆形界面，使其更适合某些类型的应用程序，例如音量控制、亮度调整等。

Dial就是如下图的一个圆形控件，这里我们用dial来控制窗口的透明度.

在Qt框架中，QSlider是一个用于接收用户输入的控件，它提供了一个滑动条 ，用户可以通过拖动滑块来选择一个数值。QSlider可以设置为水平或垂直方向，常用于音量控制、进度条等场景。

这个其实和Dial控件的用途非常类似，无非就是状态上的区别

这里我们让slider控制窗口的大小

核心控件的细节非常多，大家光靠看文档还是很难掌握，大家还是要多多使用。