Qt 快速利用qt designer Layout绘制GUI界面
文章目录
- 前言
- 一、目的
- 二、实现过程
- 1.界面使用的元素介绍：
- 2.实现步骤
- 总结
前言
最近用qt画一个项目界面，本文主要记录了如何通过qt designer使用layout进行快速绘制，下文中的控件和元素意思相同。
一、目的
绘制如下图所示的界面：
图1 目标界面
二、实现过程
1.界面使用的元素介绍：
图2 目标界面元素
2.实现步骤
步骤一：先确定主界面的大小（根据自己的需求设定）。要想窗口能够最大化，需要将sizePolicy中的水平策略和垂直策略设置为Expanding。
步骤二：在主界面中拖入界面所需控件。根据自己的需求来设置sizePolicy，此界面对各个控件的需求如下表。
| 元素 | 需求 | 设置 |
|---|---|---|
| Tablewidget1 | 高度（矩形的宽）不变，宽度（矩形的长）随主界面的大小而变化 | 水平策略和垂直策略分别设置为Expanding和Fixed |
| Tablewidget2 | 高度和宽度都随着主界面的变化而变化 | 水平策略和垂直策略都设置为Expanding |
| Tablewidget3 | 高度不变，宽度随主界面的大小而变化 | 水平策略和垂直策略分别设置为Expanding和Fixed |
| Listwidget | 高度随主界面变化和宽度不变 | 水平策略和垂直策略分别设置为Fixed和Expanding，将maximumSize宽度设置为一个固定值，这里设了一个200，高度设为最大 |
| Label1 | ---------------- | 水平策略和垂直策略都设置为Preferred |
| Label2 | ---------------- | 水平策略和垂直策略都设置为Expanding |
| Groupbox1 | ---------------- | 水平策略和垂直策略都设置为Expanding |
| Groupbox2 | ---------------- | 水平策略和垂直策略都设置为Expanding |
步骤三：对主界面进行分部分布局，总分为三部分，如下图。
图3 目标界面区域分布
图4 目标界面布局分布
为了让界面显得更有层次，引入了group box。各个部分的布局设置如下表：
| Part | 布局设置 |
|---|---|
| Part2 |
1. 为了让Label1显示在左侧，添加了一个Horizontal Spacer，然后将Label1和Horizontal Spacer进行水平布局（horizontalLayout_1）； 2.将horizontalLayout_1与Tablewidget 2、Tablewidget3进行垂直布局（verticalLayout_1）。可通过点击verticalLayout_1在属性中设置控件在verticalLayout_1区域中的比例大小，这里对verticalLayout_1区域中三个控件的比例设置如图6所示 |
| Part3（见图6） |
1. 添加一个Frame，将两个pushbotton放进Frame中 2. 将Listwidget、Label2和Frame进行垂直布局（verticalLayout_2） 3. 添加一个groupbox，将verticalLayout_2拖入Group box2，右击Goup box2中verticalLayout_2之外的空白部分，选择水平布局（或垂直布局）。选中后verticalLayout_2会填满Group box2区域（horizontalLayout_3） |
| 界面布局 |
1. 将Group box1和Group box2进行水平布局（horizontalLayout_4），见图7。需要设置两个区域的比例，在horizontalLayout_4中的属性中将layoutStretch设为5,0 2. 将horizontalLayout_4和Tablewidget1进行垂直布局（verticalLayout_3），见图8。 3. 右击主界面画布除verticalLayout_3部分，选择水平布局（或垂直布局）。选中后verticalLayout_3会填满整个主界面画布。见图9 |
图5 qt layout属性设置
layoutLeftMargin、layoutRightMargin、layoutTopMargin、layoutBottomMargin分别用于设置布局内的元素据左边框、右边框、上边框和下边框的宽度；layoutStretch用于设置布局内的元素在布局空间内的比例
图6 目标界面各区域布局
图7
图8
图9
总结
本文主要介绍了如何利用利用qt中的layout快速绘制GUI界面
Qt 快速利用qt designer Layout绘制GUI界面相关推荐
- JAVA_eclipse插件绘制GUI界面过程
JAVA_eclipse插件绘制GUI界面过程 安装eclipse插件 安装WindowBuilder插件 选择相应的版本install 等待下载安装完成重新启动eclipse 插件的使用 新建项目, ...
- PyQt（Python+Qt）入门：Designer组件属性编辑界面中QWidget类相关属性详解
本文适用人员:本文比较长,适合不理解Qt Designer部件属性的人员阅读或资料查找. 声明: 1.如果有人认为本文是简单的复制粘贴+翻译而成,敬请读本文最后的后记: 2.本文为老猿Python学习 ...
- pyqt5如何循环遍历控件名_利用Python的PyQt5编写GUI界面教学，QT5还是比较难的
由于学校课程的项目,最近最近在学习如何利用Python语言和SQL Server编写一个读者图书借阅.查询管理的小程序.以此为契机吧,自己便开始了学习之路~ 这篇文章主要介绍自己如何使用PyQt5编写 ...
- 【PyQt5】PyQt5 安装 以及使用 designer 开发 python GUI 界面
PyQt5 首先安装 Pyhon! PyQt5.pyqt5-tools 安装 安装可能遇到的问题 Qt Creator 简单介绍 界面构成介绍 开发一个最简单的 GUI 程序 拖动布局出一个界面 保存 ...
- JAVA利用多线程和Socket制作GUI界面的在线聊天室
目录 前言 功能设计 GUI画面展示 服务器端 客户端 私聊窗口 主要代码 服务器端 客户端 其它代码 打包成jar 打包成exe文件 如何让其它电脑访问聊天室? 最后 前言 最近刚好是期末,碰上Ja ...
- qt中利用普通函数将调用ui界面的控件
一.新建qt程序,界面如图所示: 二.在.h文件中: #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #in ...
- PyQt(Python+Qt)学习随笔：Designer中属性设置界面的属性字体使用粗黑体的含义
老猿Python博文目录 老猿Python博客地址 使用了好几个月的Designer,今天才发现属性编辑界面的属性名有的为粗而黑,有的则不是,如图: 稍微测试了一下,发现是对属性值进行过调整,不再是缺 ...
- YOLOv5 PyQt5（一起制作YOLOv5的GUI界面）
视频地址:[PyQt \YOLOv5\GUI]利用PyQt制作的YOLOv5GUI界面_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1ii4y1C75h ...
- qt开发linux界面软件,利用Qt Designer开发Qt界面
因为这篇文章主要是告诉大家如何利用QT Design来达到快速学习QT的.,所以您最也要做到:您需要有一台可以跑Linux的电脑或者Microsoft Windows的电脑足够的RAM和HardDis ...
最新文章
- 简单轻松学 Linux 之 awk
- django批量form表单处理
- 开源的恶果，程序员正在「自掘坟墓」
- 大四中软实习笔记20130226
- ASP.NET Core 基于角色的 JWT 令牌
- java 需要class interface 或enum_阿里P8教你Java注解与反射
- （转）使用Spring注解方式管理事务与传播行为详解
- Mysql登录默认密码
- win7系统安装SQL Server 2005开发版步骤详解
- markdown快速入门之有道云笔记七牛图床与极简图床共舞
- 钓鱼网站盯上加油卡充值
- linux设备常用缩略语
- 如何通过一封恶意邮件追踪幕后黑客组织
- os-level版本控制工具
- php汉字转区位码,PHP里实现汉字转区位码的示例代码_php
- 数学图形(1.3)旋轮线
- 施工监控php系统,GitHub - hanhq1711/monitor: php开源服务器监控系统
- 目前最顶级的多视角立体影像匹配算法
- HTMLCollection vs NodeList
- 解决vs2017调试出现脚本错误