QT图形用户界面设计的机理及可视化方法背后的故事

我们知道QT是一个用于图形界面设计的第三方库。 它功能非常强大，可以配合python、C++等语言提供图形界面库。

在QT中创建应用程序时，从广泛的角度来看，有两个接口。 一种是控制台界面（Console Application），另一种是图形用户界面（Widget Application）。

在QT图形用户界面（GUI）程序创建中，有两种选择：可视化法（在创建应用程序的向导中，勾选生成*.ui文件）和纯代码法（取消勾选生成*.ui文件） 。 今天这篇文章探讨了可视化方法背后的机制。

在QT中，可视化界面设计是由QT Designer软件完成的。 用户只需将控件一一拖放到QWidget界面上并安排好位置即可。 无需编写相关代码。 这些编码任务由Designer在后台自动完成。 。

Designer后台完成代码后，会为程序员提供与外界的接口。 这个接口就是*ui，也就是ui指针。 在 Designer 生成的代码中，定义了命名空间 Ui。 在这个命名空间中，放置了一个类的完整定义。 正是这个类负责创建控件、控制布局和关联的信号槽。

初学者在看这些代码时常常会感到困惑。 一方面，QT背后有一种机制可以将可视化工作转换为实现的代码。 另一方面，C++使用的语法比较深，比如类继承。 、对象指针、命名空间、动态创建对象等都是C++中比较深奥难点的知识点。 清楚地理解这里的机制并不困难。

下面通过一个具体的例子来直观地说明创建图形界面程序的过程，并用伪代码简单易懂地解释其背后的机制。 关键点是提出了中间类（mid_GUI）的概念，它涵盖了设计者（Designer）所做的工作。 设计者会在内部设计一个类。 该类不对外开放，因此一直没有统一的名称。 没有英文资料，各种中文技术博客之间也没有统一。 如果我们拘泥于技术术语，这个类的中文命名将会变得晦涩难懂。 本文从这个类的功能出发，将其命名为“中间类”，非常形象贴切。 从这个名字的字面意思可以看出，该类的功能是充当图形界面和可见图形控件之间的桥梁。 这是脚踏实地、美好的。 理解。 这一命名的提出可以让热爱C++ QT编程的初学者有一个清晰的概念，为学生扫清学习障碍创造良好的条件。

该方案包括三个方面：

1、使用QT Designer（设计器）直观地定义一个QWidge作为base类的表单类Widget，并将QPushButton、QLabel、QLineEdit拖放到界面中。

2、设计者在后台创建一个中间类，包括QPushButton、QLabel、QLineEdit三个。 然后将这个创建的接口耦合类添加为Widget类的新成员。 这个新成员由 Widget 类中的指针 ui 表示。

3、在Widget类的成员函数中，使用ui指针来引用QPushButton、QLabel、QLineEdit这三个ui成员控件，并编写代码来操作这些控件。

用伪代码显示这些任务：

步骤1：选择QWidget类作为基类并创建myWindow自定义类（选中.ui文件选项）。 这是QT程序员根据向导创建的图形界面的类。 Designer并没有创建另一个图形界面，它只是使用这个图形界面，然后创建控件并将它们排列在这个图形界面中。

class myWindow( ) : public QWidgt...
{
public:
....
myWindow( );
~ myWindow( );
private:
....
};

myWindow w;

步骤2：Qt Designer在后台创建一个中间类，并将可视界面上的所有控件作为该类的成员。 这个中间类是设计者内部定义的，与程序员定义的myWindow类不同。 中间类会传入myWindow类的指针，从而在中间类和程序主窗口之间架起一座桥梁。 中级班的名字也是受此启发。

中间类代码表示：

class mid_GUI
{
public:
...
private:
		QPushButton *pushButton;
		QLable *label;
		QLineEdit *lineEdit;
};

步骤3：在myWindow类的定义中，添加一个中间类（mid_GUI *ui）的指针变量作为成员变量。

class myWindow( )
{
public:
....
myWindow( );
~ myWindow( );
private:
mid_GUI *ui;
};

在myWindow的成员函数中，多了一个指向中间类的指针，这意味着中间类在创建对象时需要使用动态创建（new命令）。 在中间类的定义中，使用按钮等控件作为其成员，其类型也是指针类型。

要获取图形界面中控件的代码，例如获取图形界面中的按钮对象，需要经过两层指针。 第一级指的是myWindow成员-ui指针，第二级指的是中间类mid_GUI的成员-指针。 按钮。 这是在可视化界面中引用控件的语法：

ui→pushButton→setText(“click me”);

至此有没有设计名字的软件，设计师（QT Designer）所做的工作就已经交代清楚了。 如果你再深入一点，你可以看到设计者在命名空间中对该类的完整定义：

namespace Ui
{
  	class myWindow: pubilic ui_MyWindow
    {
    	
    };
}

QT软件给设计者在后台定义的内部类赋予与程序员定义的窗口类相同的名称，并用名称控件Ui限定以显示区别。 在程序员定义的类中，自动添加一行代码namespace Ui(class myWindow;)，通知设计者在myWindow类中创建的内部类及其命名空间，告诉你Ui命名空间及其包含的名称myWindow 类是由设计者在后台生成的。 不得不说，这种处理方法很容易引起初学者的困惑。 因此，本文给设计者的内部类Ui::myWindow起了一个别名mid_GUI有没有设计名字的软件，以表明这个类不是程序员定义的myWindow类。 QT 架构中的一个大漏洞已被消除。

【结论】

本文回顾了QT Designer协助程序员设计图形界面的机制，并提出了一个重要的别名：中间类（mid_GUI），以帮助初学者消化和理解图形界面创建背后的机制，从而在图形界面中自由漫游。 C++ QT 代码的世界。