Qt快速入门到熟练(2.代码化UI设计)

        在上节Qt快速入门到熟练(1.MyFirstWidget)-CSDN博客中我们已经对qt进行了简单了解，本章就正式踏入qt界面编程之路。在本章节，我们先用Qt Designer进行控件放置和界面布局，之后使用代码编写界面，进行简单的控件放置，然后用代码进行布局。最后我们可以对比一下两种UI设计的优劣之处，两者结合使用帮助我们更好上手qt。

Qt Designer

        所谓Qt Designer，实际上就是上节我们点击widget.ui进入的那个界面。Qt Designer是Qt专为界面设计做的软件，使得用户能够通过拖拽的方式直接布置界面，然后Qt Creator可以将Qt Designer的界面转换成C++代码。Qt也将Qt Designer内置在了Qt Creator中，使得用户可以在一个编辑器中来回切换界面与代码。

​

        先简单对Qt Designer界面做下说明：

        软件正下面是动作编辑器和信号/槽编辑器，顶部的菜单工具栏，左侧的控件区，中间的界面布局区和右侧的对象查看器、属性编辑器。使用Qt Designer设计界面的流程大致为：

①从控件区拖拽需要的控件到界面布局区；

②随后在对象查看器中能够看到界面中存在的控件和控件的顺序；

③然后在属性编辑器中编辑控件的属性；

④点击顶部的工具栏中的布局工具对界面就行布局；

⑤记得保存，否则Qt Creator无法获取最新的界面变动。

拖拽控件进行布局        

        知道了以上信息我们在此基础上想要设计一个提示框，那么该怎么做呢。

        首先是要有一句提示信息，然后要一个按钮，一共需要两个控件就可以完成我们的需求，提示信息可以使用一个标签来显示，按钮我们就实现点击按钮时界面关闭的操作。

        我们操作如下图所示：

        在添加信号和槽的时候，我们需要严格按照我们的需求来设置，上面所说我们想要点击按钮来将界面关闭，所以我们的信号发出者就是按钮，这里选择pushbutton，也就是按钮的名字，发出一个点击信号cliked()，相应的接收者应该是我们的窗体Widget，槽也就是动作就是关闭close()。

        至于对标签Label和按钮pushbutton控件进行更改字体信息就要在右边属性栏里面找到text，在text里面设置文本，在font里面设置字体的大小型号等。

        等一切都操作完成以后我们点击左下角的播放按钮，它的意思是构建工程并且运行，等待片刻后我们就会弹出我们创建的工程窗口了。

        大家点击窗口中的按钮就可有关闭窗口，当然也可以点击右上角的❌来关闭窗口，这样一来证明我们的工程就完成了。大家的程序也都成功了吗

使用代码放置控件并布局

        完成拖拽控件进行布局以后，我们再来看看如何使用纯代码来实现界面布局的。根据我们的需求，在使用拖拽控件进行布局界面UI时，我们拖拽了一个Label和一个pushbutton，那么在使用纯代码的方式来布局时，也需要利用代码来添加Label和pushbutton，很显然这两种控件在代码里面是属于一个类的，于是我们要先包含进来它们的头文件只有

#include <QLabel>

#include <QPushButton>

        只有包含了他们的头文件以后，我们才能通过类创建一个类的对象，具体实现的代码如下图，我们先看代码然后在下面我再一点一点解释代码的含义：

        代码我们添加在widget.cpp中，利用widget的构造函数在创建widget窗体的同时，一起把label标签和按钮pushbutton创建出来。

        如上图所示我们先用new开辟出内存空间，创建出label对象，然后设置label的内容和位置，同样的我们也创建出按钮设置文字和位置。

        最下面的两行语句倒不是设置的label和pushbutton，上一句设置了我们的主窗体为固定的400*300大小，这样设置完毕后运行工程后我们就不能通过拉伸来改变主窗体的大小，后一句设置了主窗体的名字叫什么，因为我们这里是使用纯代码来创建的界面，所以我把主窗体的名字改成了NOUI。意思是没有使用UI界面。

        最后让我们来运行一下程序，卡看我们用代码创建的结果是什么样的：

        如果运行成功后出现了上面所示界面，那么我们使用纯代码来创建界面就成功了。在之后的项目中我们会同时使用两种创建界面的方法来进行界面开发，利用两方的优势来提高我们的工作效率和产品质量。