QT-------UI基础到进阶，干货满满！！！

目录

一、UI基础

1. QWidget类（掌握）

2. 添加子组件（掌握）

3. 样式表（熟悉）

二、UI进阶

1. Designer 设计师（掌握）

2. 布局 Layout（掌握）

3. QWidget属性（掌握）

4. UI指针（掌握）

5. 基础组件（熟悉）

5.1 标签 QLabel

5.2 按钮类

5.3 单行文本编辑框 QLineEdit

5.4 组合框 QComboBox

5.5 一组与数字相关的组件

---

一、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截图
• 在线色表+颜色进制转换

在线颜色选择器 | RGB颜色查询对照表

• 色彩搭配

Color Palette Generator - Create Beautiful Color Schemes

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;\
}\
/*按钮悬停态*/\
QPushButton:hover\
{\
    /*背景颜色*/\
    background-color:#9F79EE;\
}\
/*按钮按下态*/\
QPushButton:pressed\
{\
    /*背景颜色*/\
    background-color:rgb(14 , 135 , 10);\
    /*左内边距为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;
}

 

二、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示例代码下载链接：百度网盘 请输入提取码

提取码：hqyj

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

5.2 按钮类

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

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

QAbstractButton的常用属性如下所示。

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

iconfont-阿里巴巴矢量图标库

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

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

示例代码下载链接：百度网盘 请输入提取码

提取码：hqyj

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

如果一个窗口内部有若干个按钮对象，需要给这些按钮对象都设置信号槽连接，可以分别给每个按钮对象进行信号槽的连接。此时可以使用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)

参数：是否互斥

按钮组示例代码下载链接：百度网盘 请输入提取码

提取码：hqyj

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

5.3 单行文本编辑框 QLineEdit

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

QLineEdit的常用属性如下所示。

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

示例代码下载链接：百度网盘 请输入提取码

提取码：hqyj

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

5.4 组合框 QComboBox

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

QComboBox常用属性如下所示。

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

示例代码下载链接：百度网盘 请输入提取码

提取码：hqyj

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

5.5 一组与数字相关的组件

以下组件都与数字有关。

这些组件常用的属性如下所示。

这些组件常用的信号函数如下所示。

• void valueChanged(int value)

当前数值发生变化时发射的信号

示例代码下载链接：百度网盘 请输入提取码

提取码：hqyj

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