QT(四)基本组件

m0_720245012025-07-29 18:46

1. Designer设计师 （掌握）

Qt 包含了一个Designer程序，用于通过可视化界面设计开发界面，保存的格式为.ui（界面文件）。界面文件内部使用xml语法的标签式语言。

在Qt Creator中创建项目时，选中界面文件选项，可以让自带的窗口类使用界面文件。

所有Designer中操作都可以通过C++代码实现。

2. 布局Layout （掌握）

可以把布局看做成一个透明的盒子，内部可以放置子组件，这些内部的子组件会按照布局预设的规则进行排序。

垂直布局：内部组件竖着排成一列。

水平布局：内部组件横着排成一排。

格栅布局：内部组件排布成n*m的表格。

表单布局：用户搭建用户输入的布局效果

选中布局后，点击可以打破布局。

布局可以贴合窗口，只需要选中窗口对象后，再次点击按钮之一即可。

可以使用伸展组件填充空白。

布局也是可以嵌套的，对于外层布局而言，内层布局相当于外层布局的一个子组件。

3. QWidget类 （掌握）

QWidget的属性在Designer中显示为淡黄色。常用属性如下：

策略：除非必要情况，或者实现特殊功能，否则我们的策略尽量不要修改，因为当前的策略对组件是最友好的。

4. 界面文件与C++代码的关系 （熟悉）

5. QLabel标签

5.1 基本属性

QLabel可以用来显式文字或者图片，但是需要注意的是，QLabel不能与用户交互（不能点击），只能展示使用，因此没有合适的信号函数。

我们也可以直接对组件对象进行命名， 系统默认的命名方式是"标签名称_序号"的方式，可以直接双击命名，命名完成后，需要回车。

5.2 添加资源库

把图片导入到项目中，成为项目资源，直接使用Qt的虚拟路径导入图片，可以在任何的环境中进行使用这些资源图片了。

Qt中支持以下几种常见的图片格式：

jpg（不包含透明度）、png（包含透明度）、gif（动图）等等

注意导入的图片一定不能特别大（分辨率过高或者体积过大）。因为图片的操作非常消耗程序的资源。

下面是导入图片成为项目资源的操作步骤：

  1. 把命名好的（不包含任何的中文）图片文件放置到项目的工作目录中。
  1. 在Qt Creator中选中项目名称，鼠标右键，点击添加"新文件"
  2. 在弹出的窗口中，按照下图所示进行操作

3.在弹出的窗口中给资源文件命名 ，例如res

4.在项目管理界面直接点击完成，可以看到在项目中多了一个qrc格式的资源文件。

5.选中qrc文件，点击，可以给资源文件新建一个虚拟路径。

6.选中qrc文件，点击，可以导入图片到项目中成为资源。

7.导入成功后，可以在qrc文件中看到导入成功的图片：

5.3 使用资源库

点击小锤子重新构建目录。然后就可以在Designer中找到图片并且使用了。

5.4 使用代码添加图片

  1. 我们也可以通过代码添加图片，以及修改图片尺寸。

将缩放模式取消掉，然后取消图片。

2、如果通过代码添加，需要用到头文件#include<QPixmap>头文件，图片类头文件。

复制代码 
// 图片类构造函数`
`// 参数1：图片资源路径（qrc文件选中图片资源鼠标右键复制）`
`// 参数2：样板格式，使用默认值即可`
`// 参数3：图片颜色格式，也是使用默认即可`
`QPixmap::` `QPixmap(const QString & fileName,` `const` `char` `* format =` `0, Qt::ImageConversionFlags flags = Qt::AutoColor)`
`

3.当前已经创建图片类对象，但是还需要进行缩放，指定图片的输出模式。

复制代码 
// 缩放`
`// 参数1：QSize类型对象，表示目标尺寸。需要添加头文件#include<QSize>`
`// 参数2：缩放模式，三种。是一个枚举`
`// 参数3：以速度优先还是质量优先，两种模式，默认以速度优先，也是一个枚举`
`// 返回值：转换后的QPixmap对象`
`QPixmap QPixmap:: scaled(const QSize & size, Qt::AspectRatioMode aspectRatioMode = Qt::IgnoreAspectRatio, Qt::TransformationMode transformMode = Qt::FastTransformation) const`
`

QSize类

复制代码 
// 构造函数`
`// 图片的宽度和高度`
`QSize::` `QSize(int width,` `int height)`
`

dialog.h

复制代码 
#ifndef DIALOG_H`
`#define DIALOG_H`

`#include <QDialog>`
`#include <QPixmap>`
`#include <QSize>`

`namespace Ui {`
`class` `Dialog;`
`}`

`class` `Dialog` `:` `public QDialog`
`{`
`    Q_OBJECT`

`public:`
    `explicit` `Dialog(QWidget *parent =` `0);`
    `~Dialog();`

`private:`
`    Ui::Dialog *ui;`
`};`

`#endif // DIALOG_H`

`

dialog.cpp

复制代码 
#include "dialog.h"`
`#include "ui_dialog.h"`

`Dialog::Dialog(QWidget *parent)` `:`
    `QDialog(parent),`
    `ui(new Ui::Dialog)`
`{`
`    ui->setupUi(this);`
    `// 创建一个图片对象`
    `// 参数：图片的资源路径`
`    QPixmap pic(":/new/prefix1/logo.png");`

    `// 定义QSize对象`
`    QSize size(ui->labelPic->width(),ui->labelPic->height());`

    `// 缩放`
`    pic = pic.scaled(size,Qt::KeepAspectRatio,Qt::SmoothTransformation);`

    `// 使用界面文件中的组件对象`
`    ui->labelPic->setPixmap(pic);`
`}`

`Dialog::~Dialog()`
`{`
    `delete ui;`
`}`
`

第十四行的labelPic是这的对象名字。

5.5 使用代码添加动态图

添加动态图：

  1. 需要将我们的动态图，放到项目的工作目录中，并且进行命名.gif
  2. 添加完成后，需要将动态图，加载到资源文件中

电影类

如果需要播放动态图，需要用到电影类，需要添加头文件#include<QMovie>。

// 电影类构造函数，堆区创建 // 参数1 ：资源路径 // 参数2：输出模式 // 参数3：基类指针，看到基类指针，就知道要创建堆内存对象 QMovie:: QMovie(const QString & fileName, const QByteArray & format = QByteArray(), QObject * parent = 0)

dialog.h

复制代码 
#ifndef DIALOG_H`
`#define DIALOG_H`

`#include <QDialog>`
`#include <QPixmap>`
`#include <QSize>`
`#include <QMovie>`

`namespace Ui {`
`class` `Dialog;`
`}`

`class` `Dialog` `:` `public QDialog`
`{`
`    Q_OBJECT`

`public:`
    `explicit` `Dialog(QWidget *parent =` `0);`
    `~Dialog();`

`private:`
`    Ui::Dialog *ui;`

`    QMovie *movie;`  `// 电影类指针`
`};`

`#endif // DIALOG_H`

`

dialog.cpp

复制代码 
#include "dialog.h"`
`#include "ui_dialog.h"`

`Dialog::Dialog(QWidget *parent)` `:`
    `QDialog(parent),`
    `ui(new Ui::Dialog)`
`{`
`    ui->setupUi(this);`
    `// 创建一个图片对象`
    `// 参数：图片的资源路径`
`    QPixmap pic(":/new/prefix1/logo.png");`

    `// 定义QSize对象`
`    QSize size(ui->labelPic->width(),ui->labelPic->height());`

    `// 缩放`
`    pic = pic.scaled(size,Qt::KeepAspectRatio,Qt::SmoothTransformation);`

    `// 使用界面文件中的组件对象`
`    ui->labelPic->setPixmap(pic);`

    `// 创建电影类对象`
`    movie =` `new` `QMovie(":/new/prefix1/kunkun.gif");`

    `// 给QLabel设置电影`
`    ui->labelGif->setMovie(movie);`

    `// 播放电影`
`    movie->start();`
`}`

`Dialog::~Dialog()`
`{`
    `delete ui;`
    `delete movie;`
`}`
`

6. QAbstractButton按钮类

QAbstractButton是按钮类的抽象基类，因此内部包含类按钮的基础属性和函数。

GroupBox 分组盒子组件

QAbstractButton按钮类的基础属性：

给按钮添加一个图标：

iconfont-阿里巴巴矢量图标库

将下载的图标，放到项目的工作目录中。

添加完成后，发现图标很小，可以将图标的尺寸更改

更改完成后，可以将按钮大小锁死

更改完成后发现有个小框，勾选下面选项，可以取消按钮小框

复制代码 
border: none;` `/* 取消边框 */`
`background-color: transparent;` `/* 设置背景色为透明，使按钮看起来更加平滑 */`
`

按钮类常用的信号：

dialog.h

复制代码 
#ifndef DIALOG_H`
`#define DIALOG_H`

`#include <QDialog>`
`#include <QDebug>`

`namespace Ui {`
`class` `Dialog;`
`}`

`class` `Dialog` `:` `public QDialog`
`{`
`    Q_OBJECT`

`public:`
    `explicit` `Dialog(QWidget *parent =` `0);`
    `~Dialog();`

`private:`
`    Ui::Dialog *ui;`

`private slots:`
    `void` `toggledSlot(bool);`
`};`

`#endif // DIALOG_H`

`

dialog.cpp

复制代码 
#include "dialog.h"`
`#include "ui_dialog.h"`

`Dialog::Dialog(QWidget *parent)` `:`
    `QDialog(parent),`
    `ui(new Ui::Dialog)`
`{`
`    ui->setupUi(this);`
    `connect(ui->radioButton,SIGNAL(toggled(bool)),`
            `this,SLOT(toggledSlot(bool)));`
`}`

`Dialog::~Dialog()`
`{`
    `delete ui;`
`}`

`void` `Dialog::toggledSlot(bool checked)`
`{`
    `if(checked)`
    `{`
        `qDebug()` `<<` `"超意兴被选中了";`
    `}`
    `else`
    `{`
        `qDebug()` `<<` `"不选超意兴了";`
    `}`
`}`

`

按钮组

按钮组

QButtonGroup组件

可以使用QB uttonGroup组件对多个按钮进行分组，这是一个逻辑分组，没有任何的ui效果。其主要的目的是使用一个信号槽同时监控多个按钮对象的状态 。

QButtonGroup继承于QOBject并非QWidget，所以它是不可见的，用户无法从这个窗口中看到此组件。

复制代码 
// 构造函数 堆区创建`
`QButtonGroup:: QButtonGroup(QObject * parent = 0)`
`
复制代码 
// 给按钮组，添加要管理的按钮`
`// 参数1：添加的实际的按钮`
`// 参数2：序号ID`
`void QButtonGroup::` `addButton(QAbstractButton * button,` `int id =` `-1)`
`

参数中表示当前触发的按钮对象本身，表示当前触发的按钮序号。

dialog.h

复制代码 
#ifndef DIALOG_H`
`#define DIALOG_H`

`#include <QDialog>`
`#include <QDebug>`
`#include <QButtonGroup>`

`namespace Ui {`
`class` `Dialog;`
`}`

`class` `Dialog` `:` `public QDialog`
`{`
`    Q_OBJECT`

`public:`
    `explicit` `Dialog(QWidget *parent =` `0);`
    `~Dialog();`

`private:`
`    Ui::Dialog *ui;`
`    QButtonGroup *btp;`

`private slots:`
    `void` `toggledSlot(bool);`
    `void` `buttonToggledSlot(int,bool);`
`};`

`#endif // DIALOG_H`

`

dialog.cpp

复制代码 
#include "dialog.h"`
`#include "ui_dialog.h"`

`Dialog::Dialog(QWidget *parent)` `:`
    `QDialog(parent),`
    `ui(new Ui::Dialog)`
`{`
`    ui->setupUi(this);`
    `connect(ui->radioButton,SIGNAL(toggled(bool)),`
            `this,SLOT(toggledSlot(bool)));`

    `// 创建组件对象`
`    btp =` `new` `QButtonGroup(this);`

`    btp->addButton(ui->checkBox,1);`
`    btp->addButton(ui->checkBox_2,2);`
`    btp->addButton(ui->checkBox_3,3);`
`    btp->addButton(ui->checkBox_4,4);`

    `// 注意，我们的按钮组件，是可以多选的，但是按钮组里的组件，默认是互斥的。`
    `// 所以，要解除按钮组的互斥属性`
`    btp->setExclusive(false);`
    `connect(btp,SIGNAL(buttonToggled(int,bool)),`
            `this,SLOT(buttonToggledSlot(int,bool)));`

`}`

`Dialog::~Dialog()`
`{`
    `delete ui;`
`}`

`void` `Dialog::toggledSlot(bool checked)`
`{`
    `if(checked)`
    `{`
        `qDebug()` `<<` `"超意兴被选中了";`
    `}`
    `else`
    `{`
        `qDebug()` `<<` `"不选超意兴了";`
    `}`
`}`

`void` `Dialog::buttonToggledSlot(int id,` `bool checked)`
`{`
    `if(id ==` `1)`
    `{`
        `if(checked)`
        `{`
           `qDebug()` `<<` `"8+1被选中了";`
        `}`
        `else`
        `{`
            `qDebug()` `<<` `"不选8+1了";`
        `}`
    `}`
    `if(id ==` `2)`
    `{`
        `if(checked)`
        `{`
           `qDebug()` `<<` `"雷花-勇闯天堂被选中了";`
        `}`
        `else`
        `{`
            `qDebug()` `<<` `"不选雷花-勇闯天堂了";`
        `}`
    `}`
    `if(id ==` `3)`
    `{`
        `if(checked)`
        `{`
           `qDebug()` `<<` `"青鸟被选中了";`
        `}`
        `else`
        `{`
            `qDebug()` `<<` `"不选青鸟了";`
        `}`
    `}`
    `if(id ==` `4)`
    `{`
        `if(checked)`
        `{`
           `qDebug()` `<<` `"7天被选中了";`
        `}`
        `else`
        `{`
            `qDebug()` `<<` `"不选7天了";`
        `}`
    `}`
    `else`
    `{`

    `}`
`}`

`

7. QLineEdit单行文本输入框

QLineEdit用于输入一个单行文本，常用的属性

常用的信号：

dialog.h

复制代码 
#ifndef DIALOG_H`
`#define DIALOG_H`

`#include <QDialog>`
`#include <QDebug>`

`namespace Ui {`
`class` `Dialog;`
`}`

`class` `Dialog` `:` `public QDialog`
`{`
`    Q_OBJECT`

`public:`
    `explicit` `Dialog(QWidget *parent =` `0);`
    `~Dialog();`

`private:`
`    Ui::Dialog *ui;`

`private slots:`
    `void` `btnClickedSlot();`
    `void` `selectionChangedSlot();`
`};`

`#endif // DIALOG_H`

`

dialog.cpp

复制代码 
#include "dialog.h"`
`#include "ui_dialog.h"`

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

    `connect(ui->pushButton,SIGNAL(clicked()),`
            `this,SLOT(btnClickedSlot()));`

    `connect(ui->lineEdit,SIGNAL(selectionChanged()),`
            `this,SLOT(selectionChangedSlot()));`
`}`

`Dialog::~Dialog()`
`{`
    `delete ui;`
`}`

`void` `Dialog::btnClickedSlot()`
`{`
`    QString text = ui->lineEdit->text();`
    `qDebug()` `<<` `"第一个lineEdit："` `<< text;`

`    text = ui->lineEdit_2->text();`
    `qDebug()` `<<` `"第二个lineEdit："` `<< text;`
`}`

`void` `Dialog::selectionChangedSlot()`
`{`
    `qDebug()` `<< ui->lineEdit->selectedText();`
`}`
`
相关推荐
wgzrmlrm7418 小时前
如何加固SQL环境部署_删除默认安装的示例数据库
jvm·数据库·python
编码者卢布18 小时前
【Azure Developer】IIS w3wp.exe 的 -m 参数：一个未被记录的管道模式标识
microsoft·flask·azure
雨墨✘19 小时前
golang如何实现设备指纹识别_golang设备指纹识别实现详解
jvm·数据库·python
程序员大辉19 小时前
没想到！一直要开会员的Navicat 终于有免费版了
数据库
数厘19 小时前
2.15 sql基础查询（SELECT、FROM、字段别名、常量与表达式）
数据库·sql·oracle
可观测性用观测云19 小时前
观测云数据转发和存档最佳实践
数据库
披着羊皮不是狼20 小时前
（7）为 RAG 系统接入 Redis Stack 实现向量持久化
数据库·redis·缓存
SelectDB20 小时前
基于 SelectDB 实现 Hive 数据湖统一分析：洋钱罐全球一体化探索分析平台升级实践
大数据·数据库·数据分析
飞yu流星20 小时前
mysql 基础
数据库·mysql·oracle
零陵上将军_xdr20 小时前
MySQL 事务写入流程详解
android·数据库·mysql
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点03一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛04GPT-6核心能力解析及与现有主流大模型对比05基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南06GPT-6发布日深度解析-Symphony架构200万Token实战07零成本！Ollama本地部署国产大模型全指南（支持Kimi-K2.5/GLM-5/Qwen，新手秒上手）08AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析09从限购到畅通：GLM-5.1 Coding Plan接入攻略10CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南