PyQt5でレイアウトするには、絶対配置とレイアウトクラスの2つの方法があります。
次に、PyQt5のページレイアウトを紹介します。これは主に絶対位置とレイアウトに分けられます。
1.絶対測位
プログラムは、各コントロールの位置とサイズ(ピクセル単位)を指定します。
絶対測位には次の制限があります。
- ウィンドウのサイズが変更されても、コントロールのサイズと位置は変わりません
- アプリはさまざまなプラットフォームで異なって見えます
- フォントを変更すると、アプリケーションのレイアウトが変更されます
- レイアウトを変更する場合は、レイアウトを完全にやり直す必要があります
例えば:
import sys
from PyQt5.QtWidgets import QWidget, QLabel, QApplication
class 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()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
この例では、3つのラベルを定義し、moveによってそれらを対応する位置に移動します。
ウィンドウのサイズをどのように変更しても、サイズと位置は変わりません。
2.レイアウトクラス
1.ボックスレイアウトBoxlayout
QHBoxLayoutとQVBoxLayoutをそれぞれ使用して、水平レイアウトと垂直レイアウトを作成します。
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")
testButton = QPushButton("test")
hbox = QHBoxLayout()
#hbox.addStretch(1)
hbox.addWidget(okButton)
#hbox.addStretch(2)
hbox.addWidget(cancelButton)
#hbox.addStretch(1)
hbox.addWidget(testButton)
vbox = QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)
self.setLayout(vbox)
self.setGeometry(300, 300, 300, 150)
self.setWindowTitle('Buttons')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
[OK]、[キャンセル]、[テスト]の3つのボタンを定義します。ここで、addStretchはストレッチファクターであり、ストレッチされたときに各コントロールがどれだけ離れているかを決定します。
この例では、HBoxLayoutとQVBoxLayoutを使用し、ストレッチファクターを追加することにより、ウィンドウの右下隅に3つのボタンが表示されています。
hbox = QHBoxLayout()
hbox.addStretch(1)
hbox.addWidget(okButton)
#hbox.addStretch(2)
hbox.addWidget(cancelButton)
#hbox.addStretch(1)
hbox.addWidget(testButton)
水平レイアウトを作成し、ストレッチファクターと3つのボタンを追加します。2つのボタンの前のストレッチは格納式のスペースを追加します。これにより、それらが右にプッシュされます。
vbox = QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)
垂直レイアウトを作成し、ストレッチファクターを追加して、水平レイアウトがウィンドウの下部に表示されるようにします。
self.setLayout(vbox)
最終的な表示は次のとおりです。
2.テーブルレイアウトQGridLayout
テーブルレイアウトは、スペースを行と列に分割し、QGridLayoutクラスを使用してグリッドレイアウトを作成します。
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 == '':
continue
button = QPushButton(name)
grid.addWidget(button, *position)
self.move(300, 150)
self.setWindowTitle('Calculator')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
この例では、ボタンのグリッドが作成されています。
grid = QGridLayout()
self.setLayout(grid)
QGridLayoutのインスタンスが作成され、アプリケーションウィンドウのレイアウトが設定されます。
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 == '':
continue
button = QPushButton(name)
grid.addWidget(button, *position)
ボタンは、addWidget()メソッドを使用して作成され、レイアウトに追加されます。
次のコメントのサンプルに示すように、コントロールはグリッド内の複数の行または列にまたがることもできます。
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()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
3つのタブ、2つの行編集、およびテキスト編集ウィジェットを備えたウィンドウを作成します。次に、QGridLayoutを使用してレイアウトを完成させます。グリッドレイアウトを作成し、コンポーネント間の間隔を設定します。グリッドに小さなウィジェットを追加する場合、ウィジェットの行と列のスパンを指定できます。この例では、グリッドレイアウトに追加されたウィジェットの行と列のスパンを設定します。行スパンは5に設定され、列スパンは1に設定されます。
出力は次のようになります。
この記事は「ScratchからPyQt5を学ぶ」の第4部です。皆さんが一緒にサポートし、学ぶことができることを願っています。