论坛 › yafeilinux原创 › 第5篇 基础（五）Qt布局管理器

yafeilinux 发表于 2013-3-25 20:17:00

第5篇 基础（五）Qt布局管理器

Qt布局管理器
版权声明该文章原创于Qter开源社区（www.qter.org），作者yafeilinux，转载请注明出处！

导语       在前一篇中我们学习了使用资源文件为主窗口添加菜单图标。这次，我们先将菜单进行完善，然后讲解一些布局管理方面的内容。一个软件不仅要有强大的功能，还要有一个美观的界面，布局管理器就是用来对界面部件进行布局管理的。这一节将简单介绍一下Qt的布局方面的应用，大家可以以此类推，学习使用其他布局部件。

环境是：Windows 7 + Qt 4.8.1 +Qt Creator 2.4.1

目录一、完善菜单二、向工具栏添加菜单图标三、布局管理器

正文
一、完善菜单
1.新建Qt Gui应用，项目名称为myMainWindow，基类选择QMainWindow，类名为MainWindow。
2.完成后，在设计模式添加菜单项，并添加资源文件，向其中添加菜单图标。最终各个菜单如下图所示。
   
在Action编辑器中修改动作的对象名称、图标和快捷键，最终如下图所示。

二、向工具栏添加菜单图标
       可以将动作编辑器中的动作拖动到工具栏中作为快捷图标使用，如下图所示。

   
可以在工具栏上点击鼠标右键来添加分隔符，如下图所示。

最终工具栏如下图所示。


三、布局管理器
1.从左边控件栏中拖入三个按钮Push Button和一个Vertical Layout（垂直布局管理器）到界面上，如下图所示。
然后将三个按钮拖入到布局管理器中，这时三个按钮就会自动垂直排列，并且进行水平拉伸，无论如何改变布局管理器的大小，按钮总是水平方向变化。如下图所示。

2.我们可以选中布局管理器，然后按下上方工具栏中的“打破布局”按钮来删除布局管理器。（当然也可以先将三个按钮移出，然后按下Delete键来删除布局管理器，如果不移出按钮，那么会将它们同时删除。）如下图所示。

3.下面我们使用分裂器（QSplitter）来进行布局，先同时选中三个按钮，然后按下上方工具栏中的“使用分裂器垂直布局”按钮，如下图所示。

然后我们进行放大，可以发现，使用分裂器按钮纵向是可以变大的，这就是分裂器和布局管理器的重要区别。如下图所示。

4.布局管理器除了可以对部件进行布局以外，还有个重要用途，就是使部件随着窗口的大小变化而变化。我们删除界面上的部件，然后拖入一个文本编辑器Text Edit部件。如下图所示。
然后我们在界面上点击鼠标右键，选择布局→栅格布局（或者使用快捷键Ctrl+G）。

这时整个文本编辑器部件就会填充中央区域。如下图所示。现在运行程序，可以发现，无论怎样拉伸窗口，文本编辑器总是填充整个中央区域。

这一篇中我们主要介绍了布局管理器的应用，而且都是在设计模式对布局管理器的使用。这里使用三种方式进行了演示：从控件栏中拖入布局管理器；在工具栏中使用图标；还有使用右键菜单（当然还有快捷键的方式）。

结语       在本篇中主要对垂直布局管理器进行了演示，大家还可以使用其他的布局管理器进行测试。对于如何在代码中使用布局管理器，以及使用布局管理器实现可隐藏窗口，可以参考《Qt Creator快速入门》一书的相关章节。


涉及到的源码下载：


上一篇：第4篇 添加菜单图标——使用Qt资源文件

下一篇：第6篇 实现Qt文本编辑功能

返回：系列教程目录

mkrcpp 发表于 2013-3-27 11:28:15

新人，多多关照哦！
新人，多多关照哦！
新人，多多关照哦！
新人，多多关照哦！

ds4fdsf4444 发表于 2013-7-29 15:35:29

楼主发的这个系列文章 能不能弄一个目录哦 不然查看起来 比较辛苦

yafeilinux 发表于 2013-7-30 17:42:23

ds4fdsf4444 发表于 2013-7-29 15:35 static/image/common/back.gif
楼主发的这个系列文章 能不能弄一个目录哦 不然查看起来 比较辛苦

有的啊：http://www.qter.org/forum.php?mod=viewthread&tid=193

agehacat 发表于 2013-8-3 19:32:13

楼主能不能提供你的图标文件下载?

agehacat 发表于 2013-8-3 19:33:12

agehacat 发表于 2013-8-3 19:32 static/image/common/back.gif
楼主能不能提供你的图标文件下载?

原来在代码的文件下载里有

williamzhang 发表于 2013-8-7 15:54:27

由浅入深，很棒的教程啊

qq897425998 发表于 2013-8-11 23:02:15

怎么让mainwidow.ui 文件与ui_mainwidow.h 同步   
我是先直接创的.ui   不想每设计一次都去用uic -o

yafeilinux 发表于 2013-8-11 23:04:21

qq897425998 发表于 2013-8-11 23:02 static/image/common/back.gif
怎么让mainwidow.ui 文件与ui_mainwidow.h 同步   
我是先直接创的.ui   不想每设计一次都去用uic -o...

不用啊，你不是用Qt Creator吗，他们是自动编译的，直接运行即可。

如何你用的是命令行，那个没有办法，或者你可以写个脚本。

TigerQter 发表于 2013-8-14 14:38:00

QT5.1的版本，怎么菜单下拉部分不能直接输入中文啊。 必须要外面输入完毕copy进去才可以。。郁闷啊

yafeilinux 发表于 2013-8-14 17:27:52

TigerQter 发表于 2013-8-14 14:38 static/image/common/back.gif
QT5.1的版本，怎么菜单下拉部分不能直接输入中文啊。 必须要外面输入完毕copy进去才可以。。郁闷啊 ...

嗯。Qt 5现在还有很多地方不是很完善！

wlmzyy 发表于 2013-9-1 08:04:37

yafeilinux 发表于 2013-8-11 23:04 static/image/common/back.gif
不用啊，你不是用Qt Creator吗，他们是自动编译的，直接运行即可。

如何你用的是命令行，那个没有办法， ...

请教个问题
我是qt5.1的版本
从附件下载下来打开run会显示:-1: error: No rule to make target '../mymainwindow/mymainwindow.ui', needed by 'ui_mymainwindow.h'.Stop.
这个如何处理？

yafeilinux 发表于 2013-9-2 14:32:44

wlmzyy 发表于 2013-9-1 08:04 static/image/common/back.gif
请教个问题
我是qt5.1的版本
从附件下载下来打开run会显示:-1: error: No rule to make target '../myma ...

嗯，源码用Qt 5.1重新编译了一下，你重新下载试试。

wlmzyy 发表于 2013-9-3 11:02:36

yafeilinux 发表于 2013-9-2 14:32 static/image/common/back.gif
嗯，源码用Qt 5.1重新编译了一下，你重新下载试试。

已经可以了
非常感谢:)

MLTRwhy 发表于 2013-9-6 13:35:07

原来工具栏上的快捷图标就是拖上去的。。前一段时间一入手就在看那本开发实战精解，结果很多都不会做，只好能从入门开始:lol。
每天看一篇教程，应该不慢的吧:lol

lzerof 发表于 2013-10-5 01:22:03

这一节碰到以下问题，不知道啥回事。但是不影响编译结果

:-1: 警告:Qmake不支持源文件目录下的构建目录。

yafeilinux 发表于 2013-10-5 09:40:03

lzerof 发表于 2013-10-5 01:22 static/image/common/back.gif
这一节碰到以下问题，不知道啥回事。但是不影响编译结果

:-1: 警告make不支持源文件目录下的构建目录。 ...

你更改默认的构建目录了？

lzerof 发表于 2013-10-5 10:23:30

yafeilinux 发表于 2013-10-5 09:40 static/image/common/back.gif
你更改默认的构建目录了？

我不确认，构建目录在哪儿更改？

yafeilinux 发表于 2013-10-5 19:15:10

lzerof 发表于 2013-10-5 10:23 static/image/common/back.gif
我不确认，构建目录在哪儿更改？

创建项目的时候啊。

knowqter 发表于 2014-3-4 16:17:13

图标文件的大小有什么要求吗

查看完整版本: 第5篇 基础（五）Qt布局管理器