Qt使用Qt Designer进行界面设计

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

猜你喜欢

转载自blog.csdn.net/weixin_47488212/article/details/129976135