QT gui 简介及基本操作

最新推荐文章于 2024-05-17 06:29:17 发布
最新推荐文章于 2024-05-17 06:29:17 发布
阅读量4.1k 收藏 15
点赞数
文章标签： c++ Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59368221/article/details/128840073
版权

一、Qt简介

1. Qt是什么？（熟悉）

Qt是一个基于C++语言的图形用户界面（GUI）开发框架，Qt不仅仅可以进行GUI开发，除此之外Qt也能进行很多其它功能开发，包括但不限于多线程、数据库、图像处理、音视频处理、网络通信与文件IO等。

Qt广泛地应用于嵌入式开发和传统软件开发中：

（1） 传统软件客户端

（2）上位机：远程控制嵌入式下位机

（3）嵌入式产品控制程序

2. Qt的优势（熟悉）

Qt与各种竞品相比，主要的优势是跨平台特性。

跨平台特性指的是：一次编程，到处编译。

除此之外，Qt也拥有一些其它竞品的共同优势特点：

  • 面向对象开发

  • 丰富的API，并配以大量的开发文档

  • 易用且开源的开发环境

3. 开发环境（掌握）

教学的过程中主要使用下面的版本：

链接：https://pan.baidu.com/s/1set1-NxZ25o5LGBJMBrC_g

提取码：q0zc

较新版本的安装和使用在最后一天简单讲解。

创建一个新的Qt项目的步骤如下：

1. 启动Qt Creator后，点击

按钮。

2. 在弹出窗口中，按照下图所示进行操作。

3. 在弹出的窗口中，编辑项目的名称和工作目录的位置，要求同之前C++，设定后点击“下一步”。

4. 在弹出的窗口中，直接点击“下一步”。

5. 在弹出的窗口中，按照下图所示进行操作，更改基类为QDialog，以便于日常学习方便。

6. 在项目管理界面直接点击“完成”，可以看到项目包含的各种文件，如下所示。

7. 点击运行按钮，观察程序执行效果。

4. 工作目录与构建目录（熟悉）

工作目录：即新建项目时配置的路径，存放源代码文件的目录。

构建目录：当程序构建时，会在此目录下生成编译的文件。

需要注意的是，默认情况下开启影子构建，此时工作目录与构建目录分离。如果取消此模式，构建目录会合并到工作目录，优势是可以提升编译的稳定性，劣势是文件分类不明确。

5. 查看帮助文档（重点）

Qt自带了大量的帮助文档，可以通过以下几种方式打开：

法一：直接打开Assistant程序，可以在一个独立窗口中打开帮助文档。

法二：在Qt Creator中点击左栏的“帮助”，可以打开一个内置的帮助文档。

法三：在Qt Creator中，光标定位到要查询的内容，双击键盘F1，可以直接通过内置的帮助文档查询到对应的内容。

每个类在文档中需要注意下面的部分。

6. 解析默认文件代码（掌握）

6.1 项目配置文件（熟悉）

#-------------------------------------------------

#

# Project created by QtCreator 2023-01-30T21:19:35

#

#-------------------------------------------------

# 当前项目需要添加的模块

QT += core gui

# 当Qt主版本号大于4时，添加widgets模块

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = HelloQt # 可执行文件名称

TEMPLATE = app # 当前项目的构建模式

# 当前项目包含的源文件

SOURCES += main.cpp\

dialog.cpp

# 当前项目包含的头文件

HEADERS += dialog.h

# 当前项目包含的界面文件

FORMS += dialog.ui

此文件除了添加的模块外，通常不需要程序员手动维护。

6.2 Dialog类文件

默认的Qt项目会创建一个Dialog类，此类包含三个文件：

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>

namespace Ui {
class Dialog;
}

/**
 * @brief The Dialog class
 * 自定义类继承了源代码的QDialog类
 */
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);
}

/**
 * 析构函数
 */
Dialog::~Dialog()
{
    delete ui;
}

dialog.ui

略，后续有单独章节讲解

6.3 主文件

main.cpp

#include "dialog.h"
#include <QApplication>

/**
 * @brief main 程序的入口，主函数
 * @return
 */
int main(int argc, char *argv[])
{
    // 创建一个应用程序管理类对象
    QApplication a(argc, argv);
    // 创建了一个Dialog类对象w
    Dialog w;
    // 显示对象w在UI上
    w.show();

    return a.exec(); // 进入循环状态，程序持续运行
}

7. 调试函数（掌握）

之前C++课程中更改了Qt Creator的文件编码，现在需要恢复之前的默认编码，操作如下：

前期学习为了代码更加精简，在创建项目时，更改第5步为：

其它步骤不变，这样的项目没有了界面文件，代码更加简洁。

Qt中调试信息是不能在界面上被用户看到的，因此需要使用QDebug类将调试信息在后台输出，这样的信息用户无法看到。

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
// 引入头文件
#include <QDebug>

class Dialog : public QDialog
{
    Q_OBJECT

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

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
Dialog::Dialog(QWidget *parent)
: QDialog(parent)
{
// 注意Qt中命名规范与C++有不同
// 函数与变量使用 驼峰命名法（小驼峰命名法）：
//第一个单词全小写，后面的单词首字母大写
qDebug() << "构造函数"; // 结束后会自动换行
}
Dialog::~Dialog()
{
qDebug() << "析构函数";
}

二、UI基础

1. QWidget类（掌握）

QWidget类是所有可视化组件和窗口的基类，因此QWidget中成员可以继承给众多派生类使用。

QWidget最基础的属性：

  • width : const int

宽度，单位像素

可以通过int width() const获得数值，即getter

  • height : const int

高度，单位像素

getter：int height() const

  • x : const int

横坐标，单位像素，原点左上角，正方向右

getter：int x() const

  • y : const int

纵坐标，单位像素，原点左上角，正方向下

getter：int y() const

QWidget最基础的函数：

  • void resize(int w, int h)

重定义宽高

  • void move(int x, int y)

移动到设定的坐标处，所有的组件和窗口以左上角为定位点

  • void setGeometry(int x, int y, int w, int h)

同时设置坐标和宽高

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
// 头文件
#include <QDebug>

class Dialog : public QDialog
{
    Q_OBJECT

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

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
    // 重定义宽高
    resize(1000,240);
    // this指针指向主函数中的w对象
    int w = this->width();
    int h = height();
    // 输出
    qDebug() << w << h;

    // 获得位置
    int x = this->x();
    int y = this->y();
    qDebug() << x << y; // 0,0 不准，因为窗口对象还在创建中
    // 移动
    move(100,100);

    // 同时设置坐标和宽高
    setGeometry(400,400,200,200);
}

Dialog::~Dialog()
{

}

2. 添加子组件（掌握）

以最常见按钮（QPushButton）为例，讲解在窗口中添加子组件的方法。

QPushButton的构造函数如下：

  • QPushButton::QPushButton(const QString & text, QWidget * parent = 0)

参数1：按钮显示的文字

参数2：按钮在哪个对象上

dialog.h

#ifndef DIALOG_H

#define DIALOG_H

#include <QDialog>

// 头文件

#include <QPushButton>

class Dialog : public QDialog

{

Q_OBJECT

public:

Dialog(QWidget *parent = 0);

~Dialog();

private:

// 私有成员变量

QPushButton* btn;

};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)

: QDialog(parent)

{

resize(400,400);

// 创建一个按钮对象

// 参数2是使用this指针结合多态传参

btn = new QPushButton("初十",this);

// 更改按钮大小

btn->resize(100,100);

// 移动按钮位置，注意坐标是窗口内部的相对坐标

btn->move(100,100);

}

Dialog::~Dialog()

{

// 释放按钮内存

delete btn;

}

3. 样式表（熟悉）

Qt可以使用QSS语法设置组件的样式效果。

颜色的配置可以通过以下几个方法：

  • QQ截图

  • 在线色表+颜色进制转换

http://tools.jb51.net/static/colorpicker/

  • 色彩搭配

https://colors.muz.li/

dialog.h

#ifndef DIALOG_H

#define DIALOG_H

#include <QDialog>

// 头文件

#include <QPushButton>

#define QPushButton_STYTLE (QString("\

/*按钮普通态*/\

QPushButton\

{\

font-family:Microsoft Yahei;\

/*字体大小为20点*/\

font-size:20pt;\

/*字体颜色为粉色*/\

color:rgb(238, 210, 238);\

/*背景颜色*/\

background-color:rgb(197,146,163);\

/*边框圆角半径为8像素*/\

border-radius:8px;\

/*设置边框宽度和颜色*/

border:1px solid rgb(0,0,0);\

}\

/*按钮悬停态*/\

QPushButton:hover\

{\

/*背景颜色*/\

background-color:#33ffff;\

}\

/*按钮按下态*/\

QPushButton:pressed\

{\

/*背景颜色*/\

background-color:rgb(102, 102, 255);\

/*左内边距为3像素，让按下时字向右移动3像素*/\

padding-left:3px;\

/*上内边距为3像素，让按下时字向下移动3像素*/\

padding-top:3px;\

}"))

class Dialog : public QDialog

{

Q_OBJECT

public:

Dialog(QWidget *parent = 0);

~Dialog();

private:

// 私有成员变量

QPushButton* btn;

};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)

: QDialog(parent)

{

resize(400,400);

btn = new QPushButton("初十",this);

// 设置样式表

btn->setStyleSheet(QPushButton_STYTLE);

btn->resize(100,100);

btn->move(100,100);

}

Dialog::~Dialog()

{

delete btn;

}

三、信号槽（重点）

1. 信号槽的概念

在之前的学习中，可以实现简单的UI效果，但是按钮不能点击。如果让按钮能在用户点击后执行某个代码，就需要用到Qt中的信号槽机制。

信号槽是Qt基于C++语法上新增的特性，可以实现对象之间的通信，形成一定因果关系。

使用信号槽的对象需要具备两个条件：

  • 通信的对象必须继承自QObject

  • 类中要有Q_OBJECT宏

2. 函数原型

QObject类是所有Qt对象的基类，此类中有一个静态成员函数connect，用于连接信号槽之间的因果关系，函数原型如下：

参数1：发射者，通信的对象，此对象是信号槽触发的来源，例如：按钮对象（n.）

参数2：信号函数，使用SIGNAL()包裹，表示发射者触发的效果，例如：点击（v.）

参数3：接收者，通信对象，此对象是执行结果代码的主体（n.）

参数4：槽函数，使用SLOT()包裹，表示接收者要执行的函数（v.）

为了方便讲解各种场景下使用信号槽的不同方式，分别使用三种类型进行讲解：

  • 自带信号→ 自带槽

  • 自带信号→ 自定义槽

  • 自定义信号→ 槽函数

2.1 自带信号 → 自带槽

这是最简单的一种连接方式，因为信号函数和槽函数都在Qt中预设了，只需要通过connect函数“连线”即可。

【例子】点击按钮，关闭窗口。

分析：

参数1，按钮对象；

参数2，点击函数；

参数3，窗口对象；

参数4：关闭函数。

dialog.h

#ifndef DIALOG_H

#define DIALOG_H

#include <QDialog>

#include <QPushButton>

class Dialog : public QDialog

{

Q_OBJECT

public:

Dialog(QWidget *parent = 0);

~Dialog();

private:

QPushButton* btn;

};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)

: QDialog(parent)

{

resize(300,300);

btn = new QPushButton("关闭",this);

btn->move(100,100);

// 参数1，按钮对象 btn

// 参数2，点击函数 void clicked()//在按钮里面

// 参数3，窗口对象 this

// 参数4：关闭函数 bool close()//在窗口里面

connect(btn,SIGNAL(clicked()),this,SLOT(close()));

}

Dialog::~Dialog()

{

delete btn;

}

2.2 自带信号 → 自定义槽

这种方式是使用频率最高的一种连接方式，因为Qt源代码中不可能囊括所有要执行的代码。

【例子】点击按钮，左下角移动窗口并输出移动后的窗口坐标。

dialog.h

#ifndef DIALOG_H

#define DIALOG_H

#include <QDialog>

#include <QPushButton>

#include <QDebug>

class Dialog : public QDialog

{

Q_OBJECT

public:

Dialog(QWidget *parent = 0);

~Dialog();

private:

QPushButton* btn;

// 私有槽函数

private slots://规定的格式 不可改变

// 声明自定义槽函数

void mySlot();

};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)

: QDialog(parent)

{

resize(300,300);

btn = new QPushButton("移动并输出",this);

btn->move(100,100);

// 连接信号槽

connect(btn,SIGNAL(clicked()),this,SLOT(mySlot()));

}

void Dialog::mySlot()

{

// 获得当前坐标

int x = this->x();

int y = this->y();

// 移动窗口

move(x+10,y+10);

// 输出

qDebug() << x << y;

}

Dialog::~Dialog()

{

delete btn;

}

2.3 自定义信号

自定义信号主要用于后期一些相对复杂的通信场景，本次学习强行使用，并不是功能实现的最优解。

信号函数是非常特殊的一种函数，只有声明，没有定义，且不能在代码中直接调用，可以配合emit关键字进行发射。

【例子】点击按钮，关闭窗口。

dialog.h

#ifndef DIALOG_H

#define DIALOG_H

#include <QDialog>

#include <QPushButton>

class Dialog : public QDialog

{

Q_OBJECT

public:

Dialog(QWidget *parent = 0);

~Dialog();

private:

QPushButton *btn;

// 自定义槽函数

private slots://自定义信号格式（记住）

void mySlot();

// 声明信号函数，只声明

signals://同上 不用加private

void mySignal();

};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)

: QDialog(parent)

{

resize(500,500);

btn = new QPushButton("关闭",this);

btn->move(200,300);

connect(btn,SIGNAL(clicked()),this,SLOT(mySlot()));

connect(this,SIGNAL(mySignal()),this,SLOT(close()));

//参数：谁发射信号 发射什么信号 谁接收信号 做出什么动作

}

// 自定义槽函数

void Dialog::mySlot()

{

// 发射自定义信号

emit mySignal();

// close();//写到自定义槽函数里也会关闭窗口

}

Dialog::~Dialog()

{

delete btn;

}

三、信号槽

1. 信号槽的概念

在之前的学习中，可以实现简单的UI效果，但是按钮不能点击。如果让按钮能在用户点击后执行某个代码，就需要用到Qt中的信号槽机制。

信号槽是Qt基于C++语法上新增的特性，可以实现对象之间的通信，形成一定因果关系。

使用信号槽的对象需要具备两个条件：

  • 通信的对象必须继承自QObject

  • 类中要有Q_OBJECT宏

2. 函数原型

QObject类是所有Qt对象的基类，此类中有一个静态成员函数connect，用于连接信号槽之间的因果关系，函数原型如下：

参数1：发射者，通信的对象，此对象是信号槽触发的来源，例如：按钮对象（n.）

参数2：信号函数，使用SIGNAL()包裹，表示发射者触发的效果，例如：点击（v.）

参数3：接收者，通信对象，此对象是执行结果代码的主体（n.）

参数4：槽函数，使用SLOT()包裹，表示接收者要执行的函数（v.）

为了方便讲解各种场景下使用信号槽的不同方式，分别使用三种类型进行讲解：

  • 自带信号→ 自带槽

  • 自带信号→ 自定义槽

  • 自定义信号→ 槽函数

2.1 自带信号 → 自带槽

这是最简单的一种连接方式，因为信号函数和槽函数都在Qt中预设了，只需要通过connect函数“连线”即可。

【例子】点击按钮，关闭窗口。

分析：

参数1，按钮对象；

参数2，点击函数；

参数3，窗口对象；

参数4：关闭函数。

dialog.h

#ifndef DIALOG_H

#define DIALOG_H

#include <QDialog>

#include <QPushButton>

class Dialog : public QDialog

{

Q_OBJECT

public:

Dialog(QWidget *parent = 0);

~Dialog();

private:

QPushButton* btn;

};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)

: QDialog(parent)

{

resize(300,300);

btn = new QPushButton("关闭",this);

btn->move(100,100);

// 参数1，按钮对象 btn

// 参数2，点击函数 void clicked()

// 参数3，窗口对象 this

// 参数4：关闭函数 bool close()

connect(btn,SIGNAL(clicked()),this,SLOT(close()));

}

Dialog::~Dialog()

{

delete btn;

}

2.2 自带信号 → 自定义槽

这种方式是使用频率最高的一种连接方式，因为Qt源代码中不可能囊括所有要执行的代码。实际上槽函数是一种特殊的成员函数，编写方式基本等同成员函数。

【例子】点击按钮，左下角移动窗口并输出移动后的窗口坐标。

dialog.h

#ifndef DIALOG_H

#define DIALOG_H

#include <QDialog>

#include <QPushButton>

#include <QDebug>

class Dialog : public QDialog

{

Q_OBJECT

public:

Dialog(QWidget *parent = 0);

~Dialog();

private:

QPushButton* btn;

// 私有槽函数

private slots:

// 声明自定义槽函数

void mySlot();

};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)

: QDialog(parent)

{

resize(300,300);

btn = new QPushButton("移动并输出",this);

btn->move(100,100);

// 连接信号槽

connect(btn,SIGNAL(clicked()),this,SLOT(mySlot()));

}

void Dialog::mySlot()

{

// 获得当前坐标

int x = this->x();

int y = this->y();

// 移动窗口

move(x+10,y+10);

// 输出

qDebug() << x << y;

}

Dialog::~Dialog()

{

delete btn;

}

2.3 自定义信号

自定义信号主要用于后期一些相对复杂的通信场景，本次学习强行使用，并不是功能实现的最优解。

信号函数是非常特殊的一种函数，只有声明，没有定义，且不能在代码中直接调用，可以配合emit关键字进行发射。

【例子】点击按钮，关闭窗口。

dialog.h

#ifndef DIALOG_H

#define DIALOG_H

#include <QDialog>

#include <QPushButton>

class Dialog : public QDialog

{

Q_OBJECT

public:

Dialog(QWidget *parent = 0);

~Dialog();

private:

QPushButton *btn;

// 自定义槽函数

private slots:

void mySlot();

// 声明信号函数，只声明

signals:

void mySignal();

};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)

: QDialog(parent)

{

resize(500,500);

btn = new QPushButton("关闭",this);

btn->move(200,300);

connect(btn,SIGNAL(clicked()),this,SLOT(mySlot()));

connect(this,SIGNAL(mySignal()),this,SLOT(close()));

}

// 自定义槽函数

void Dialog::mySlot()

{

// 发射自定义信号

emit mySignal();

}

Dialog::~Dialog()

{

delete btn;

}

3. 参数传递

【例子】点击按钮，按钮上显示点击的次数。

提示：

QPushButton显示文字的属性：

  • text : QString

getter：QString text() const

setter：void setText(const QString & text)

3.1 全局参数

本次使用成员变量作为一个对象内部的全局参数，根据实际情况也可以使用静态变量。

dialog.h

#ifndef DIALOG_H

#define DIALOG_H

#include <QDialog>

#include <QPushButton>

class Dialog : public QDialog

{

Q_OBJECT

public:

Dialog(QWidget *parent = 0);

~Dialog();

private:

int count; // 记录点击的次数

QPushButton* btn;

private slots:

void btnClickedSlot(); // 按钮点击的槽函数

};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)

: QDialog(parent)

{

count = 0; // 属性赋予初始值

resize(300,400);

btn = new QPushButton("0",this);

btn->move(100,250);

connect(btn,SIGNAL(clicked()),

this,SLOT(btnClickedSlot()));

}

void Dialog::btnClickedSlot()

{

// 计数+1

count++;

// int → QString

QString text = QString::number(count);

// 设置显示

btn->setText(text);

}

Dialog::~Dialog()

{

delete btn;

}

3.2 信号槽传参

使用信号槽也可以进行参数传递，但是这种方式通常用户后面较为复杂的情况，本次讲解的代码也不是最优解。

dialog.h

#ifndef DIALOG_H

#define DIALOG_H

#include <QDialog>

#include <QPushButton>

class Dialog : public QDialog

{

Q_OBJECT

public:

Dialog(QWidget *parent = 0);

~Dialog();

private:

QPushButton *btn;

private slots:

void mySlot1(); // 自定义槽函数1

void mySlot2(int); // 自定义槽函数2

signals:

// 带参数的自定义信号函数

void mySignal(int);

};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)

: QDialog(parent)

{

resize(300,300);

btn = new QPushButton("0",this);

connect(btn,SIGNAL(clicked()),this,SLOT(mySlot1()));

connect(this,SIGNAL(mySignal(int)),this,SLOT(mySlot2(int)));

}

Dialog::~Dialog()

{

delete btn;

}

void Dialog::mySlot1()

{

// 静态局部变量

static int count = 0;

// 发射自定义信号

emit mySignal(++count);

}

void Dialog::mySlot2(int count)

{

// int → QString

QString text = QString::number(count);

// 设置显示

btn->setText(text);

}

需要注意的是：

1. 理论上可以通过信号槽发送任意多个参数

2. 信号函数的参数个数必须大于等于槽函数的参数个数

3. 参数类型必须一致

4. 对应关系

4.1 一对多

同一个信号可以同时连接多个槽函数，也可以把这多个槽函数合并为一个槽函数。

dialog.h

#ifndef DIALOG_H

#define DIALOG_H

#include <QDialog>

#include <QPushButton>

#include <QDebug>

class Dialog : public QDialog

{

Q_OBJECT

public:

Dialog(QWidget *parent = 0);

~Dialog();

private:

QPushButton* btn1;

QPushButton* btn2;

private slots:

void mySlot1();

void mySlot2();

void mySlot3();

};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)

: QDialog(parent)

{

resize(300,600);

btn1 = new QPushButton("一对多",this);

btn1->move(100,200);

connect(btn1,SIGNAL(clicked()),this,SLOT(mySlot1()));

connect(btn1,SIGNAL(clicked()),this,SLOT(mySlot2()));

btn2 = new QPushButton("一对一",this);

btn2->move(100,400);

connect(btn2,SIGNAL(clicked()),this,SLOT(mySlot3()));

}

void Dialog::mySlot1()

{

qDebug() << "A";

}

void Dialog::mySlot2()

{

qDebug() << "B";

}

void Dialog::mySlot3()

{

// 槽函数也是成员函数，可以直接调用槽函数1和槽函数2

mySlot1();

mySlot2();

}

Dialog::~Dialog()

{

delete btn1;

delete btn2;

}

4.2 多对一

多个信号可以连接到同一个槽函数。

dialog.h

#ifndef DIALOG_H

#define DIALOG_H

#include <QDialog>

#include <QPushButton>

#include <QDebug>

class Dialog : public QDialog

{

Q_OBJECT

public:

Dialog(QWidget *parent = 0);

~Dialog();

private:

QPushButton *btn1;

QPushButton *btn2;

private slots:

void mySlot();

};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)

: QDialog(parent)

{

resize(600,200);

btn1 = new QPushButton("1",this);

btn1->move(200,100);

btn2 = new QPushButton("2",this);

btn2->move(400,100);

connect(btn1,SIGNAL(clicked()),this,SLOT(mySlot()));

connect(btn2,SIGNAL(clicked()),this,SLOT(mySlot()));

}

void Dialog::mySlot()

{

qDebug() << "自定义槽函数";

}

Dialog::~Dialog()

{

delete btn1;

delete btn2;

}

四、UI进阶

1. Designer 设计师

Designer是Qt内置的UI设计工具，可以独立启动，也可以在Qt Creator中使用，其文件格式为.ui。

使用Qt Creator创建项目时，勾选创建界面选项，新创建的项目中的Dialog类会自带一个界面文件，双击即可使用内置的Designer程序打开此文件。

Designer程序的各个区域如下所示。

2. 布局 Layout

可以认为布局是一个透明的盒子，内部可以放置不同的组件对象，这些对象在布局中会按照预设的效果自动排布。

布局有四种：

  • 垂直布局

  • 水平布局

  • 格点布局

  • 表单布局

当布局贴合窗口时，可能会造成组件间距变小的情况，此时可以使用伸展器组件填充空白区域。

伸展器组件本身是不可见的。

选中布局，可以在右下角配置其属性值。

布局和布局之间可以嵌套，内层布局相当于外层布局的一个组件。虽然布局可以嵌套，但是应该在实际开发中尽量避免嵌套。

3. QWidget属性

只要是QWidget的派生类对象在Designer中存在，选中此对象后，都可以在右下角的属性配置面板中找到黄色的属性。

4. UI指针

ui指针是Qt通过Designer管理组件对象的一种方式，其原理如下所示。

5. 基础组件

5.1 标签 QLabel

用于显示图片或文字。

导入图片到Qt中作为资源的步骤如下：

1. 下载图片并命名为英文小写+下划线+数字的组合，数字不能开头。

2. 把图片放置到工作目录下。

3. 在Qt Creator中选中项目名称，鼠标右键，点击“添加新文件”。

4. 在弹出的窗口中，按照下图所示进行操作。

5. 在弹出的窗口中，按照下图所示进行操作。

6. 在项目管理界面直接点击完成，可以看到项目中会创建一个资源文件，扩展名为qrc

7. 选中qrc资源文件，点击“添加前缀”。

8. 再次选中qrc文件，点击“添加文件”，在弹出的对话框中导入图片文件即可，后续添加图片可以直接从当前步骤开始操作。

9. 可以在qrc文件中看到已经导入的图片。

10. 如果要在Designer中使用此图片，则需要重新构建一次项目；如果要在C++代码中使用此图片，则需要选中在qrc中的图片后，鼠标右键，点击“复制资源路径到剪切板”。

QLabel示例代码下载链接：https://pan.baidu.com/s/1ZBSo8HUsTAr878oYp-hSBA

提取码：hqyj

--来自百度网盘超级会员V6的分享

assign添加图片

scaledcontents：适应屏幕

5.2 按钮类

按钮类组件的继承关系如下所示。

这几个按钮类都继承自QAbstractButton类，QAbstractButton是一个抽象类，内部规定了按钮的基本功能框架。

QAbstractButton的常用属性如下所示。

按钮显示的图片通常为图标，可以从下面的网站下载：

https://www.iconfont.cn/plus

同级互斥，同级可以使用布局，也可以使用QGroupBox组件。

QAbstractButton常用信号函数如下所示。

如果一个窗口内部有若干个按钮对象，需要给这些按钮对象都设置信号槽连接，可以分别给每个按钮对象进行信号槽的连接。此时可以使用QButtonGroup类给若干个按钮进行编组后统一进行信号槽连接处理。

QButtonGroup直接继承QObject类，因此不可见，也不属于ui指针管理，需要在代码汇总手动创建和销毁。

  • QButtonGroup::QButtonGroup(QObject * parent = 0)

构造函数

  • void QButtonGroup::addButton(QAbstractButton * button, int id = -1)

添加按钮到按钮组

参数1：添加的按钮对象

参数2：按钮编号，正数且不重复

  • void QButtonGroup::buttonToggled(int id, bool checked) [signal]

按钮组中的按钮对象选中状态改变时发射的信号函数

参数1：状态改变的按钮对象的编号

参数2：当前此按钮的选中状态

需要注意的是，QCheckBox编组后会变为互斥，需要使用下面的函数解除互斥：

void setExclusive(bool)

参数：是否互斥

5.3 单行文本编辑框 QLineEdit

用于录入一行的用户输入内容。

QLineEdit的常用属性如下所示。

QLineEdit的常用信号函数如下所示。

5.4 组合框 QComboBox

类似于QRadioButton，组合框提供了另一种单选的方式。

QComboBox常用属性如下所示。

QComboBox常用信号函数如下所示。

C语言土狗
关注
  • 0
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Qt GUI design.rar
12-10
【Qt GUI设计】是软件开发领域中的一种技术，主要用于创建具有图形用户界面的应用程序。Qt是一个跨平台的C++库，提供了丰富的API和工具，使得开发者可以构建美观、高效的桌面和移动应用程序。在这个名为"Qt GUI ...
PYTHON QT GUI快速编程 PYQT编程指南
01-27
Python QT GUI快速编程是利用PyQt库来创建图形用户界面（GUI）的一种高效方法。PyQt是Python语言中对Qt库的封装，Qt库是由Qt公司开发的一个强大的跨平台应用程序框架，广泛应用于桌面和移动设备上的GUI设计。PyQt...
【Qt设计开发】GUI界面设计开发
晚安的博客
04-17 9868
Qt是一个1991年由Qt Company开发的跨平台C++图形用户界面(Graphic User Interface, GUI)应用程序开发框架。QT包括但不仅限于GUI的开发，也包含了诸如系统调用、网络编程、数据库编程，2D/3D图形处理等等。QT具有强大的跨平台运行的性能，几乎囊括了所有的操作系统，例如Linux、Windows、Mac OS、Android、IOS。我们所熟知的金山WPS、Google Earth谷歌地图、SKype网络电话就是用Qt开发的。
【QView 】一套基于QT 的通用UI框架【反正在偶尔更新一下】
Adimecoin的博客
12-06 2155
硬件：通用PC / 手机 / Jetson Xavier NX 套件(均测试有效)系统：Ubuntu 20.04 / Android / Windows (均测试有效)软件 ：基于QT6.2.4 + Qml。
Qt中多ui使用及简单布局实现交互界面_ubuntu20
最新发布
2401_85014013的博客
05-17 958
前一段时间，写了一篇关于Qt中C++代码搭配UI文件实现简单的交互界面的文章，当时是计划作为一个系列来写的，希望交流一下循序渐进的学习和使用Qt心得。前几天评论中有人催更了，所以这几天在下班后抽了点时间把这第二章整理好发出来，接下来请品鉴。这篇文章质量不符合计划预期，之后有时间的话会持续修改更新，敬请期待。
QT-通用的软件界面框架，好看且实用
u013083044的博客
03-11 9091
常规软件开发，使用这种界面框架，基本是可以做很多个常规项目，比较有参考意义。本次软件使用开发的环境是QT5.13.2+VS2017，不同的开发环境重新配置即可。
QT GUI编程详解
Admans的专栏
04-18 205
1.1.1. 什么是QT一堆C++/python类库（GUI类，network，。。。。。。免费开源优良的跨平台特性：Qt支持下列操作系统: Windows、 Linux、 Solaris、Sun0sS、 FreebSD、BSD/S、SCO、AIX、0S390、QNX、 android等等面向对象-QT的良好封装机制使得Qt的模块化程度非常高,可重用性较丰富的APIQt包括多达500个以上的C++大量的开发文档文件对话框( QFile Dialog)
QT GUI编程
热门推荐
子羽丿_的博客
08-02 11万+
QT 程序设计！一、QT基础Qt简介Qt应用范围开发环境Qt Creator安装Qt内存管理第一个Qt程序打印跟踪信号与槽二、窗口部件三、主窗口四、QT基础五、QT基础六、QT基础七、QT基础持 续 更 新 中 . . . . . . 一、QT基础 Qt简介 Qt应用范围 开发环境 Qt Creator安装 Qt内存管理 第一个Qt程序 打印跟踪 信号与槽 二、窗口部件 三、主窗口 四、QT基础 五、QT基础 六、QT基础 七、QT基础 持 续 更 新 中 . . . . . . ...
QT5 C++ GUI 编程指南
08-27
QT5 C++ GUI编程指南是针对使用QT5框架进行图形用户界面（GUI）开发的一份详细教程，特别针对的是QT5.9版本。QT是一个跨平台的应用程序开发框架，广泛应用于Windows、Linux、Mac OS以及各种嵌入式系统中。本指南主要...
C++ QT实现文本文件操作【嵌入式QT GUI设计】.zip
02-21
总之，"C++ QT实现文本文件操作【嵌入式QT GUI设计】"项目涵盖了QT的基本用法，包括文本文件操作、GUI组件使用、信号与槽机制以及布局管理。通过学习和实践这个项目，你将能掌握利用C++和QT开发嵌入式GUI应用的核心...
图形用户界面应用程序框架－QT之参考文档
10-17
QT参考文档，包括概述、模块、API参考、工具、附录等。
Qt GUI 编程
09-28
Qt是一个1991年由Qt Company开发的跨平台C++图形用户界面应用程序开发框架。它既可以开发GUI程序，也可用于开发非GUI程序，
基于C++ QT GUI框架的三国杀非官方开源软件
12-13
是一款基于C++ QT GUI框架的三国杀非官方开源软件 拥有智能AI可以实现联机和单机的两种游戏方式，并能通过DIY接口进行自由的个性化修改和添加更多元素。
QT5.14入门教程GUI（三）第3个QT程序-单选按钮1--Radio_Check_Button.7z
01-11
QT5.14入门教程GUI（三）第3个QT程序-单选按钮1 QT5.14入门教程GUI（三）第3个QT程序-单选按钮1 QT5.14入门教程GUI（三）第3个QT程序-单选按钮1 QT5.14入门教程GUI（三）第3个QT程序-单选按钮1 QT5.14入门教程GUI（三）第3个QT程序-单选按钮1
QT5.14入门教程GUI（一）第一个QT程序Hello World! -HelloWorld.7z
01-11
QT5.14入门教程GUI（一）第一个QT程序Hello World! QT5.14入门教程GUI（一）第一个QT程序Hello World! QT5.14入门教程GUI（一）第一个QT程序Hello World!
第十九章 GUI 库：PyQt5
qq_42226855的博客
07-05 9050
  PyQt是另外一套基于Python的GUI框架，目前最新版本是5，所以习惯上称为PyQt5。PyQt5 的功能要远比tkinter框架强大得多。其实PyQt只是用Python语言对QT做了一个封装，底层仍然是使用C++编写的QT核心图形库，所以PyQt在运行效率上非常高，编写的GUI程序与本地应用是完全一样的。标准的QT开发使用的是C++语言，开发效率比较低，而使用Python 语言进行封装后，开发效率也大大提升了，因此，PyQt 在开发效率和运行效率上都有一个非常好的表现，而且还可以进行可视
QT之滑动切换UI框架
路过的熊的博客
07-13 726
QT之滑动切换UI框架
Qt学习(17)——第一个Qt GUI程序
beyond_zhangna的博客
02-28 1万+
简单GUI 工具提示 应用图标 游标 QPushButton 加减法 显示应用程序图标，工具提示和各种鼠标光标。我们在屏幕上居中放置一个窗口并引入信号和信号槽机制。 执行完qmake -project之后，要在*.pro最后一行加上QT += widgets。 简单GUI 从一个简单的窗口开始。 // simple.cpp // 包含GUI应用必须的头文件 #incl...
Qt桌面GUI软件基础测试参考手册V0.0.1.pdf
04-20
该手册是针对使用Qt框架开发的桌面图形用户界面（GUI）软件的基础测试指导文档，旨在帮助软件开发者和测试人员确保软件的基本功能正确无误，提高软件质量。手册由Qt未来工程师和开源社区共同编写，并遵循GPLv2开源...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值