Qt 设计器（Qt Designer）内容总结

一、概述

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 的界面风格。

二、开始学习

在这个小节中，咱们将使用 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 键就能够取消设置）。选择：Edit->Edit Widget，能够退出这个模式，回

到主菜单中。以下图所示：

接下来咱们对工做台上的各个子窗口进行布局：

1）、 点击标签“Cell Location”，按住 Shift 键，再点击后面的字符编辑框“line editor”，

这样它们两个窗口被同时选中。选择菜单：Form->Lay Out Horizontally。这样这两个窗口将

被一个红色边框的矩形包围。

2）点击空白子窗口“Spacer”，按住 Shift 键，再点击后面的两个按钮，同时选定这三

个窗口，而后选择菜单：Form->Lay Out Horizontally。这样这三个窗口将被一个红色边框的

矩形包围。

3）、点击工做平台的背景，取消任何已经选择的组件，而后选择：Form->Lay Out

Vertically。这样咱们能够将第 1 步和第 2 步所生成的两个水平布局进行垂直布局。

4）、选择菜单：Form->Adjust Size。这样咱们能够调整主窗口的大小。最后效果以下

图（图中的红线在程序最终生成的时候不会被显示）：

而后咱们对 Tab 的顺序进行设置。选择菜单：Edit->Edit Tab Order。一个带有数字的

蓝色矩形会显示在每个窗口部件上（因为咱们将 Label 和 line editor 设置为 buddy，这样

它们在指定 Tab 的时候被视为一个组件）。点击这些带数字的矩形能够调整到你想要的顺序

上，而后选择:Edit->Edit Widgets 离开这个模式。

如今咱们的对话框的外形已经完成了。选择菜单：Form->Preview。这样你能够预览我

们设计的窗口。能够反复按下 Tab 键来验证顺序是否和咱们设置的一致。点击顶部的关闭按

钮就能够关闭这个预览窗口。