上期我们介绍了PyQt5的事件与信号，主要涉及到了以下几个知识点：
今天我们主要讲解一下布局的知识
1
首先我们来看看采用布局和没有采用布局的对比效果
这是没有采用布局的
这是采用布局的
通过对比我们知道采用了布局之后能够让我们的程序在使用上更加美观，不会随着窗体的大小发生改变而改变，符合我们的使用习惯。
2
程序员以像素为单位指定每个小部件的位置和大小。 当您使用绝对定位时，我们必须了解以下限制：
如果我们调整窗口大小，则小部件的大小和位置不会改变
各种平台上的应用可能会有所不同
在我们的应用程序中更改字体可能会损坏布局
如果我们决定改变我们的布局，我们必须彻底重做布局，这很浪费时间
下面这个例子我们将小部件置于绝对坐标中
#coding = 'utf-8'
import sys
from PyQt5.QtWidgets import (QWidget, QPushButton, QApplication)
classExample(QWidget): def__init__(self): super().__init__() self.Init_UI()
defInit_UI(self): self.setGeometry(300,300,400,300) self.setWindowTitle('学点编程吧') bt1 = QPushButton('剪刀',self) bt1.move(50,250) bt2 = QPushButton('石头',self) bt2.move(150,250) bt3 = QPushButton('布',self) bt3.move(250,250) self.show()
if __name__ == '__main__': app = QApplication(sys.argv) ex = Example() app.exit(app.exec_())
执行效果如下：
我们使用move（）方法来定位我们的小部件。 在我们的例子中，这些是按钮。 我们通过提供x和y坐标来定位它们。 坐标系的开始位于左上角。 x值从左到右增长。 y值不变。
3
QHBoxLayout和QVBoxLayout是基本的布局类，它们在水平和垂直方向上排列小部件。
想像一下，我们想在右下角放置三个按钮。 要创建这样一个布局，我们使用一个水平和一个垂直方框。 为了创建必要的空间，我们添加一个拉伸因子。
#coding = 'utf-8'
import sys
from PyQt5.QtWidgets import (QWidget, QPushButton, QApplication, QHBoxLayout, QVBoxLayout)
classExample(QWidget): def__init__(self): super().__init__() self.Init_UI()
defInit_UI(self): self.setGeometry(300,300,400,300) self.setWindowTitle('学点编程吧') bt1 = QPushButton('剪刀', self) bt2 = QPushButton('石头', self) bt3 = QPushButton('布', self) hbox = QHBoxLayout() hbox.addStretch(1) hbox.addWidget(bt1) hbox.addWidget(bt2) hbox.addWidget(bt3) vbox = QVBoxLayout() vbox.addStretch(1) vbox.addLayout(hbox) self.setLayout(vbox) self.show()
if __name__ == '__main__': app = QApplication(sys.argv) ex = Example() app.exit(app.exec_())
执行效果如下：
该示例在窗口的右下角放置了三个按钮。 当我们调整应用程序窗口大小时，它们会留在那里，我们同时使用一个HBoxLayout和一个QVBoxLayout。
bt1 = QPushButton('剪刀', self)bt2 = QPushButton('石头', self)bt3 = QPushButton('布', self)
我们新建三个按钮
hbox = QHBoxLayout()hbox.addStretch(1)hbox.addWidget(bt1)hbox.addWidget(bt2)hbox.addWidget(bt3)
我们创建一个水平框布局，并添加一个拉伸因子和三个按钮。这个拉伸在三个按钮之前增加了一个可伸缩的空间。这将把它们推到窗口的右边。
vbox = QVBoxLayout()vbox.addStretch(1)vbox.addLayout(hbox)
水平布局放置在垂直布局中。垂直框中的拉伸因子将按钮的水平框推到窗口的底部。
self.setLayout(vbox)
最后，我们设置窗口的主要布局。
细心的同学可能会发现：addStretch(1)，这个函数如何确定其中的参数大小，这里简单的说一下。
addStretch函数的作用是在布局器中增加一个伸缩量，里面的参数表示QSpacerItem的个数，默认值为零，会将你放在layout中的空间压缩成默认的大小。例如用addStretch函数实现将QHBoxLayout的布局器的空白空间分配。
#coding = 'utf-8'
import sys
from PyQt5.QtWidgets import (QWidget, QPushButton, QApplication, QHBoxLayout)
classExample(QWidget): def__init__(self): super().__init__() self.Init_UI()
defInit_UI(self): self.setGeometry(300,300,400,300) self.setWindowTitle('学点编程吧') bt1 = QPushButton('剪刀', self) bt2 = QPushButton('石头', self) bt3 = QPushButton('布', self) hbox = QHBoxLayout() hbox.addStretch(1) #增加伸缩量 hbox.addWidget(bt1) hbox.addStretch(1)#增加伸缩量 hbox.addWidget(bt2) hbox.addStretch(1)#增加伸缩量 hbox.addWidget(bt3) hbox.addStretch(6)#增加伸缩量 self.setLayout(hbox) self.show()
if __name__ == '__main__': app = QApplication(sys.argv) ex = Example() app.exit(app.exec_())
执行效果如下：
其中四个addStretch()函数用于在button按钮间增加伸缩量，伸缩量的比例为1:1:1:6，意思就是将button以外的空白地方按设定的比例等分为9份并按照设定的顺序放入布局器中。
4
栅格布局将位于其中的窗口部件放入一个网状的栅格之中。QGridLayout需要将提供给它的空间划分成的行和列，并把每个窗口部件插入并管理到正确的单元格。
栅格布局是这样工作的：它计算了位于其中的空间，然后将它们合理的划分成若干个行（row）和列（column），并把每个由它管理的窗口部件放置在合适的单元之中，这里所指的单元（cell）即是指由行和列交叉所划分出来的空间。
坐标分布是这样的：
下面这个例子就是采用格栅布局制作的一个计算器界面，当然在功能上按下按钮只是能显示而已，不能进行具体的计算，后期我们会制作一个完整的计算器。
#coding = 'utf-8'
import sys
from PyQt5.QtWidgets import (QWidget, QPushButton, QApplication, QGridLayout, QLCDNumber)
classExample(QWidget): def__init__(self): super().__init__() self.Init_UI()
defInit_UI(self): grid = QGridLayout() self.setLayout(grid) self.setGeometry(300,300,400,300) self.setWindowTitle('学点编程吧-计算器') self.lcd = QLCDNumber() grid.addWidget(self.lcd,0,0,3,0) grid.setSpacing(10) names = ['Cls', 'Bc', '', 'Close',
'7', '8', '9', '/',
'4', '5', '6', '*',
'1', '2', '3', '-',
'0', '.', '=', '+'] positions = [(i,j) for i in range(4,9) for j in range(4,8)]
for position, name in zip(positions, names):
if name == '':
continue button = QPushButton(name) grid.addWidget(button, *position) button.clicked.connect(self.Cli) self.show()
defCli(self): sender = self.sender().text() ls = ['/', '*', '-', '=', '+']
if sender in ls: self.lcd.display('A')
else: self.lcd.display(sender)
if __name__ == '__main__': app = QApplication(sys.argv) ex = Example() app.exit(app.exec_())
执行的效果如下：
grid = QGridLayout()self.setLayout(grid)
创建QGridLayout的实例并将其设置为应用程序窗口的布局。
grid.addWidget(self.lcd,0,0,3,0) grid.setSpacing(10)
如果我们向窗格添加窗口小部件，我们可以提供窗口小部件的行跨度和列跨度。 在我们的例子中，我们使QLCDNumber小部件跨越4行。同时我们创建一个网格布局并在窗口小部件之间设置间距。
names = ['Cls', 'Bc', '', 'Close',
'7', '8', '9', '/',
'4', '5', '6', '*',
'1', '2', '3', '-',
'0', '.', '=', '+']positions = [(i,j) for i in range(4,9) for j in range(4,8)]
我们创建了19个按钮并指定了具体的坐标位置。
if name == '':
continue
button = QPushButton(name)grid.addWidget(button, *position)button.clicked.connect(self.Cli)
使用addWidget（）方法创建并添加到布局中的按钮。同时当我们按下按钮的时候调用self.Cli()方法
defCli(self): sender = self.sender().text() ls = ['/', '*', '-', '=', '+']
if sender in ls: self.lcd.display('A')
else: self.lcd.display(sender)
当我们按下按钮的时候我们会得到按钮上显示的名称，如果是操作符则在LCD上显示“A”（因为LCD的显示功能有限），否则显示我们按下的信息。
5
QFormLayout管理输入型控件和关联的标签组成的那些Form表单。
QFormLayout是一个方便的布局类，其中的控件以两列的形式被布局在表单中。左列包括标签，右列包含输入控件，例如：QLineEdit、QSpinBox、QTextEdit等。
下面这个例子就是说明表单布局是怎么用的
#coding = 'utf-8'
import sys
from PyQt5.QtWidgets import (QWidget, QPushButton, QApplication, QFormLayout, QLabel, QLineEdit, QTextEdit)
classExample(QWidget): def__init__(self): super().__init__() self.Init_UI()
defInit_UI(self): self.setGeometry(300,300,300,200) self.setWindowTitle('学点编程吧') formlayout = QFormLayout() nameLabel = QLabel("姓名") nameLineEdit = QLineEdit("") introductionLabel = QLabel("简介") introductionLineEdit = QTextEdit("") formlayout.addRow(nameLabel,nameLineEdit) formlayout.addRow(introductionLabel,introductionLineEdit) self.setLayout(formlayout) self.show()
if __name__ == '__main__': app = QApplication(sys.argv) ex = Example() app.exit(app.exec_())
执行的效果如下：
formlayout = QFormLayout()
创建一个表单布局
formlayout.addRow(nameLabel,nameLineEdit)formlayout.addRow(introductionLabel,introductionLineEdit)
向表单中增加一行，内容是我们定义的小部件。
6
然后我们来看看Qt设计师里面的布局操作
箱式布局-水平布局
箱式布局-垂直布局
栅格布局
表单布局
增加伸缩量
最后我们再简单的谈一下伙伴编辑。
什么什么？伙伴编辑，这货是干嘛用的？
意思就是设定label和lineEdit为伙伴关系后，label的Text为&t，那么程序运行后，按住Alt+t就相当于单击lineEdit。
用Qt设计师来看看如何实现，很简单。
当我们按住Alt+n时，光标就到姓名那栏去了；当我们按住Alt+i时，光标就到简介那栏去了。
7
我们总结一下今天的内容：
ok，今天就到这里，我们下期再约。
如果你想要本次教程中的相关源码，请关注微信公众号：学点编程吧，发送pyqt56，会自动得到相应的百度网盘下载链接。
更多资讯请关注：学点编程吧——你私人的计算机学习顾问！
欢迎各位童鞋留言！
----------------------------------------------------------------------------------------------------------------------
我们尊重原创，也注重分享，文章来源于微信公众号：学点编程吧，建议关注公众号查看原文。如若侵权请联系qter@qter.org。
----------------------------------------------------------------------------------------------------------------------
|
