找回密码
 立即注册
收起左侧

第5篇 Qt5基础(五)Qt布局管理器

11
回复
10955
查看
[复制链接]
累计签到:1564 天
连续签到:1 天
来源: 2017-3-5 23:01:27 显示全部楼层 |阅读模式
版权声明

该文章原创于Qt开源社区(www.qter.org),作者yafeilinux,转载请注明出处!

导语

       在前一篇中我们学习了使用资源文件为主窗口添加菜单图标。这次,我们先将菜单进行完善,然后讲解一些布局管理方面的内容。一个软件不仅要有强大的功能,还要有一个美观的界面,布局管理器就是用来对界面部件进行布局管理的。Qt中的布局管理器主要包括QBoxLayout基本布局管理器、QGridLayout栅格布局管理器和QFormLayout窗体布局管理器,而基本布局管理器又分为QHBoxLayout水平布局管理器和QVBoxLayout垂直布局管理器。这一节将举几个例子简单介绍Qt布局方面的应用,大家可以以此类推,学习使用其他布局部件。


环境:Windows 7 + Qt 5.8.0(包含QtCreator 4.2.1


目录

一、完善菜单
二、向工具栏添加菜单图标
三、布局管理器
四、纯代码编写

正文


一、完善菜单


1.新建Qt Widgets应用,项目名称为myMainWindow,基类选择QMainWindow,类名为MainWindow

2.完成后,在设计模式添加菜单项,并添加资源文件,向其中添加菜单图标。最终各个菜单如下图所示。



     Action编辑器中修改动作的对象名称、图标和快捷键,最终如下图所示。




二、向工具栏添加菜单图标


       可以将动作编辑器中的动作拖动到工具栏中作为快捷图标使用,如下图所示。




       可以在工具栏上右击来添加分隔符,如下图所示。




       最终工具栏如下图所示。





三、布局管理器


1.从左边控件栏中拖入三个Push Button按钮和一个Vertical Layout(垂直布局管理器)到界面上,如下图所示。



       然后将三个按钮拖入到布局管理器中,这时三个按钮就会自动垂直排列,并且进行水平拉伸,无论如何改变布局管理器的大小,按钮总是水平方向变化。如下图所示。




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




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




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




4.布局管理器除了可以对部件进行布局以外,还有个重要用途,就是使部件随着窗口的大小变化而变化。我们删除界面上的部件,然后拖入一个文本编辑器Text Edit部件。如下图所示。


       然后我们在界面上右击,选择布局→栅格布局(或者使用快捷键Ctrl+G)。这时整个文本编辑器部件就会填充中央区域,如下图所示。现在运行程序,可以发现,无论怎样拉伸窗口,文本编辑器总是填充整个中央区域。




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


四、纯代码编写


       首先在设计模式打破现有布局,即在界面上右击,然后选择“布局→打破布局”菜单项。然后在编辑模式打开mainwindow.cpp文件,在构建函数中添加代码如下图所示:


       栅格布局管理会将所有的空间分隔成一些行和列,行和列的交叉处形成单元格,然后将部件放到指定的单元格中。这里新建了一个按钮部件和一个行编辑器部件,它们在界面上放到同一行,后者宽度是前者的两倍,然后将界面上已有的文本编辑器部件放到它们下面,效果如下图所示。



结语


在本篇中主要对垂直布局管理器和栅格布局管理器进行了演示,大家还可以使用其他的布局管理器进行测试。要学习使用布局管理器实现可隐藏窗口等更多内容,可以参考《Qt Creator快速入门》一书的相关章节。



源码下载:





本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
参与人数 2人气 +4 收起 理由
lingyun84 + 2 很详细!
FantasyDJC + 2 对我帮助很大!

查看全部评分总评分 : 人气 +4

回复

使用道具 举报

累计签到:1564 天
连续签到:1 天
2019-1-1 17:35:17 显示全部楼层
回复 支持 反对

使用道具 举报

累计签到:2 天
连续签到:2 天
2018-12-30 22:33:10 显示全部楼层
新手学习了,怎么获取积分啊
回复 支持 反对

使用道具 举报

累计签到:16 天
连续签到:1 天
2018-12-25 17:34:16 显示全部楼层
教程挺不错,几乎是手把手教学,继续学习。
回复 支持 反对

使用道具 举报

累计签到:1 天
连续签到:1 天
2018-10-11 15:55:26 显示全部楼层
继续学习,教程很好很强大
回复 支持 反对

使用道具 举报

累计签到:2 天
连续签到:1 天
2018-3-19 16:02:18 显示全部楼层
很好很强大想下载个图标,就被扣了一分
回复 支持 反对

使用道具 举报

累计签到:8 天
连续签到:1 天
2018-3-17 23:02:43 显示全部楼层
这节课是体力活

貌似论坛回帖表情无法添加
firefox59.0
win7
回复 支持 反对

使用道具 举报

累计签到:1564 天
连续签到:1 天
2017-7-28 22:36:25 显示全部楼层
kangyang94 发表于 2017-7-27 16:23
老师,你好,我想请问一下
向工具栏添加菜单图标如何通过代码实现?

最简单的方式就是看下ui文件生成的.h文件,里面有代码的。
回复 支持 反对

使用道具 举报

累计签到:18 天
连续签到:1 天
2017-7-27 16:23:42 显示全部楼层
老师,你好,我想请问一下
向工具栏添加菜单图标如何通过代码实现?
回复 支持 反对

使用道具 举报

累计签到:1564 天
连续签到:1 天
2017-3-9 14:24:42 显示全部楼层
linhuikui 发表于 2017-3-8 08:33
这个菜单,横着的,非常长,不美观,怎么让它变短一点呢?

可以用样式表qss
回复 支持 反对

使用道具 举报

累计签到:3 天
连续签到:1 天
2017-3-8 08:33:44 显示全部楼层
这个菜单,横着的,非常长,不美观,怎么让它变短一点呢?

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 支持 反对

使用道具 举报

累计签到:3 天
连续签到:1 天
2017-3-7 22:35:09 显示全部楼层
我只想下载个图标,就被扣了一分
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

公告
可以关注我们的微信公众号yafeilinux_friends获取最新动态,或者加入QQ会员群进行交流:190741849、186601429(已满) 我知道了