一篇文章让你读懂PyQt5布局管理,绝对干货
PyQt5的界面布局主要有两种方法:绝对定位和局部类。在PyQt5中有四种布局方式:水平布局、垂直布局、网格布局、表单布局。还有两种布局方法:addLayout和addWidget,其中addLayout用于在布局中插入子布局,addWidget用于在布局中插入控件。
- 垂直布局:控件默认按照从上到下的顺序进行纵向添加。
- 水平布局:控件默认按照从左到右的顺序进行横向添加。
- 栅格布局:将窗口分为若干行(row)和列(column)。
- 表单布局:控件以两列的形式布局在窗口中,左边为标签,右边为输入控件。
使用布局管理器
- 绝对布局 这个就不详细说明了,使用QWidget的move、setGeometry等方法,直接设置其在窗口中的位置。
- 盒子布局(QHBoxLayout 水平布局、QVBoxLayout 垂直布局)
方法:
- stretch(伸缩量),只适用于QBoxLayout布局方式,控件和窗口会随着伸缩量的变大而增加
- alignment,指定对齐方式
- addLayout(self, QLayout, stretch=0) 在窗口的右边添加布局,使用stretch(伸缩量)进行伸缩,默认为0
- addWidget(self, QWidget, stretch, Qt.Alignment) 在布局中添加控件。
- QGridLayout 栅格布局
方法:
- addLayout(QLayout, row, column, Qt.Alignment) 在栅格布局的行(row)、列(column)位置添加新的布局,并设置对齐方式
- addLayout(QLayout, row, column, rowSpan, columnSpan, Qt.Alignment) 在栅格布局中新的布局,从行(row)、列(column)开始,占据rowSpan行、columnSpan列
- addWidget(QWidget, row, column, Qt.Alignment) 在栅格布局的行(row)、列(column)中添加窗口控件,
- addWidget(QWidget, fromRow, fromColumn, rowSpan, columnSpan, Qt.Alignment) 在栅格布局中添加窗口控件,从行(row)、列(column)开始,占据rowSpan行、columnSpan列
- setRowStretch(row, stretch) 在行(row)处添加伸缩量
- setColumnStretch(column, stretch) 在列(column)处添加伸缩量
- QFormLayout 表单布局
方法:
- addRow(QWidget, QWidget)
- addRow(QWidget, QLayout)
- addRow(str, QWidget)
- addRow(str, QLayout) 以上在表单布局最后添加一行数据,设置表单的标签和控件
- addRow(QWidget)
- addRow(QLayout) QWidget和QLayout添加在最后一行,并占据两列宽度
- insertRow(row, QWidget, QWidget)
- insertRow(row, QWidget, QLayout)
- insertRow(row, str, QWidget)
- insertRow(row, str, QLayout) 在指定行添加标签和控件
- insertRow(row, QWidget)
- insertRow(row, QLayout) 在指定行添加控件,并占据两列宽度
布局对齐方式:
参数 |
描述 |
---|---|
QtCore.Qt.AlignLeft |
水平方向居左对齐 |
QtCore.Qt.AlignRight |
水平方向居右对齐 |
QtCore.Qt.AlignCenter |
水平方向居中对齐 |
QtCore.Qt.AlignJustify |
水平方向两端对齐 |
QtCore.Qt.AlignTop |
垂直方向靠上对齐 |
QtCore.Qt.AlignBottom |
垂直方向靠下对齐 |
QtCore.Qt.AlignVCenter |
垂直方向居中对齐 |
addSpacing(self, int) 设置各控件的上下间距,通过该方法可以增加额外的控件
addStretch(self, int) 分配布局大小比例
insertStretch(index, stretch = 0) 在指定控件间隔处添加布局比例
insertSpacing(index, size) 在指定控件间隔处设置间隔大小
addStretch是按照比例来调整界面布局,在页面布局中使用广泛,所以我们要使用一定的篇幅来进行代码测试。 使用addStretch,我们可以实现各种对齐方式,而且更加灵活。
import sys
from PyQt5.QtWidgets import QtWidget, QPushButton, QHBoxLayout, QVBoxLayout
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
layout = QHBoxLayout()
layout.addWidget(QPushButton(str(1))
layout.addWidget(QPushButton(str(2))
self.setLayout(layout)
self.setGeometry(300, 300, 400, 100)
self.setWindowTitle("Buttons")
if __name__ == "__main__":
app = QtWidget.QApplication(sys.argv)
ex = Example()
ex.show()
sys.exit(app.exec_())
默认是所有控件撑满整个布局文件
图1
- 水平居左对齐 ~ QtCore.Qt.AlignLeft
def initUI(self):
layout = QHBoxLayout()
layout.addWidget(QPushButton(str(1))
layout.addWidget(QPushButton(str(2))
layout.addStretch(1) # 新增这一行
......
在两个控件后增加这一行,相当于水平布局中存在:按钮1-按钮2-stretch,此时addStretch的参数只要大于0,则表示占满整个布局最后一部分,前面的控件显示为正常大小,不要拉伸。
图2
- 水平居右对齐 ~ QtCore.Qt.AlignRight
def initUI(self):
layout = QHBoxLayout()
layout.addStretch(1) # 新增这一行在控件前面
layout.addWidget(QPushButton(str(1))
layout.addWidget(QPushButton(str(2))
......
这一行加入到布局中所有控件之前,相当于水平布局中存在:stretch-按钮1-按钮2,表示占满整个布局的最开始部分,后面的控件显示为正常大小,不要拉伸。
图3
- 水平居中对齐 ~ QtCore.Qt.AlignCenter
def initUI(self):
layout = QHBoxLayout()
layout.addStretch(1) # 前面增加一行
layout.addWidget(QPushButton(str(1))
layout.addWidget(QPushButton(str(2))
layout.addStretch(1) #后面增加一行
......
stretch-按钮1-按钮2-stretch,表示左右两边充满,控件占据中间位置
图4
注意:当一个布局中出现多个addStretch时,后面的参数就有意义了,其表示整个布局的大小减去控件总大小进行n等份分配。例如:
def initUI(self):
layout = QHBoxLayout()
layout.addStretch(1) # 注意1
layout.addWidget(QPushButton(str(1))
layout.addWidget(QPushButton(str(2))
layout.addStretch(3) # 注意2
表示除去控件1、控件2的宽度,剩余部分四等份,前面占据一份,最后面占据三份
图5
- 水平两端对齐 ~ QtCore.Qt.AlignJustify
def initUI(self):
layout = QHBoxLayout()
layout.addWidget(QPushButton(str(1))
layout.addStretch(1) # 添加行
layout.addWidget(QPushButton(str(2))
图6
- 垂直顶部对齐 ~ QtCore.Qt.AlignTop
def initUI(self):
layout = QVBoxLayout()
layout.addWidget(QPushButton(str(1))
layout.addWidget(QPushButton(str(2))
layout.addStretch(1) # 添加行
图7
- 垂直底部对齐 ~ QtCore.Qt.AlignBottom
def initUI(self):
layout = QVBoxLayout()
layout.addStretch(1) # 添加行
layout.addWidget(QPushButton(str(1))
layout.addWidget(QPushButton(str(2))
图8
- 垂直居中对齐 ~ QtCore.Qt.AlignVCenter
def initUI(self):
layout = QVBoxLayout()
layout.addStretch(1) # 添加行
layout.addWidget(QPushButton(str(1))
layout.addWidget(QPushButton(str(2))
layout.addStretch(1) # 添加行
图9
- 垂直两端对齐
def initUI(self):
layout = QVBoxLayout()
layout.addWidget(QPushButton(str(1))
layout.addStretch(1) # 添加行
layout.addWidget(QPushButton(str(2))
图10
如果要进行组合布局,例如左上角、右下角等,如下:
def initUI(self):
layout1 = QHBoxLayout()
layout1.addWidget(QPushButton(str(1))
layout1.addWidget(QPushButton(str(2))
layout1.addStretch(1) # 水平居左
layout2 = QVBoxLayout()
layout2.addLayout(layout1)
layout2.addStretch(1) # 垂直顶部对齐
self.setLayout(layout2)
......
图11
addSpacing
addSpacing是设置控件之间的间距。就按照图1的布局及代码进行演示。
def initUI(self):
layout = QHBoxLayout()
layout.addWidget(QPushButton(str(1))
layout.addSpacing(100)
layout.addWidget(QPushButton(str(2))
图12
间距设置可以放置在任何地方,对于调整控件位置十分有效。相当于在控件之间添加了一个空的控件。详细的用法与addStrech类似,参考以上使用即可。
- 【Java】泛型学习笔记
- 读写文件具体操作
- 【算法】赫夫曼树(Huffman)的构建和应用(编码、译码)
- ERROR 1396 (HY000): Operation CREATE USER faile...
- hive安装后测试
- 【算法】论平衡二叉树(AVL)的正确种植方法
- 【JavaScript】 JS面向对象的模式与实践
- log4j:ERROR Failed to load driver
- 前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例
- 前端MVC Vue2学习总结(六)——axios与跨域HTTP请求、Lodash工具库
- spring之config.xml完整版示例
- 前端MVC Vue2学习总结(五)——表单输入绑定、组件
- 【HCTF】2017部分Web出题思路详解
- 前端MVC Vue2学习总结(四)——条件渲染、列表渲染、事件处理器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- FPGA设计心得(10)关于行为仿真的一点观点
- 一、Axios基础
- 二、fetch中的基础语法
- Laradock 运行 Nuxt 的一些问题
- Spring缓存注解@Cacheable、@CacheEvict、@CachePut
- 微信小程序设置请求超时
- SAP CRM One Order函数CREATE_OW的设计原理
- 决策树(decision tree)
- 寻找质数—埃式筛法
- 语义分割之Dice Loss深度分析
- SAP CRM One Order函数SAVE_EC的设计原理
- SAP CRM One Order函数CHANGE_OW的设计原理
- 关于checkpoint你可能不知道的事
- SAP CRM One Order函数CRM_Object_FILL_OW的设计原理
- SAP CRM One Order header extension的缓存机制设计原理