文档章节

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

muliuhai
 muliuhai
发布于 2017/08/28 16:05
字数 2023
阅读 29
收藏 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 模式,可以设置子窗口的伙伴了。点击 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 键来验证顺序是否和我们设置的一致。点击顶部的关闭按

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

© 著作权归作者所有

共有 人打赏支持
muliuhai
粉丝 3
博文 79
码字总数 155337
作品 0
郑州
Ubuntu 安装 Qt 开发环境 简单实现

Ubuntu 安装 Qt 开发环境 简单实现是本文要介绍的内容,内容很短,取其精华,详细介绍Qt 类库的说明,先来看内容。 一、Ubuntu下安装Qt $ sudo apt-get install qt4-dev-tools qt4-doc qt4-q...

mickelfeng
2012/12/21
0
0
Ubuntu下安装Qt环境及Qt Creator开发工具

在Ubuntu操作系统下如何安装Qt环境?在Ubuntu操作系统下又如何进行Qt Creator开发工具呢?本文将讲述这些内容。 首先安装Qt4并采用Qt Creator进行开发演示 在Terminal中输入:sudo apt-get i...

mickelfeng
2012/12/21
0
0
Ubuntu 安装 Qt 开发环境

一、Ubuntu下安装Qt $ sudo apt-get install qt4-dev-tools qt4-doc qt4-qtconfig qt4-demos qt4-designer 注:qt4-dev-tools 包含了Qt Assistant及Qt Linguist等工具,因此不需要单独安装这......

鉴客
2010/08/10
2.1K
2
Eclipse 使用 QtJambi 开发基于 Qt 的应用程序

Qt Jambi 项目本身带了支持 Eclipse 的插件,可在 Eclipse 环境中直接访问 Qt Jambi 的文档和 Qt 设计器,目前支持 Windows 和 Linux 系统。 目录 安装 配置 创建 Qt Jambi 项目 在 Eclipse ...

鉴客
2010/09/24
4.6K
3
Ubuntu下Qt4开发环境的安装

本文讨论的是从Ubuntu的基础安装,也就是从CD安装盘默认安装后,开发Qt应用所需要的安装包。本文实验环境Ubuntu 9.04-desktop, wubi.exe安装 下面就是需要作的几个步骤 1)sudo apt-get inst...

红薯
2010/04/12
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

php 使用redis锁限制并发访问类

1.并发访问限制问题 对于一些需要限制同一个用户并发访问的场景,如果用户并发请求多次,而服务器处理没有加锁限制,用户则可以多次请求成功。 例如换领优惠券,如果用户同一时间并发提交换领...

豆花饭烧土豆
14分钟前
0
0
Linux环境搭建 | 手把手教你配置Linux虚拟机

在上一节 「手把你教你安装Linux虚拟机」 里,我们已经安装好了Linux虚拟机,在这一节里,我们将配置安装好的Linux虚拟机,使其达到可以开发的程度。 Ubuntu刚安装完毕之后,还无法进行开发,...

良许Linux
16分钟前
0
0
Nginix开启SSL支持HTTPS访问(自签名方法)

Nginix开启SSL支持HTTPS访问(自签名方法) 超文本传输安全协议(缩写:HTTPS,英语:Hypertext Transfer Protocol Secure)是超文本传输协议和SSL/TLS的组合,用以提供加密通讯及对网络服务器...

openthings
32分钟前
0
0
(三)Nginx配置·续

概述 前文写了关于Nginx环境配置,但是还没有完,接下来将会继续讲三个相关的配置 主要是以下三个 1.Nginx访问日志 2.Nginx日志切割 3.静态文件不记录日志和过期时间 Nginx访问日志 1.先看看...

杉下
今天
1
0
jquery创建类似于java的map

var map = {}; // Map map = new HashMap(); map[key] = value; // map.put(key, value); var value = map[key]; // Object value = map.get(key); var has = key in map; // boolean has = ......

SuperDabai
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部