四、PyQt5布局管理（绝对&相对、水平、垂直、格栅、表单）

最新推荐文章于 2024-07-03 12:00:29 发布
最新推荐文章于 2024-07-03 12:00:29 发布
阅读量1.9k 收藏 3
点赞数
文章标签： c/c++ python
原文链接：http://www.cnblogs.com/chuanxiaopang/p/10495452.html
版权

目录

一、绝对布局

二、盒布局

三、格栅布局

四、格栅布局跨行跨列显示

布局管理即设置窗体上各个控件的位置，对于新手来说，这是学习的难点。

布局管理根据绝对坐标是否变动分为绝对布局和相对布局两大类。采用相对布局的窗口在变大或缩小时，各控件的位置关系会保持固定比例做相应变动。而采用绝对布局的窗口变动时，空间位置不会变动。

而相对布局根据方式不同，又可以分为水平布局（QHBoxLayout）、垂直布局管理（QVBoxLayout）、栅格布局管理（QGridLayout）、表单布局管理（QFormLayout）。

一、绝对布局

绝对布局中以像素为单位区分元素的位置，衡量元素的大小，以设定坐标的方式精准的定位每个控件的位置，但是这种布局方式也有缺点：

  • 窗体控件无法根据窗口的位置和大小而变化；
  • 改变字体大小时可能会破坏布局；
  • 当分辨率有较大改变时，原有布局会破坏；
  • 在设计阶段，如果需要添加或删除控件，如果要调整控件位置，就需要全部调整。

下面是绝对布局的示例：

 1 import sys,os
 2 from PyQt5.QtWidgets import QWidget,QLabel,QApplication
 3 from PyQt5.QtGui import QIcon
 4 
 5 path = os.path.dirname(os.path.dirname( os.path.dirname(__file__)))
 6 
 7 class MyWindow(QWidget):
 8 
 9     def __init__(self):
10         super(MyWindow, self).__init__()
11         self.initUI()
12 
13     def initUI(self):
14         self.setGeometry(300,300,500,400)
15         self.setWindowIcon(QIcon(r'%s\4.图标素材\chuan.ico' % path))
16         self.setWindowTitle('绝对布局示例')
17 
18         lbl1 = QLabel('这是第一个标签',self)
19         lbl1.setGeometry(80,80,30,30)
20 
21         lbl2 = QLabel('这是第二个标签',self)
22         lbl2.move(150,150)
23 
24 
25 if __name__ == '__main__':
26     app = QApplication(sys.argv)
27     win = MyWindow()
28     win.show()
29     sys.exit(app.exec_())
绝对布局示例

效果图如下：

根据效果图可以发现：

  1. 在改变窗口长和宽的时候，两个标签的位置不会变动；
  2. 两个标签用不同的方法创建。第一个标签不仅设定了位置，还固定了大小，所以内容不能完全展示。

二、盒布局（Box Layout）

采用盒布局的窗口在改变窗体大小时，各控件会按相应比例自动调整。代码如下：

 1 import sys,os
 2 from PyQt5.QtWidgets import QApplication,QHBoxLayout,QVBoxLayout,QWidget,QPushButton
 3 from PyQt5.QtGui import QIcon
 4 
 5 path = os.path.dirname(os.path.dirname( os.path.dirname(__file__)))
 6 
 7 class MyWindow(QWidget):
 8 
 9     def __init__(self):
10         super(MyWindow, self).__init__()
11         self.initUI()
12 
13     def initUI(self):
14         self.setGeometry(300,300,500,400)
15         self.setWindowIcon(QIcon(r'%s/4.图标素材/chuan.ico' % path))
16         self.setWindowTitle('盒布局示例')
17 
18         okbutton = QPushButton('确认')  #设置“确认”按钮
19         cancelbutton = QPushButton('取消')  #设置“取消”按钮
20 
21         hbox = QHBoxLayout()  #布局实例化对象
22         hbox.addStretch(1)  #设置分配比例
23         hbox.addWidget(okbutton)  #添加“确认”按钮到窗体
24         hbox.addWidget(cancelbutton)
25 
26         vbox = QVBoxLayout()
27         vbox.addStretch(1)
28         vbox.addLayout(hbox)
29 
30         self.setLayout(vbox) #设置窗体布局
31 
32 if __name__ == '__main__':
33     app = QApplication(sys.argv)
34     win = MyWindow()
35     win.show()
36     sys.exit(app.exec_())
盒布局示例

盒布局中使用stretch函数在布局中增加了一个伸缩量，里面的参数表示QSpacerItem的个数，默认值为零（也可以理解为除去控件外，空白部分所占的比例），会将你放在layout中的空间压缩成默认的大小。而且在窗体缩小时，这个伸缩量也可以变小，直至为零。

 “确认”和“取消”两个按钮出现在窗体右下角。示例中实现的方法是首先创建一个垂直布局，按钮上部伸缩量占比为1，接着把这整个布局放在水平布局里，伸缩量占比为1.于是实现了给出的显示效果。

下面对addstretch方法做个补充讲解：

 1 import sys,os
 2 from PyQt5.QtWidgets import QApplication,QHBoxLayout,QVBoxLayout,QWidget,QPushButton
 3 from PyQt5.QtGui import QIcon
 4 
 5 path = os.path.dirname(os.path.dirname( os.path.dirname(__file__)))
 6 
 7 class MyWindow(QWidget):
 8 
 9     def __init__(self):
10         super(MyWindow, self).__init__()
11         self.initUI()
12 
13     def initUI(self):
14         self.setGeometry(300,300,500,300)
15         self.setWindowIcon(QIcon(r'%s/4.图标素材/chuan.ico' % path))
16         self.setWindowTitle('addstrtch示例')
17 
18         fir_button = QPushButton('按钮一')  #设置按钮一
19         sec_button = QPushButton('按钮二')  #设置按钮二
20         thir_button = QPushButton('按钮三')  #设置按钮三
21 
22         hbox = QHBoxLayout()
23         hbox.addStretch(1)
24         hbox.addWidget(fir_button)
25         hbox.addStretch(2)
26         hbox.addWidget(sec_button)
27         hbox.addStretch(3)
28         hbox.addWidget(thir_button)
29 
30         # vbox = QVBoxLayout()
31         # vbox.addStretch(1)
32         # vbox.addLayout(hbox)
33 
34         self.setLayout(hbox) #设置窗体布局
35 
36 if __name__ == '__main__':
37     app = QApplication(sys.argv)
38     win = MyWindow()
39     win.show()
40     sys.exit(app.exec_())
addstretch方法示例

使用addstretch方法分别给定了参数1、2、3，即在水平布局上，除去按钮部分外的空白区域，按照1：2：3的比例分配空间。下过如下图所示。

三、格栅布局

格栅布局是最常用的布局方式，下面我们通过模拟计算器界面的方式来学习格栅布局。

 1 import sys,os
 2 from PyQt5.QtWidgets import QApplication,QPushButton,QWidget,QGridLayout
 3 from PyQt5.QtGui import QIcon
 4 
 5 path = os.path.dirname(os.path.dirname(os.path.dirname(__file__)))
 6 
 7 class MyWindow(QWidget):
 8 
 9     def __init__(self):
10         super(MyWindow, self).__init__()
11         self.initUI()
12 
13     def initUI(self):
14         self.setWindowTitle('格栅布局示例')
15         self.setWindowIcon(QIcon(r'%s\4.图标素材\chuan.ico' % path))
16         self.setGeometry(600,300,500,400)
17 
18         names = ['On','Off','AC','/',
19                  '7','8','9','*',
20                  '4','5','6','-',
21                  '1','2','3','+',
22                  '0','00','.','=']
23 
24         positions = [(i,j) for i in range(5) for j in range(4)]
25 
26         grid = QGridLayout()
27         self.setLayout(grid)
28         for position,name in zip(positions,names):
29             button = QPushButton(name)
30             grid.addWidget(button,*position)
31 
32 
33 
34 if __name__ == '__main__':
35     app = QApplication(sys.argv)
36     win = MyWindow()
37     win.show()
38     sys.exit(app.exec_())
格栅布局示例

显示效果如下：

下面来分析代码

names = ['On','Off','AC','/',
                 '7','8','9','*',
                 '4','5','6','-',
                 '1','2','3','+',
                 '0','00','.','=']

names列表是各按键的名称。

positions = [(i,j) for i in range(5) for j in range(4)]

　这个列表生成式生成的列表类似一个矩阵，各元素的数值恰好是按钮在格栅布局中位置

        for position,name in zip(positions,names):
            button = QPushButton(name)
            grid.addWidget(button,*position)

　这里使用的zip函数。python3中为了减少内存，zip函数返回的是一个对象。如果要展示列表，可通过 list() 转换。

names = ['On','Off','AC','/',
                 '7','8','9','*',
                 '4','5','6','-',
                 '1','2','3','+',
                 '0','00','.','=']
positions = [(i,j) for i in range(5) for j in range(4)]
a = zip(names,positions)

print(a)
print(list(a))

显示效果如下：
<zip object at 0x0000020EFF489508>
[('On', (0, 0)), ('Off', (0, 1)), ('AC', (0, 2)), ('/', (0, 3)), ('7', (1, 0)), ('8', (1, 1)), ('9', (1, 2)), ('*', (1, 3)), ('4', (2, 0)), ('5', (2, 1)), ('6', (2, 2)), ('-', (2, 3)), ('1', (3, 0)), ('2', (3, 1)), ('3', (3, 2)), ('+', (3, 3)), ('0', (4, 0)), ('00', (4, 1)), ('.', (4, 2)), ('=', (4, 3))]

　四、格栅布局跨行跨列显示

虽然格栅布局最常用，但是实际窗口的控件往往是大小不一的，单个控件跨行跨列很常见，下面来介绍下跨行跨列的情况。

 1 import sys,os
 2 from PyQt5.QtWidgets import QWidget,QPushButton,QLabel,QLineEdit,QApplication,QGridLayout
 3 from PyQt5.QtGui import QIcon, QPixmap
 4 
 5 path = os.path.dirname(os.path.dirname(os.path.dirname(__file__)))
 6 
 7 class MyWindow(QWidget):
 8 
 9     def __init__(self):
10         super().__init__()
11         self.initUI()
12 
13     def initUI(self):
14         self.setWindowTitle('跨行跨列布局示例')
15         self.setWindowIcon(QIcon(r'%s\4.图标素材\chuan.ico' % path))
16         self.setGeometry(600,300,450,300)
17 
18         lbl_image = QLabel() 
19         png = QPixmap(r'%s\4.图标素材\cartoon1.ico' % path)
20         lbl_image.setPixmap(png)
21         lbl_image.setScaledContents(True) #图片自适应标签大小
22 
23         lbl_user = QLabel('账号：')  #设置标签
24         lbl_pwd = QLabel('密码：')
25         okbutton = QPushButton('确认')  #设置按钮
26         cancelbutton = QPushButton('取消')
27         lineedit_user = QLineEdit()  #设置单行文本框
28         lineedit_pwd = QLineEdit()
29 
30         grid = QGridLayout()
31         self.setLayout(grid)
32         grid.setSpacing(10)   #间距为10
33 
34         grid.addWidget(lbl_image,1,1,3,1)
35         grid.addWidget(lineedit_user,1,2,1,2)
36         grid.addWidget(lineedit_pwd,2,2,1,2)
37         grid.addWidget(lbl_user,1,4)
38         grid.addWidget(lbl_pwd,2,4)
39         grid.addWidget(okbutton,3,2,1,1)
40         grid.addWidget(cancelbutton,3,3,1,1)
41 
42 if __name__ == '__main__':
43     app = QApplication(sys.argv)
44     win = MyWindow()
45     win.show()
46     sys.exit(app.exec_())
跨行跨列示例

显示效果如下：

下面来分析代码：

grid.addWidget(lbl_image,1,1,3,1)

　addwidget方法第一个参数是添加的控件对象，后面的（1，1）表示位置坐标为（1，1），即控件左上角坐标为（1，1）。这里的1并不是以像素为单位，而是以行和列为单位，（1，1）即第一行第一列。最后的（3，1）意思是这个控件占三行1列。下面用表格和图片来表示布局方式

图片

（3行1列）

单行文本框1“账号”标签
单行文本框2“密码”标签
“确认”按钮“取消”按钮 
grid.setSpacing(10)

　即各控件之间的上下间距为10（以像素为单位）。同理还有grid.setMargin（int）为设置控件之间的左右间距。

 

转载于:https://www.cnblogs.com/chuanxiaopang/p/10495452.html

weixin_34123613
关注
PyQt5最全69 布局之move方法绝对布局
爱吃肉的牛牛的博客
12-14 1183
PyQt5最全69 布局之move方法绝对布局 import sys from PyQt5.QtWidgets import * class AbsoluteLayout(QWidget): """ 绝对布局: move 方法 通过x, y坐标来控制控件位置 """ def __init__(self): super(AbsoluteLayout, self).__init__() self.setWindowTitle('绝对布局
pyqt5 学习笔记四 （QBoxLayout）垂直布局器与水平布局器
weixin_40581859的博客
08-08 955
pyqt5 QBoxLayout布局 垂直布局 水平布局
PyQT5 （六十七） PyQt5直接用代码布局 --绝对布局 AbsoluteLayout
Ggome的博客
10-26 720
PyQt5直接用代码布局 --绝对布局 AbsoluteLayout import sys from PyQt5.QtGui import QIcon from PyQt5.QtWidgets import QHBoxLayout, QPushButton, QMessageBox, QApplication, QVBoxLayout, QWidget, \ QLabel ''' PyQt5直接用代码布局 --绝对布局 AbsoluteLayout ''' class Absolut..
PyQt5水平布局--只需5分钟带你搞懂
最新发布
m0_71212744的博客
07-03 564
PyQt5水平布局（QHBoxLayout）是一种在GUI应用程序中用于组织和排列控件的布局方式。它允许开发者将控件在水平方向上从左到右依次排列，非常适合于需要并排显示控件的场景，如工具栏、水平菜单等。
PyQt5入门（十八）布局(上)
长夜漫漫，无心睡眠
02-12 1428
人外有人，天外有天
【pyqt5】课时16.在QtDesigner中使用绝对布局【pyqt5课程系列】
knocky的博客
05-03 550
视频链接 https://www.bilibili.com/video/BV154411n79k?p=15 课程重点：
Pyqt5系列(九)-基本布局管理
热门推荐
追逐阳光的风
09-17 3万+
GUI的布局管理是GUI开发中非常重要的一个环节，一个设计良好的GUI界面，其对应的布局排布也是非常必须的。其中布局管理就是要管理窗口中部件的放置。常用两种方式来实现布局：绝对位置 布局（Absolute Layout）实现，布局类（QLayout）实现。
PyQt5的相对布局管理的实现
09-16
在`layout_init()`函数中，我们创建了一个垂直布局`wl`作为全局布局，然后在其中嵌套了三个水平布局`hlayout1`、`hlayout2`和`hlayout3`。水平布局用于放置一排按钮，`setSpacing(0)`是为了消除按钮之间的间距，`...
PyQt5每天必学之布局管理
09-20
PyQt5是基于Python的GUI应用程序开发工具包，它提供了丰富的控件以及布局管理功能，这些功能使得开发者能够轻松地设计出具有优良交互界面的应用程序。在PyQt5中，布局管理是控制应用程序中各个控件位置和大小的核心...
Pyqt5自适应布局实例
01-20
在pyqt5中要做到自适应布局，必须应用Layout类 下面列出类似于 html 中 float 功能的布局方法： 实现原理： PyQt5中的布局中，stretch 属性类似于一个可自适应的空白布局。会尽可能将周围的组件布局向外挤压 from ...
自学PyQt5（二）| 窗口的布局管理
NumLock桌
06-26 893
在自学PyQt5（一）|用两种编程风格创建一个基础窗口中，我们对窗口的初始化与循环方法做了了解，并使用了一些基础的对窗口设置的方法，也了解了使用PyQt5的代码风格。这篇文章中我们记录一些PyQt5窗口布局管理的内容。 文章目录绝对布局绝对布局的例子绝对布局的限制布局类框布局代码示例代码分析表格布局代码示例 绝对布局 绝对布局的例子 对窗口布局最简单的方法是绝对布局法，即通过指定像素的方法进行控件布局。我们来看一个例子： import sys from PyQt5.QtWidgets import QA.
PyQt5: chapter6-使用水平布局
air_shark
05-01 1546
实例 创建基于Dialog without Buttons模板的窗口 添加两个Label，两个Line Edit，一个Push Button部件 设定Label部件的text为Name和Email Address 设定Push Button的text为Submit 左击text为Name的Label，然后按照Ctrl, 左击右侧的Line Edit部件，右键选择“布局”，选择水平布局 ...
PyQt5的布局管理
xy_optics的博客
05-10 2099
在PyQt5中，垂直布局（QVBoxLayout）和水平布局（QHBoxLayout）是常用的布局管理器，用于在GUI应用程序中组织和布置窗口部件。运行结果如下，可以看到，button1和button2外的空白部分被分成五份，第一个Strech和第二个Strech各占一份，第三个Strech占三份。用这个例子再去理解上面标注黄色的部分就不难理解了。运行上面代码，我们可以得到如下窗口，其中Button1和Button2是垂直布局，然后Button3和垂直布局（Button1和Button2）又形成水平布局。
PyQt5入门学习笔记(二)——布局
silent1cat的博客
05-07 350
PyQt5布局 1.水平布局(QHBoxLayout) 2.竖直(QVBoxLayout) 3.网格布局(QGridLayout) 4.表单布局(QFormLayout) QGridLayout QGridLayout类在窗口网格中放置控件。QGridLayout获取可用空间并且将其划分为行和列，然后将每个窗口控件放入指定的单元格中。 QFormLayout QFormLayout表单布局管理输入型的控件和关联的标签组成的表单；其中的控件以两列的形式存在于表单中。左列包括标签用作提示输入信息；右列包括输入
PyQt5 布局
十三
04-23 560
绝对位置 程序员以像素为单位指定每个小部件的位置和大小。 当您使用绝对定位时，我们必须了解以下限制： 如果我们调整窗口大小，则小部件的大小和位置不会改变 各种平台上的应用可能会有所不同 在我们的应用程序中更改字体可能会损坏布局 如果我们决定改变我们的布局，我们必须彻底重做布局，这很浪费时间 栗子1 我们将小部件置于绝对坐标中 #coding = 'utf-8' impor...
【PyQt5 学习记录】003：水平布局和获取屏幕尺寸
weixin_30888413的博客
10-11 378
1 #!/usr/bin/python3 2 # -*- coding:utf-8 -*- 3 4 import sys 5 from PySide2.QtWidgets import (QApplication, 6 QWidget, 7 Q...
pyqt5学习（三） 布局管理
Kelisiya
11-21 2103
布局有两种:绝对定位和PyQt5的布局类 1.绝对定位的意思很明显，就是给定坐标让它出现在某个位置： import sys from PyQt5.QtWidgets import QWidget,QLabel,QApplication class Example(QWidget): def __init__(self): super().__init__() ...
【pyqt5界面化开发-4】垂直布局/水平布局+‘套娃‘布局
08-29 1134
【pyqt5界面化工具开发】布局器的使用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值