Qt使用Qt Designer进行界面设计_qt 拖拽界面设计

        上一章我们使用代码直接进行界面设计，这一章我们使用Qt Designer进行界面设计，简单直接，所见即所得，大大提高了工作效率，特别是对于复杂界面。

1熟悉Qt Designer

        Qt Designer是Qt专为界面设计做的软件，使得用户能够通过拖拽的方式直接布置界面，然后Qt Creator可以将Qt Designer的界面转换成C++代码。Qt也将Qt Designer内置在了Qt Creator中，使得用户可以在一个编辑器中来回切换界面与代码。我们在之前新建的HelloWorld项目中，双击mainwindow.ui，出现以下界面：

         这就是嵌入在Qt Creator中的Qt Designer的样子，但是由于我们在使用Qt Creator编程的时候，都偏爱黑色主题，这就使得内置的Qt Designer黑乎乎的，控件拖拽在上面也不太清晰，所以我推荐大家单独打开Qt Designer来进行界面设计，单独打开的Qt Designer是白色主题，界面比较清晰，如果你的电脑是双屏的话，一个屏编写代码，一个屏设计界面，那定是极好的了！

        如何在项目中快速地打开Qt Designer呢，可以这么操作：将鼠标放置在左侧项目目录中的mainwindow.ui上右键，选择“用...打开”，然后选择Qt Designer，如下图所示：

        打开的Qt Designer软件如下图所示：

         即使你从没使用过这个软件，你也能一眼看懂软件各组成部分的内容。我们将界面精简一下，去掉不常用的或暂时用不到的部分，将软件右下角的信号/槽编辑器、动作编辑器、资源浏览器子界面都叉掉，整个软件就剩下顶部的菜单工具栏，左侧的控件区，中间的界面布局区和右侧的对象查看器、属性编辑器。使用Qt Designer设计界面的流程大致为：①从控件区拖拽需要的控件到界面布局区；②随后在对象查看器中能够看到界面中存在的控件和控件的顺序；③然后在属性编辑器中编辑控件的属性；④点击顶部的工具栏中的布局工具对界面就行布局；⑤记得保存，否则Qt Creator无法获取最新的界面变动。

2.拖拽控件进行布局

        接下来我们使用Qt Designer设计界面，在窗口中显示“Hello World”字样，然后用Qt Creator编译程序生成窗口。我们暂时不用菜单栏和状态栏，先把它们去掉，然后按照刚刚总结的五个步骤，我们操作如下动图所示：

        我放置了一个Label控件，设置Label的文本属性为“Hello World”，水平对齐为中心对齐，然后点击窗口，即选中窗口，接着点击工具栏中的“水平布局”，就将Label填充到了窗口中，当你拉伸窗口进行窗口缩放时，“Hello World”始终在窗口中心。设计完界面之后（一定记得保存），再切换到Qt Creator直接运行程序，等待编译完成运行，显示如下窗口：

        到此，使用Qt Designer进行界面设计的流程就完成了。接下来我们再用Qt Designer布置出上一章用代码直接编写的三个控件水平布局的界面，运行程序后窗口如下图所示：

         这里有个很重要的技巧，就是设置Layout的属性，水平布局的属性有以下几种：

        如上图所示，layoutName是水平布局的变量名，这个变量名可以在代码中直接使用，代表了这个水平布局控件；layoutLeftMargin、layoutTopMargin、layoutRightMargin、layoutBottomMargin四个属性为水平布局中的控件距离边界的大小；layoutSpacing为水平布局中的控件之间的距离；layoutStretch为水平布局中给每个控件从左到右分配的空间比例；layoutSizeConstraint为水平布局的空间大小约束规则。接下来我们将layoutStretch属性设置为1,3,6,看看界面的效果，如下：

         当你缩放窗口的时候你会发现，窗口中的三个控件所占的空间比例是按照我们设定的1:3:6分配的。这个技巧将会大大优化你的界面，使布局更加地合理。

        有了上面的这些技能，我们就可以自由发挥，将界面布置得复杂一些。下面是我设计的一个简易的加法器，运行后的窗口如下：

 3.总结

        本章使用Qt Designer进行界面设计，讲解了控件拖拽，然后进行了水平布局，最后设计了一个相对来说复杂些的“简易加法器”。下一章我们以这个“简易加法器”为例学习如何编程使用控件，实现界面中输入加数后，点击“计算”按钮，得出结果并显示出来。