这一章主要讲解一下布局的知识。
1，绝对位置布局
那首先先来了解一下绝对位置布局， 一看名字，顾名思义，就是空间的位置是固定的，是死的，是一成不变的。
绝对位置
程序员以像素为单位指定每个小部件的位置和大小。 当您使用绝对定位时，我们必须了解以下限制：
- 如果我们调整窗口大小，则小部件的大小和位置不会改变
- 各种平台上的应用可能会有所不同
- 在我们的应用程序中更改字体可能会损坏布局
- 如果我们决定改变我们的布局，我们必须彻底重做布局，这很浪费时间
这种布局有好处也有坏处，这些暂且不论，先来看一下效果如何 ：
这是没有采用布局的效果 ：
下面这个例子我们将小部件置于绝对坐标中。
那么，就让我们来一览源代码的真面目：
# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import QApplication, QMessageBox, QWidget, QPushButton
from PyQt5.QtGui import QIcon
from random import randint
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
self.setGeometry(200, 200, 480, 250)
self.setWindowTitle('我与PyQt5有个约会')
self.setWindowIcon(QIcon('myico.ico'))
self.scissorQBtn = QPushButton('剪刀',self)
self.scissorQBtn.setGeometry(100,180,50,50)
self.rockQBtn = QPushButton('石头',self)
self.rockQBtn.setGeometry(200,180,50,50)
self.paperQBtn = QPushButton('布',self)
self.paperQBtn.setGeometry(300,180,50,50)
self.scissorQBtn.clicked.connect(self.buttonclicked)
self.rockQBtn.clicked.connect(self.buttonclicked)
self.paperQBtn.clicked.connect(self.buttonclicked)
self.show()
def buttonclicked(self):
computer = randint(1,3)
player = 0
sender = self.sender()
if sender.text() == '剪刀':
player = 1
elif sender.text() == '石头':
player = 2
else:
player = 3
if player == computer:
QMessageBox.about(self, '结果', '平手')
elif player == 1 and computer == 2:
QMessageBox.about(self, '结果', '电脑：石头，电脑赢了！')
elif player == 2 and computer == 3:
QMessageBox.about(self, '结果', '电脑：布，电脑赢了！')
elif player == 3 and computer == 1:
QMessageBox.about(self,'结果','电脑：剪刀，电脑赢了！')
elif computer == 1 and player == 2:
QMessageBox.about(self,'结果','电脑：剪刀，玩家赢了！')
elif computer == 2 and player == 3:
QMessageBox.about(self,'结果','电脑：石头，玩家赢了！')
elif computer == 3 and player == 1:
QMessageBox.about(self,'结果','电脑：布，玩家赢了！')
# 关闭程序窗口
def closeEvent(self, event):
reply = QMessageBox.question(self, '确认', '确认退出吗', QMessageBox.Yes | QMessageBox.No, QMessageBox.No)
if reply == QMessageBox.Yes:
event.accept()
else:
event.ignore()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
2，箱式布局
QHBoxLayout和QVBoxLayout是基本的布局类，它们在水平和垂直方向上排列小部件。
想像一下，我们想在右下角放置三个按钮。 要创建这样一个布局，我们使用一个水平和一个垂直方框。 为了创建必要的空间，我们添加一个拉伸因子。
先来看一下箱式布局效果如何 ：
相关的源代码如下：
# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import QWidget, QPushButton, QApplication, QHBoxLayout, QVBoxLayout, QMessageBox
from PyQt5.QtGui import QIcon
from random import randint
class Example(QWidget):
def __init__(self):
super().__init__()
self.Init_UI()
def Init_UI(self):
self.setGeometry(300,300,480,250)
self.setWindowTitle('我与PyQt5有个约会')
self.setWindowIcon(QIcon('myico.ico'))
self.scissorQBtn = QPushButton('剪刀', self)
self.rockQBtn = QPushButton('石头', self)
self.paperQBtn = QPushButton('布', self)
self.scissorQBtn.clicked.connect(self.buttonclicked)
self.rockQBtn.clicked.connect(self.buttonclicked)
self.paperQBtn.clicked.connect(self.buttonclicked)
hbox = QHBoxLayout()
hbox.addStretch(1)
hbox.addWidget(self.scissorQBtn)
hbox.addWidget(self.rockQBtn)
hbox.addWidget(self.paperQBtn)
hbox.addStretch(1)
vbox = QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)
self.setLayout(vbox)
self.show()
def buttonclicked(self):
computer = randint(1,3)
player = 0
sender = self.sender()
if sender.text() == '剪刀':
player = 1
elif sender.text() == '石头':
player = 2
else:
player = 3
if player == computer:
QMessageBox.about(self, '结果', '平手')
elif player == 1 and computer == 2:
QMessageBox.about(self, '结果', '电脑：石头，电脑赢了！')
elif player == 2 and computer == 3:
QMessageBox.about(self, '结果', '电脑：布，电脑赢了！')
elif player == 3 and computer == 1:
QMessageBox.about(self,'结果','电脑：剪刀，电脑赢了！')
elif computer == 1 and player == 2:
QMessageBox.about(self,'结果','电脑：剪刀，玩家赢了！')
elif computer == 2 and player == 3:
QMessageBox.about(self,'结果','电脑：石头，玩家赢了！')
elif computer == 3 and player == 1:
QMessageBox.about(self,'结果','电脑：布，玩家赢了！')
# 关闭程序窗口
def closeEvent(self, event):
reply = QMessageBox.question(self, '确认', '确认退出吗', QMessageBox.Yes | QMessageBox.No, QMessageBox.No)
if reply == QMessageBox.Yes:
event.accept()
else:
event.ignore()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
app.exit(app.exec_())该示例在窗口的右下角放置了三个按钮。 当我们调整应用程序窗口大小时，它们会留在那里，我们同时使用一个HBoxLayout和一个QVBoxLayout。
self.scissorQBtn = QPushButton('剪刀', self)
self.rockQBtn = QPushButton('石头', self)
self.paperQBtn = QPushButton('布', self)我们新建三个按钮。
hbox = QHBoxLayout()
hbox.addStretch(1)
hbox.addWidget(self.scissorQBtn)
hbox.addWidget(self.rockQBtn)
hbox.addWidget(self.paperQBtn)
hbox.addStretch(1)创建一个水平框布局，并添加两个拉伸因子和三个按钮。这个拉伸在三个按钮之前增加了一个可伸缩的空间。
vbox = QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)水平布局放置在垂直布局中。垂直框中的拉伸因子将按钮的水平框推到窗口的底部。
self.setLayout(vbox)最后，我们设置窗口的主要布局。
3，网格布局
栅格布局将位于其中的窗口部件放入一个网状的栅格之中。QGridLayout需要将提供给它的空间划分成的行和列，并把每个窗口部件插入并管理到正确的单元格。
栅格布局是这样工作的：它计算了位于其中的空间，然后将它们合理的划分成若干个行（row）和列（column），并把每个由它管理的窗口部件放置在合适的单元之中，这里所指的单元（cell）即是指由行和列交叉所划分出来的空间。
坐标分布是这样的：
下面这个例子就是采用格栅布局制作的一个计算器界面，当然在功能上按下按钮只是能显示而已，不能进行具体的计算，后期我们会制作一个完整的计算器。
相关的源代码如下：
# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import QWidget, QPushButton, QApplication, QGridLayout, QLCDNumber, QMessageBox
from PyQt5.QtGui import QIcon
class Example(QWidget):
def __init__(self):
super().__init__()
self.Init_UI()
def Init_UI(self):
grid = QGridLayout()
self.setLayout(grid)
self.setGeometry(300,300,400,300)
self.setWindowTitle('我与PyQt5有个约会')
self.setWindowIcon(QIcon('myico.ico'))
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()
def Cli(self):
sender = self.sender().text()
ls = ['/', '*', '-', '=', '+']
if sender in ls:
self.lcd.display('A')
else:
self.lcd.display(sender)
# 关闭程序窗口
def closeEvent(self, event):
reply = QMessageBox.question(self, '确认', '确认退出吗', QMessageBox.Yes | QMessageBox.No, QMessageBox.No)
if reply == QMessageBox.Yes:
event.accept()
else:
event.ignore()
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)]
for position, name in zip(positions, names):
if name == '':
continue
button = QPushButton(name)
grid.addWidget(button, *position)
button.clicked.connect(self.Cli)创建了19个按钮并指定了具体的坐标位置。
使用addWidget（）方法创建并添加到布局中的按钮。同时当我们按下按钮的时候调用self.Cli()方法。
def Cli(self):
sender = self.sender().text()
ls = ['/', '*', '-', '=', '+']
if sender in ls:
self.lcd.display('A')
else:
self.lcd.display(sender)当我们按下按钮的时候我们会得到按钮上显示的名称，如果是操作符则在LCD上显示“A”（因为LCD的显示功能有限），否则显示我们按下的信息。
4，表单布局
QFormLayout管理输入型控件和关联的标签组成的那些Form表单。
QFormLayout是一个方便的布局类，其中的控件以两列的形式被布局在表单中。左列包括标签，右列包含输入控件，例如：QLineEdit、QSpinBox、QTextEdit等。
下面这个例子就是说明表单布局是怎么用的，效果如何。
相关的源代码如下：
# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import QWidget, QApplication, QFormLayout, QLabel, QLineEdit, QTextEdit, QMessageBox
from PyQt5.QtGui import QIcon
class Example(QWidget):
def __init__(self):
super().__init__()
self.Init_UI()
def Init_UI(self):
self.setGeometry(300,300,500,250)
self.setWindowTitle('我与PyQt5有个约会')
self.setWindowIcon(QIcon('myico.ico'))
formlayout = QFormLayout()
nameLabel = QLabel("姓名 ：")
nameLineEdit = QLineEdit("")
introductionLabel = QLabel("简介 ：")
introductionLineEdit = QTextEdit("")
formlayout.addRow(nameLabel,nameLineEdit)
formlayout.addRow(introductionLabel,introductionLineEdit)
self.setLayout(formlayout)
self.show()
# 关闭程序窗口
def closeEvent(self, event):
reply = QMessageBox.question(self, '确认', '确认退出吗', QMessageBox.Yes | QMessageBox.No, QMessageBox.No)
if reply == QMessageBox.Yes:
event.accept()
else:
event.ignore()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
app.exit(app.exec_())创建一个表单布局 ：
formlayout = QFormLayout()向表单中增加一行，内容是我们定义的小部件。
formlayout.addRow(nameLabel,nameLineEdit)
formlayout.addRow(introductionLabel,introductionLineEdit)今天的所射击的内容如下：
- 绝对位置
- 箱式布局
- 栅格布局
- 表单布局
这一节就到这里，下节再见。
扫一扫
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
