Qt 设计器(Qt Designer)内容总结

huangmeifang

1、概述
Qt 允许程序员不通过任何设计工具，以纯粹的 C++代码来设计一个程序。但是更多的
程序员更加习惯于在一个可视化的环境中来设计程序，尤其是在界面设计的时候。这是因为
这种设计方式更加符合人类思考的习惯，也比书写代码要快速的多。
Qt 也提供了这样一个可视化的界面设计工具：Qt 设计器（Qt Designer）。其开始界面
如上图所示。Qt 设计器可以用来开发一个应用程序全部或者部分的界面组件。以 Qt 设计器
生成的界面组件最终被变成 C++代码，因此 Qt 设计器可以被用在一个传统的工具链中，并
且它是编译器无关的。
在不同的平台上启动 Qt Designer 的方式有一定差别。在 Windows 环境下你可以在“开
始->程序->Qt”这个组件中找到 Qt Designer 的图标并点击；在 Unix 环境下，在命令行模式
下输入命令： “designer”；在 Mac Os 下，在 X    Finder 下双击 Designer 图标。
默认情况下，Qt Designer 的用户界面是由几个顶级的窗口共同组成的。如果你更习惯
于一个 MDI-style 的界面（由一个顶级窗口和几个子窗口组成的界面），可以在菜单 Edit->User
Interface Mode 中选择 Docked Window 来切换界面。上图显示的就是 MDI-style 的界面风格。
2、开始学习
在这个小节中，我们将使用 Qt Designer 来生成一个对话框： Go-to-cell。对话框如下图
所示。
不管我们是使用 Qt Designer 还是编码来实现一个对话框，都包括以下相同的步骤：
1）、创建并初始化子窗口部件。
2）、将子窗口部件放置到布局当中。
3）、对 Tab 的顺序进行设置。
4）、放置信号和槽的连接。
5）、完成对话框的通用槽的功能。
现在开始工作。首先在 Qt Designer 的菜单中选择“File->New Form”。程序将弹出一
个窗口如下：
可以看到在窗口左上方有一个“templates\forms”的菜单，下面有四个可供选择的模板。
第一个和第二个都是对话框，区别在于对话框中按钮的位置不同。第三个是主窗口，第四
个是窗口部件。本例中我们需要选择第四个选项（Widget）。 现在你应该可以看到 Qt Designer
为你生成了一个窗口，标题栏是“Untitled”（也许你觉得第一个模板更加适合我们的例子，
不过，在这里，我们将手动添加“OK”和“Cancel”这两个按钮）。
我们按照上面讲过的顺序来设计这个窗口。首先需要生成子窗口部件并将它们放置
在工作台上。在 Qt Designer 工作界面的左侧，我们可以看到很多程序设计经常用到的窗口
部件。如果你需要它们中的那一个，用鼠标把它拖到工作台上就可以了。我们在菜单“Display
Widgets”中选择一个“Label”，在菜单“Input Widgets”中选择一个“Line Edit”，在菜单
“Spacers”中选择一个“Horizontal Spacer”（这个空白组件在最终形成的窗口中是不可见的，
在 Qt Designer 中，空白组件的样子就像是一个蓝色的弹簧），在菜单“Buttons”中选择两个
“Push Button”。按照下图的位置，将它们摆放起来。
你可以看到，我们的工作界面显的太大了一些，可以用鼠标拉住边框让它改变大小，
直到你满意为止。一个类似下图的组件是不是已经出现了？记住不要花费太多的时间来摆放
这些窗口部件的位置，只要大概类似就可以了，因为他们并不是不可调整的。Qt 的布局管
理器将会对他们的位置和大小自动进行一些优化。
现在我们已经创建了这些子窗口部件，并把他们放置在了合适的位置，接下来要做
的就是初始化他们。这需要设定这些子窗口的属性。在 Qt Designer 工作界面的右侧也同样
有一些窗口，这些就是属性窗口。 可以在这些窗口中找到所有部件需要设置的属性，并更改
它们，就可以达到我们的目的了。
1）、点击 TextLabel，确认它的“objectName”属性是“label”，然后将它的“text”属
性设置为“&Cell Location”。
2）、点击 line editor （窗口中的空白编辑框），确认它的“objectName”属性是“lineEdit”。
3）、点击第一个按钮（左侧），将其“objectName”属性设置为“OKButton”，“enable”
属性设置为“false”，“text”属性设置为“OK”，“default”属性设置为“true”。
4)、点击第二个按钮（右侧），将其“objectName”属性设置为“cancelButton”，“text”
属性设置为“Cancel”。
5)、点击工作平台的背景，这样我们可以选择整个的界面。这也是一个窗口，也拥有
自己的属性。我们把它的“objectName”属性设置为“GoToCellDialog”，“windowtTitle”属
性设置为“Go to Cell”。
完成后的 Form 变成了下图的形式：
接下来我们给 Label 设置一个伙伴（buddy），在这个例子中， Label 的伙伴当然是后面
的字符编辑框 line editor。在 Qt Designer 的菜单中进行选择：Edit->Edit Buddies。这样我们
进入 Buddy 模式，可以设置子窗口的伙伴了。点击 Label，Label 将会变成红色的，同时出
现一条线，将这条线拖拽到后面的 line editor 上，然后松开。这时两个窗口都将变成红色的，
中间有一条红线相连。移动鼠标到别处并点击，窗口将变成蓝色的。这说明我们已经设置成
功了（如果设置错误，则可以用鼠标在连接窗口的线条上点击，这时相连的窗口又会变成红
色的，此时按 Delete 键就可以取消设置）。

技术交流可以加黄工QQ2685896890