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);`
`}`
`
相关推荐
214实验室14 分钟前
STM32串口打印使用printf乱码问题
stm32·单片机·嵌入式硬件
沐欣工作室_lvyiyi32 分钟前
基于单片机的电厂烟道粉尘浓度检测系统（论文+源码）
单片机·嵌入式硬件·毕业设计
淼淼7632 小时前
Qt调度 程序
开发语言·c++·windows·qt
Groundwork Explorer2 小时前
异步框架+POLL混合方案应对ESP32 MPY多任务+TCP多连接
python·单片机
明飞19872 小时前
QT笔记1
qt
林政硕（Cohen0415）2 小时前
ARM Qt 字体过小的问题
arm开发·qt
追烽少年x2 小时前
Qt中构建多语言程序
qt
d111111111d3 小时前
什么是内存对齐？在STM32上面如何通过编辑器指令来实现内存对齐。
笔记·stm32·单片机·嵌入式硬件·学习·编辑器
bai5459364 小时前
STM32 CuberIDE 中断
stm32·单片机·嵌入式硬件
小叶子来了啊4 小时前
5Arduino 程序结构
单片机·嵌入式硬件
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04BongoCat - 跨平台键盘猫动画工具05在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）06jdk21下载、安装（Windows、Linux、macOS）07安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）08Open-AutoGLM Windows 安装部署教程09sqli-labs靶场通关笔记：第18-19关 HTTP头部注入10Labelme从安装到标注：零基础完整指南