Qt Designer的进阶使用

短命女 2022-09-24 11:27 237阅读 0赞

熟悉Qt的人或多或少的都会使用**Qt Designer**(以下简称Designer)，在Qt中，提供了一个用于可视化设计软件的界面的过程，使用Designer，你会减少使用代码来设计界面的过程，当然更多的时候是结合着代码以及Designer两者，从而实现较好的界面，对于熟悉MFC的人，对于生成的窗体上拖拽控件应该是非常的熟悉的，本文的侧重点不是介绍Designer的基本使用，而是笔者在使用过程中摸索出有关于Designer的比较好的使用技能，希望可以帮助大家使用Designer；本文实现的环境是VS2010+Qt5.5.1；

## **1、技能一 ===> 如何将设计的窗体在类中使用** ##

一般来说，我们在使用Qt创建一个Widget的应用的时候，都会给我们创建一个MainWindow的窗体，最简单的只有一个窗体的应用，当然在这上面进行开发就可以了，但是当我们需要更多的窗体的时候，总不能每一个都是去自定义一个窗体类，然后在这个窗体类设计窗体的布局和控件，这样将会非常的耗时，因此需要设计的窗体应用到类中，因此就观察了在创建Qt 的Widget应用的时候，创建工程时，在工程目录下会用三个文件夹界面文件、头文件、以及源文件。当我们点击编译运行后，生成的软件目录下，会有一个关于窗体的文件，即ui\_<你的窗口对象名>.h，这个是Form File(.ui)文件的生成的窗体类的原始代码，而这个代码是和我们自己用代码实现窗体是一样的。因此可以形成一下思路：

**<====通过Designer设计的窗体在编译后，形成以ui打头关于form设计的头文件，然后通过引用头文件，在自定义类中构建窗体 ====>**

具体的过程：

**1、通过Designers设计好窗体，本文设计例子如下：**

![20160730094901736][]

**2****、点击编译运行，实际上调用了Qt安装目录下一个uic的工具去编译生成有关于窗体(.ui)的C++的头文件，以ui\_打头；**

![20160730095251878][]

**3****、在自定义类中调用窗体的头文件：ui\_portSel.h：**

首先添加自定义类：一般类名保持与窗口名一致，即portSel

![20160730095845489][]

![20160730095858177][]

然后点击确定后，最关键的部分来了，如何引用呢？ 很简单，三行代码即可搞定：

首先在头文件portsel.h文件中，包含ui的头文件，本例是\#include"ui\_portsel.h" :![20160730100155319][]

然后在portSel的类声明的private属性中添加Form文件的声明：

![20160730100433163][]

这个是和ui\_头文件保持一致的，可以打开ui文件查看：

![20160730100541039][]

最后在portSel类的构造函数中，调用setUp函数即可，这个函数也是ui头文件中的：

![20160730100714212][]

在main函数，我们应用这个窗体类：

![20160730101247528][]

## 2、技能二 ===> 将C++代码自定义的窗口类应用到Designer ##

很多时候，Qt的原生部件是无法满足我们的设计需求的，因此需要在原有控件类的基础上，派生自己定义的类，从而达到自己的设计需求。但是如果将自定义的控件应用到Designer中，从而发挥Designer快捷布局和设计UI的特性呢，这个也是笔者在使用的时候经常使用的。

以下以设计一个Button为例，需求是：除了原有QPushButton的特性之外，即显示文本以及Icon，还需要选择一定的状态信息，即点击该按钮以后，打开其他窗口进行设置后，可以显示一定的有关于设置的状态信息，以下是设计的最后结果：

![20160730102817253][]

可以看见，显示了\[OFF\]的状态信息，具体实现过程如下：

1、首先派生自己的Button类，头文件内容如下：

#ifndef CAMERASETBUTTON_H
    #define CAMERASETBUTTON_H
    
    #include <QPushButton>
    class QLabel;
    class CameraSetButton : public QPushButton
    {
    	Q_OBJECT
    
    public:
    	CameraSetButton(QWidget *parent=0);
    	~CameraSetButton();
    	void setStatus(QString statusInfo);
    private:
    	QLabel *status;
    };
    
    #endif // CAMERASETBUTTON_H

2、实现内容：

#include "camerasetbutton.h"
    #include<QLabel>
    #include<QRect>
    #include<QHBoxLayout>
    CameraSetButton::CameraSetButton(QWidget *parent)
    	: QPushButton(parent)
    {
    	this->setMinimumSize(200,50);
    	this->setContentsMargins(0,0,0,0);
    	//-----------------------------------------/
    	status = new QLabel(this);
    	QRect btn_rect=this->geometry();
    	int x=btn_rect.bottomRight().x()-40;
    	int y=btn_rect.bottomRight().y()-(this->height()/3)*2;
    	status->setGeometry(x,y,70,20);
    	//-------------------------------------------//
    }
    
    CameraSetButton::~CameraSetButton()
    {
    
    }
    
    void CameraSetButton::setStatus(QString statusInfo)
    {
    	status->setText(statusInfo);
    }

3、最后最关键的部分是将类应用在Designer的布局中，**首先我们继承的是QPushButton，因此该自定义类只能用在QPushButton的提升上；**

在Designer的QPushButton中，提升窗口的部件：

![20160730103933826][]

接着选择提升的类：

![20160730104134539][]

注意这里的类就是刚刚我们自己定义的类，最后点击添加就可以了，然后我们就可以在文件中使用了：

![20160730104322150][]

[20160730094901736]: /images/20220719/c161262f82804f6f9c298e4fbff3a729.png
[20160730095251878]: /images/20220719/0447c58148074e8f8eb19dcbd3dfaf6d.png
[20160730095845489]: /images/20220719/e067b3882fff4ad38c47ad94fece7783.png
[20160730095858177]: /images/20220719/18254c0a92b149b58950d84cfbef0e4b.png
[20160730100155319]: /images/20220719/b0fa05562f1f47bea2649b169a0c7247.png
[20160730100433163]: /images/20220719/c30266fedea7470cb4a378d46df5bc90.png
[20160730100541039]: /images/20220719/344f32e544f44fb39d95b943f335bd35.png
[20160730100714212]: /images/20220719/474cef48884b4f498af3720e1a8eea67.png
[20160730101247528]: /images/20220719/91885497736c4f298ada9f56035f063f.png
[20160730102817253]: /images/20220719/64eeb2b986b24051935b53985b56a0b7.png
[20160730103933826]: /images/20220719/52c8a2cb757a428fb6573cd36b7d6b38.png
[20160730104134539]: /images/20220719/c362a1e759eb47dab37c28b5d0bfc771.png
[20160730104322150]: /images/20220719/810c4f8ae6f64d4a889c24407aa28b84.png