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();`
`}`
`
相关推荐
苕皮蓝牙土豆3 小时前
Qt 分裂布局：QSplitter 使用指南
开发语言·qt
仰望星空的凡人4 小时前
【JS逆向基础】数据库之MongoDB
javascript·数据库·python·mongodb
duration～6 小时前
PostgreSQL并发控制
数据库·postgresql
给力学长6 小时前
自习室预约小程序的设计与实现
java·数据库·vue.js·elementui·小程序·uni-app·node.js
迷茫运维路7 小时前
MySQL5.7主从延迟高排查优化思路
数据库·主从延时高
菜鸟学Python8 小时前
Python web框架王者 Django 5.0发布：20周年了！
前端·数据库·python·django·sqlite
小云数据库服务专线8 小时前
GaussDB 查看会话连接数
数据库·gaussdb
墨迹的陌离9 小时前
【Linux】重生之从零开始学习运维之Mysql
linux·运维·服务器·数据库·学习·mysql
BigBigHang10 小时前
【docker】DM8达梦数据库的docker-compose以及一些启动踩坑
数据库·docker·容器
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02全球最强模型Grok4，国内已可免费使用！（附教程）03Coze 开源了，送上保姆级私有化部署方案【建议收藏】04扣子开源本地部署教程 丨Coze智能体小白喂饭级指南05KGG转MP3工具|非KGM文件|解密音频06腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）07【手把手攻略】国家育儿补贴正式开领！一键算清你能拿多少钱？附补贴领取计算器0801-开源版COZE-字节 Coze Studio 重磅开源！保姆级本地安装教程，手把手带你体验09干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！10coze 开源版本地部署及踩过的坑【喂饭级教程】