您的位置:控制工程论坛网论坛 » 嵌入式系统 » Qt 设计器(Qt Designer)内容总结

wangjimima

wangjimima   |   当前状态:在线

总积分:320  2018年可用积分:2

注册时间: 2017-07-27

最后登录时间: 2018-02-07

空间 发短消息加为好友

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

wangjimima  发表于 2017/8/28 16:09:24      324 查看 0 回复  [上一主题]  [下一主题]

手机阅读

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 模式,可以设置子窗口的伙伴了。点击 LabelLabel 将会变成红色的,同时出

现一条线,将这条线拖拽到后面的 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 键来验证顺序是否和我们设置的一致。点击顶部的关闭按

钮就可以关闭这个预览窗口。


1楼 0 0 回复

2016年积分排行

用户名积分