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

小蜗牛~向前冲2024-06-19 4:08

前言

作者：小蜗牛向前冲

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

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

目录

一、显示类控件

1、Label

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

3、ProgressBar

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

二、输出类控件

1、QLineEdit

2、TextEdit

3、ComboBox

4、其他核心输出控件

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

一、显示类控件

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

4、Calendar Widget

在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控制窗口的大小

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

相关推荐
西岸行者4 天前
学习笔记：SKILLS 能帮助更好的vibe coding
笔记·学习
悠哉悠哉愿意4 天前
【单片机学习笔记】串口、超声波、NE555的同时使用
笔记·单片机·学习
别催小唐敲代码4 天前
嵌入式学习路线
学习
毛小茛4 天前
计算机系统概论——校验码
学习
babe小鑫4 天前
大专经济信息管理专业学习数据分析的必要性
学习·数据挖掘·数据分析
winfreedoms4 天前
ROS2知识大白话
笔记·学习·ros2
在这habit之下4 天前
Linux Virtual Server（LVS）学习总结
linux·学习·lvs
我想我不够好。4 天前
2026.2.25监控学习
学习
im_AMBER4 天前
Leetcode 127 删除有序数组中的重复项 | 删除有序数组中的重复项 II
数据结构·学习·算法·leetcode
CodeJourney_J4 天前
从“Hello World“ 开始 C++
c语言·c++·学习
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03OpenClaw + 飞书（Feishu）环境搭建指南04【OpenClaw 本地实战 Ep.3】突破瓶颈：强制修改 openclaw.json 解锁 32k 上下文记忆05Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services06OpenClaw优化飞书API 额度已耗尽问题07Clawdbot部署教程：解决‘gateway token missing’授权问题的完整步骤08OpenClaw大龙虾机器人完整安装教程09Window 10部署openclaw报错node.exe : npm error code 12810OpenClaw 接入阿里云百炼 Coding Plan 指南