QT基本组件

左手的月光2024-02-24 1:39

四、基本组件

  1. Designer 设计师（重点）

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

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

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

2、布局Layout（掌握）

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

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

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

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

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

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

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

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

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

3、QWidget类（掌握）

QWidget的属性在Designer中显示为淡黄色，

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

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

5、QLabel标签（掌握）

5.1 基本属性

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

QLabel常用属性如下：

我们可以直接对标签进行命名，系统默认的名字就是"标签名称_序号"。例如：

5.2 添加资源库

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

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

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

注意导入的图片不能过大（分辨率过高或文件体积过大），因为图片的操作非常消耗资源，图片过大会过度浪费资源。

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

  1. 在QtCreator中选中项目名称，鼠标右键，点击"添加新文件"。
  2. 在弹出的窗口中，按照下图进行操作
  1. 在弹出的窗口中给资源文件命名。例如res
  1. 在项目管理界面，直接点击"完成"。可以看到在项目中多了个.qrc格式的资源文件
  1. 把命名好的（不包含中文字符）的图片文件放置到项目的工作目录中。

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

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

  1. 导入完成后，可以在qrc文件中看到导入成功的图片。

5.3 使用资源库

1、点击重新构建项目。然后就可以在Designer找到图片资源并使用了。

2、添加图片后，图片比较大，可能会显示不全，需要把scaledContents缩放模式点上。

3、为了测试方便，我们图片最小宽高设置为400、最大宽高也设置成400、此时我们发现，图片变形。

5.4 使用代码添加图片

1、我们也可以通过代码，加载图片，以及修剪图片尺寸。

  1. 如果我们通过代码，加载操作图片，我们需要使用#include<QPixmap>头文件，图片类头文件。
  2. 创建一个图片类对象。
复制代码 
// 图片类构造函数`
`// 参数1：图片资源路径（qrc文件鼠标右键获取路径）`
`// 参数2：样板格式，使用默认值即可。`
`// 参数3：图片颜色格式，使用默认即可。`
`QPixmap::​QPixmap(const QString & fileName, const char * format = 0, Qt::ImageConversionFlags flags = Qt::AutoColor)`
`
  1. 当前已经创建了图片类的对象，但是还需要缩放，指定图片输出模式。
复制代码 
// 缩放`
`// 参数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::​QSize(int width, int height)`
`

需要注意的是，尽量在项目开发之前使用ps等软件预先处理好图片，减少代码运行时的开销，提高代码的运行效率。减少资源占用。

复制代码 
#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/g.jpg");`

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

`    // 缩放`
`    pic = pic.scaled(size,Qt::KeepAspectRatio,Qt::SmoothTransformation);`
`    // 使用界面文件中的组件对象`
`    ui->label->setPixmap(pic);`
`}`

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

`

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;`
`private:`
`    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/g.jpg");`

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

`    // 缩放`
`    pic = pic.scaled(size,Qt::KeepAspectRatio,Qt::SmoothTransformation);`
`    // 使用界面文件中的组件对象`
`    ui->label->setPixmap(pic);`

`    // 创建电影对象`
`    movie = new QMovie(":/new/prefix1/test.gif");`
`    // 给QLabel设置电影`
`    ui->label_2->setMovie(movie);`
`    // 播放电影`
`    movie->start();`

`}`

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

`

6、QAbstractButton按钮类（掌握）

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

GroupBox分组盒子组件

QAbstractButton按钮类的常用基本属性

给按钮添加一个图标：

图标文件可以通过下面的网站下载：

iconfont-阿里巴巴矢量图标库

按钮类常用的信号如下：

注意：这个通知信号和别的信号存在区别，只有在状态发生变化时发射。

携带的参数为当前状态。

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_8,SIGNAL(toggled(bool)),`
`            this,SLOT(toggledSlot(bool)));`
`}`

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

`void Dialog::toggledSlot(bool checked)`
`{`
`    if(checked)`
`    {`
`        qDebug() << "肯德基被选中了" ;`
`    }`
`    else`
`    {`
`        qDebug() << "不选肯德基" ;`
`    }`
`}`

`

QButtonGroup组件

可以使用QButtonGroup组件对多个按钮进行分组，这是一个按钮的逻辑分组，没有任何的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 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);`

`    btp = new QButtonGroup(this);`
`    btp->addButton(ui->checkBox,1);`
`    btp->addButton(ui->checkBox_2,2);`
`    btp->addButton(ui->checkBox_3,3);`

`    // 注意，我们的按钮控件，是可以多选的。但是按钮组里的控件，默认是互斥的。`
`    // 所以，我们要解除按钮组的互斥属性。`
`    btp->setExclusive(false);`

`    connect(btp,SIGNAL(buttonToggled(int,bool)),`
`            this,SLOT(buttonToggledSlot(int,bool)));`
`}`

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

`void Dialog::buttonToggledSlot(int id, bool checked)`
`{`
`    if(id == 1)`
`    {`
`        if(checked)`
`        {`
`            qDebug() << "PHP被选中了";`
`        }`
`        else`
`        {`
`            qDebug() << "不选PHP了" ;`
`        }`
`    }`
`    else if(id == 2)`
`    {`
`        if(checked)`
`        {`
`            qDebug() << "心之钢被选中了";`
`        }`
`        else`
`        {`
`            qDebug() << "不选心之钢了" ;`
`        }`
`    }`
`    else if(id == 3)`
`    {`
`        if(checked)`
`        {`
`            qDebug() << "java被选中了";`
`        }`
`        else`
`        {`
`            qDebug() << "不选java了" ;`
`        }`
`    }`
`    else`
`    {`

`    }`
`}`

`

7、QLineEdit单行文本输入框（掌握）

QLineEdit用于输入一个单行文本。常用属性如下。

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

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

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

`    text = ui->lineEdit_2->text();`
`    qDebug() << "第二个QLineEdit内容:" << text;`

`}`

`

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(selectChangedSlot()));`

`    connect(ui->lineEdit,SIGNAL(textChanged(QString)),`
`            this,SLOT(textChangedSlot(QString)));`
`}`

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

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

`    text = ui->lineEdit_2->text();`
`    qDebug() << "第二个QLineEdit内容:" << text;`

`}`

`void Dialog::selectChangedSlot()`
`{`
`    qDebug() << ui->lineEdit->selectedText();`
`    //    qDebug() <<"1111" ;`
`}`

`void Dialog::textChangedSlot(QString text)`
`{`
`    qDebug() << text ;`
`}`
`

8、ComboBox组合框（熟悉）

comboBox用于选择一个选项。功能类似于QRadioButton。

常用属性如下：

常用信号：

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->comboBox,SIGNAL(editTextChanged(QString)),`
`            this,SLOT(editTextChangedSlot(QString)));`

`    connect(ui->comboBox,SIGNAL(highlighted(int)),`
`            this,SLOT(highlightedSlot(int)));`
`}`

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

`void Dialog::editTextChangedSlot(QString text)`
`{`
`    qDebug() << text ;`
`}`

`void Dialog::highlightedSlot(int index)`
`{`
`    qDebug() << index;`
`}`

`

9、若干与数字相关的组件（熟悉）

复制代码 
// value 属性值发生变化时发射的信号`
`// 参数为当前的value值`
`void`	`valueChanged(int value)`
`

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` `setValueSlot(int);`
`};`

`#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->dial,SIGNAL(valueChanged(int)),`
`            this,SLOT(setValueSlot(int)));`
`    connect(ui->horizontalScrollBar,SIGNAL(valueChanged(int)),`
`            this,SLOT(setValueSlot(int)));`
`    connect(ui->horizontalSlider,SIGNAL(valueChanged(int)),`
`            this,SLOT(setValueSlot(int)));`
`    connect(ui->progressBar,SIGNAL(valueChanged(int)),`
`            this,SLOT(setValueSlot(int)));`
`    connect(ui->spinBox,SIGNAL(valueChanged(int)),`
`            this,SLOT(setValueSlot(int)));`
`    connect(ui->verticalScrollBar,SIGNAL(valueChanged(int)),`
`            this,SLOT(setValueSlot(int)));`
`    connect(ui->verticalSlider,SIGNAL(valueChanged(int)),`
`            this,SLOT(setValueSlot(int)));`
`}`

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

`void Dialog::setValueSlot(int value)`
`{`
`    ui->dial->setValue(value);`
`    ui->horizontalScrollBar->setValue(value);`
`    ui->horizontalSlider->setValue(value);`
`    ui->progressBar->setValue(value);`
`    ui->spinBox->setValue(value);`
`    ui->verticalScrollBar->setValue(value);`
`    ui->verticalSlider->setValue(value);`
`}`
`
相关推荐
美式小田2 小时前
单片机学习笔记 9. 8×8LED点阵屏
笔记·单片机·嵌入式硬件·学习
兰_博3 小时前
51单片机-独立按键与数码管联动
单片机·嵌入式硬件·51单片机
Mr.Q3 小时前
OpenCV和Qt坐标系不一致问题
qt·opencv
时光の尘3 小时前
C语言菜鸟入门·关键字·float以及double的用法
运维·服务器·c语言·开发语言·stm32·单片机·c
嵌入式大圣5 小时前
单片机结合OpenCV
单片机·嵌入式硬件·opencv
重生之我是数学王子6 小时前
QT基础 编码问题 定时器 事件 绘图事件 keyPressEvent QT5.12.3环境 C++实现
开发语言·c++·qt
日晨难再6 小时前
嵌入式：STM32的启动(Startup)文件解析
stm32·单片机·嵌入式硬件
yufengxinpian7 小时前
集成了高性能ARM Cortex-M0+处理器的一款SimpleLink 2.4 GHz无线模块-RF-BM-2340B1
单片机·嵌入式硬件·音视频·智能硬件
__基本操作__8 小时前
历遍单片机下的IIC设备[ESP--0]
单片机·嵌入式硬件
网易独家音乐人Mike Zhou14 小时前
【卡尔曼滤波】数据预测Prediction观测器的理论推导及应用 C语言、Python实现（Kalman Filter）
c语言·python·单片机·物联网·算法·嵌入式·iot
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07怎样让音频速度变慢？请跟随以下方法进行操作08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10【目标跟踪】相机运动补偿