1 PyQt5的窗口布局

布局管理是我們?nèi)绾螌⑿〔考胖迷趹?yīng)用程序窗口上的方式。我們可以使用絕對(duì)定位或布局類(lèi)來(lái)放置我們的小部件。使用布局管理器管理布局是組織小部件的首選方式。

1.1 絕對(duì)位置

程序員以像素為單位指定每個(gè)小部件的位置和大小。當(dāng)您使用絕對(duì)定位時(shí)，我們要了解以下限制：

• 如果我們調(diào)整窗口大小，小部件的大小和位置不會(huì)改變
• 應(yīng)用程序在不同平臺(tái)上可能看起來(lái)不同
• 在我們的應(yīng)用程序中更改字體可能會(huì)破壞布局
• 如果我們決定改變我們的布局，我們必須完全重做我們的布局，這既繁瑣又耗時(shí)

以下示例以絕對(duì)坐標(biāo)定位小部件。

absolute.py

#!/usr/bin/python""" ZetCode PyQt5 tutorialThis example shows three labels on a window using absolute positioning.Author: Jan Bodnar Website: zetcode.com """import sys from PyQt5.QtWidgets import QWidget, QLabel, QApplicationclass Example(QWidget):def __init__(self):super().__init__()self.initUI()def initUI(self):lbl1 = QLabel('ZetCode', self)lbl1.move(15, 10)lbl2 = QLabel('tutorials', self)lbl2.move(35, 40)lbl3 = QLabel('for programmers', self)lbl3.move(55, 70)self.setGeometry(300, 300, 250, 150)self.setWindowTitle('Absolute')self.show()def main():app = QApplication(sys.argv)ex = Example()sys.exit(app.exec_())if __name__ == '__main__':main()

我們使用 move 方法來(lái)定位我們的小部件。在我們的例子中，這些是標(biāo)簽。我們通過(guò)提供 x 和 y 坐標(biāo)來(lái)定位它們。坐標(biāo)系的起點(diǎn)在左上角。 x 值從左到右增長(zhǎng)。 y 值從上到下增長(zhǎng)。

lbl1 = QLabel('ZetCode', self) lbl1.move(15, 10)

標(biāo)簽小部件位于 x=15 和 y=10。

Figure: Absolute positioning

1.2 用布局QHBoxLayout設(shè)定窗口位置

QHBoxLayout 和 QVBoxLayout 是水平和垂直排列小部件的基本布局類(lèi)。

想象一下，我們想在右下角放置兩個(gè)按鈕。要?jiǎng)?chuàng)建這樣的布局，我們使用一個(gè)水平框和一個(gè)垂直框。為了創(chuàng)造必要的空間，我們添加了一個(gè)拉伸因子。

box_layout.py

#!/usr/bin/python""" ZetCode PyQt5 tutorialIn this example, we position two push buttons in the bottom-right corner of the window.Author: Jan Bodnar Website: zetcode.com """import sys from PyQt5.QtWidgets import (QWidget, QPushButton,QHBoxLayout, QVBoxLayout, QApplication)class Example(QWidget):def __init__(self):super().__init__()self.initUI()def initUI(self):okButton = QPushButton("OK")cancelButton = QPushButton("Cancel")hbox = QHBoxLayout()hbox.addStretch(1)hbox.addWidget(okButton)hbox.addWidget(cancelButton)vbox = QVBoxLayout()vbox.addStretch(1)vbox.addLayout(hbox)self.setLayout(vbox)self.setGeometry(300, 300, 300, 150)self.setWindowTitle('Buttons')self.show()def main():app = QApplication(sys.argv)ex = Example()sys.exit(app.exec_())if __name__ == '__main__':main()

該示例在窗口的右下角放置了兩個(gè)按鈕。當(dāng)我們調(diào)整應(yīng)用程序窗口的大小時(shí)，它們會(huì)留在那里。我們同時(shí)使用 HBoxLayout 和 QVBoxLayout。

okButton = QPushButton("OK") cancelButton = QPushButton("Cancel")

Here we create two push buttons.

hbox = QHBoxLayout() hbox.addStretch(1) hbox.addWidget(okButton) hbox.addWidget(cancelButton)

我們創(chuàng)建一個(gè)水平框布局并添加一個(gè)拉伸因子和兩個(gè)按鈕。拉伸在兩個(gè)按鈕之前添加了一個(gè)可拉伸的空間。這會(huì)將它們推到窗口的右側(cè)。

vbox = QVBoxLayout() vbox.addStretch(1) vbox.addLayout(hbox)

水平布局放置在垂直布局中。垂直框中的拉伸因子會(huì)將帶有按鈕的水平框推到窗口底部。

self.setLayout(vbox) 最后，我們?cè)O(shè)置窗口的主要布局。

Figure: Buttons

1.3 網(wǎng)格式QGridLayout

QGridLayout 是最通用的布局類(lèi)。它將空間劃分為行和列。

calculator.py

#!/usr/bin/python""" ZetCode PyQt5 tutorialIn this example, we create a skeleton of a calculator using QGridLayout.Author: Jan Bodnar Website: zetcode.com """import sys from PyQt5.QtWidgets import (QWidget, QGridLayout,QPushButton, QApplication)class Example(QWidget):def __init__(self):super().__init__()self.initUI()def initUI(self):grid = QGridLayout()self.setLayout(grid)names = ['Cls', 'Bck', '', 'Close','7', '8', '9', '/','4', '5', '6', '*','1', '2', '3', '-','0', '.', '=', '+']positions = [(i, j) for i in range(5) for j in range(4)]for position, name in zip(positions, names):if name == '':continuebutton = QPushButton(name)grid.addWidget(button, *position)self.move(300, 150)self.setWindowTitle('Calculator')self.show()def main():app = QApplication(sys.argv)ex = Example()sys.exit(app.exec_())if __name__ == '__main__':main()

在我們的示例中，我們創(chuàng)建了一個(gè)按鈕網(wǎng)格。

grid = QGridLayout() self.setLayout(grid)

創(chuàng)建 QGridLayout 的實(shí)例并將其設(shè)置為應(yīng)用程序窗口的布局。

names = ['Cls', 'Bck', '', 'Close','7', '8', '9', '/','4', '5', '6', '*','1', '2', '3', '-','0', '.', '=', '+']

這些是稍后用于按鈕的標(biāo)簽。

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

我們?cè)诰W(wǎng)格中創(chuàng)建一個(gè)位置列表。

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

使用 addWidget 方法創(chuàng)建按鈕并將其添加到布局中。

Figure: Calculator skeleton

1.4 案例

小部件可以跨越網(wǎng)格中的多列或多行。在下一個(gè)示例中，我們將對(duì)此進(jìn)行說(shuō)明。

review.py

#!/usr/bin/python""" ZetCode PyQt5 tutorialIn this example, we create a bit more complicated window layout using the QGridLayout manager.Author: Jan Bodnar Website: zetcode.com """import sys from PyQt5.QtWidgets import (QWidget, QLabel, QLineEdit,QTextEdit, QGridLayout, QApplication)class Example(QWidget):def __init__(self):super().__init__()self.initUI()def initUI(self):title = QLabel('Title')author = QLabel('Author')review = QLabel('Review')titleEdit = QLineEdit()authorEdit = QLineEdit()reviewEdit = QTextEdit()grid = QGridLayout()grid.setSpacing(10)grid.addWidget(title, 1, 0)grid.addWidget(titleEdit, 1, 1)grid.addWidget(author, 2, 0)grid.addWidget(authorEdit, 2, 1)grid.addWidget(review, 3, 0)grid.addWidget(reviewEdit, 3, 1, 5, 1)self.setLayout(grid)self.setGeometry(300, 300, 350, 300)self.setWindowTitle('Review')self.show()def main():app = QApplication(sys.argv)ex = Example()sys.exit(app.exec_())if __name__ == '__main__':main()

我們創(chuàng)建一個(gè)窗口，其中包含三個(gè)標(biāo)簽、兩個(gè)行編輯和一個(gè)文本編輯小部件。布局是使用 QGridLayout 完成的。

grid = QGridLayout() grid.setSpacing(10)

我們創(chuàng)建一個(gè)網(wǎng)格布局并設(shè)置小部件之間的間距。

grid.addWidget(reviewEdit, 3, 1, 5, 1)

如果我們將小部件添加到網(wǎng)格中，我們可以提供小部件的行跨度和列跨度。在我們的例子中，我們將 reviewEdit 小部件設(shè)置為 5 行。

Figure: Review example

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的PyQt5教程7：布局Layout管理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。