我与PyQt5有个约会系列教程（5）：了解一下布局是什么

最新推荐文章于 2023-02-16 15:20:41 发布

樊晓鑫

最新推荐文章于 2023-02-16 15:20:41 发布

阅读量244

点赞数

分类专栏： PyQt5

本文链接：https://blog.csdn.net/zhuzipan/article/details/107045095

版权

PyQt5 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

这一章主要讲解一下布局的知识。

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的显示功能有限），否则显示我们按下的信息。