文章目录

前言
一、四大布局
- 水平布局(HorizontalLayout)
- 垂直布局(VerticalLayout)
- 栅格布局(GridLayout)
- 表单布局(FromLayout)
- 延伸
- - 一、使得控件随窗口缩放而缩放的方法
  - 二、布局之上再设置布局
二、布局参数
三、ui文件转换成py文件
总结

前言

最近学习pyqt5来编写GUI界面，发现qtdesigner这个工具是在是太好用了，不仅能很方便的设计页面，还能很快捷的将设计出来的界面转换成代码。下面做一下学习笔记。

一、四大布局

打开qtdesigner工具，界面大致如下，左边是存放各种控件的控件库；中间是设计GUI界面的窗口；右边是设置各种控件参数的窗口。
在这里，首先做一个简易的登录界面。

然后快捷键ctrl+R就能够预览实际运行的效果

但这时候你会发现里面的控件不能随窗口的拉大而改变位置，这时候就要用到布局了。先介绍一下四大布局

水平布局(HorizontalLayout)

顾名思义，就是把控件水平排列

垂直布局(VerticalLayout)

顾名思义，就是把控件垂直排列

栅格布局(GridLayout)

大致排列好控件位置，设置布局之后会把控件更规范的排列，大小也会自动适配，缩放布局的时候里面的控件也会跟着缩放。

表单布局(FromLayout)

跟栅格布局差不多。

设置布局方法：
选中要进行布局的控件，然后点击布局即可

延伸

一、使得控件随窗口缩放而缩放的方法

需要给整个窗口加布局，点击窗口类，在选择布局

二、布局之上再设置布局

布局不仅可以给控件设置，也可以给布局设置。下面页面的布局是：先给每一行的两个控件设置为水平布局，然后给上水平布局设置垂直布局。这样也能达到表格布局的效果。

二、布局参数

点击布局之后会看到下面参数

layoutName：布局名
layoutLeftMargin：左间距，跟css里面的margin一样是外边距的意思
layoutRighttMargin：右间距
layoutTopMargin：顶部间距
layoutBottomMargin：底板间距
layoutHorizontalSpacing：控件之间的间距
分别对应下面位置的间距

layoutRowStretch：每一行的高度比
layoutColumnStretch：每一列的宽度比
如layoutColunmStretch设置为1,4，那么就相当于把布局的宽度分为5份，第一列占1份。第二列占4份

layoutRowStretch的设置也是同样的道理。

因为当前布局行方向和列方向都是只分成了两个部分，所以只有两个参数(a,b)，如果是分成3部分的话会有三个参数(a,b,c)，分成4部分就会有四个参数，以此类推。

三、ui文件转换成py文件

布局完之后，保存文件会发现是ui文件而不是py文件，它们之间要怎么转换呢？
这个不难，只要输入下面命令就可以了

pyuic5 -o demo.py demo.ui

demo.py

但生成的代码只是构建页面的代码，不能直接运行，在这里新建一个py文件引用界面代码并运行
demo_main.py

import sys
from PyQt5.QtWidgets import QMainWindow, QApplicationfrom demo import Ui_Formclass DemoMain(QMainWindow, Ui_Form):def __init__(self):# 初始化父类super().__init__()# 调用Ui_Form的setupUi()方法构建页面self.setupUi(self)if __name__ == '__main__':app = QApplication(sys.argv)# 实例化页面并展示demo_win = DemoMain()demo_win.show()sys.exit(app.exec_())

这样就可以运行了。

不过这里可能会有人有疑问：为什么不直接在生成的py文件里面写执行显示页面的代码呢？
因为一个界面可能会经过很多次修改，每次修改页面后生成的代码会覆盖之前的代码，那么其中的一些逻辑函数和执行函数又要根据新代码来重新编写。相信我，你并不希望这样。
ui对应的代码和逻辑代码分开的好处是，无论你如何修改ui，逻辑代码那边因为只是引入了ui代码，所以无需重新编写，只需要添加新的逻辑代码就好

总结

qtdesigner是个很强大的工具，可以帮助我们快速方便开发GUI界面。有什么问题欢迎在评论区留言。

qtdesigner页面布局相关推荐

unigui的页面布局使用
(unigui的页面布局还是很强大的,基本什么的排版都能搞好.前面部分为原文章翻译,翻译不一定很准确,就能看吧,后面有使用说明,有什么不明白的欢迎加我QQ(910300653)一起交流学习) 一.布局 ...
table和div在页面布局上应该注意的问题
在这篇文章开篇,我先纠正一下我之前写的一篇入门文章的错误,还是先引用一下比较官方的说法吧,避免再次误导各位新手 " <!DOCTYPE> 声明必须位于 HTML5 文档中的第一行 ...
xml信息管理系统_WPF信息管理系统项目实战教程二：使用XAML实现页面布局
首页面布局设计 XAML(Extensible Application Markup Language),可扩展应用程序标记语言的使用使得C#桌面应用程序开发前后端实现真正分离.前端人员可使用该标记语 ...
wordpress page显示未找到页面_通过Avada主题了解网页基本结构和页面布局
Avada主题是目前很流行的国外建站主题,我们在学习 avada主题建站初期有必要先了解网页基本结构和页面布局情况,这样对后面使用 avada主题建站,了解 avada主题Theme Options设 ...
使用 IntraWeb (5) - 页面布局之 TFrame
IW 对 TFrame(还是之前那个), 这在页面布局中很有用. 如果多个页面都有一个共同的部分(譬如页眉.页脚.菜单.边栏等), 可以将这些共同的部分放在一个 TFrame 中, 从而方便统一与修改 ...
深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em ...
企业网络推广——网站页面布局优化对于企业网络推广来说非同一般
一般站长们在进行网站优化期间都不会忽视对网站页面的优化,反而是将大部分精力都集中在网站首页的优化工作上,毕竟网站页面的优化可以为目标用户群体创建一个他们喜爱并且能够被搜索引擎顺利抓取.识别的页面,从而 ...
SharePoint 2013 入门教程之创建页面布局及页面
原文:SharePoint 2013 入门教程之创建页面布局及页面在SharePoint的使用过程中,页面布局和页面时很重要的两个概念,主要用于数据个性化展示,下面,我们简单介绍一下SharePoi ...
Ext Js MVC系列二利用Application和Viewport进行应用程序初始化和页面布局
通过上一篇我们已经对Ext js MVC框架开发有了一个大概的了解,这一篇将利用Application和Viewport进行应用程序的初始化和页面布局.我想从以下几方面来进行总结. 1,通过Ext.L ...
SiteMesh：一个优于Apache Tiles的Web页面布局、装饰框架
一.SiteMesh项目简介 OS(OpenSymphony)的SiteMesh是一个用来在JSP中实现页面布局和装饰(layout and decoration) 的框架组件,能够帮助网站开发人员较 ...

qtdesigner页面布局