PyQt5 チュートリアル - BoxLayout

Jinku Hu 2023年1月3日 2018年8月20日
  1. 垂直ボックスレイアウト-QVBoxLayout
  2. 水平ボックス-QHBoxLayout
  3. 水平アライメントセンター
PyQt5 チュートリアル - BoxLayout

水平ボックスレイアウト、垂直ボックスレイアウト、ストレッチウィジェットのような QBox レイアウトを紹介します。

垂直ボックスレイアウト-QVBoxLayout

import sys
from PyQt5 import QtWidgets

def basicWindow():
    app = QtWidgets.QApplication(sys.argv)
    windowExample = QtWidgets.QWidget()
    buttonA = QtWidgets.QPushButton('Click!')
    labelA = QtWidgets.QLabel('Label Example')

    v_box = QtWidgets.QVBoxLayout()
    v_box.addWidget(buttonA)
    v_box.addWidget(labelA)

    windowExample.setLayout(v_box)

    windowExample.setWindowTitle('PyQt5 Lesson 4')
    windowExample.show()

    sys.exit(app.exec_())

basicWindow()

どこ、

b = QtWidgets.QPushButton('Click!')
l = QtWidgets.QLabel('Label Example')

QPushButtonQLabel は、前の章で行ったようにウィンドウに追加されません。これらの 2つのウィジェットは、後でボックスレイアウトに追加されます。

v_box = QtWidgets.QVBoxLayout()

これは、垂直ボックスレイアウトを作成します。このレイアウトに追加されたウィジェットは、最初に追加されたウィジェットが他のウィジェットの上にある場所に垂直に配置される QVBoxLayout です。

ウィジェットを配置するコンテナに過ぎないため、現時点では何もしません。

v_box.addWidget(buttonA)
v_box.addWidget(lableA)

ボタンとラベルを垂直ボックスレイアウト v_box に追加します。

このコードを実行すると、プッシュボタンとラベルが下に表示されます。

PyQt5 VBox

ウィンドウのサイズを変更すると、これらの 2つのウィジェットが整列しなくなっていることがわかります。

PyQt5 VBox_Change ウィンドウサイズ

コードを変更して、見栄えを良くします。

水平ボックス-QHBoxLayout

import sys
from PyQt5 import QtWidgets

def basicWindow():
    app = QtWidgets.QApplication(sys.argv)
    windowExample = QtWidgets.QWidget()
    buttonA = QtWidgets.QPushButton('Push Me')
    labelA = QtWidgets.QLabel('Look at me')

    h_box = QtWidgets.QHBoxLayout()
    h_box.addStretch()
    h_box.addWidget(labelA)
    h_box.addStretch()

    v_box = QtWidgets.QVBoxLayout()
    v_box.addWidget(buttonA)
    v_box.addLayout(h_box)

    windowExample.setLayout(v_box)

    windowExample.setWindowTitle('PyQt5 Lesson 4')
    windowExample.show()

    sys.exit(app.exec_())

basicWindow()

どこ、

h_box = QtWidgets.QHBoxLayout()

水平ボックスレイアウトを作成します。

h_box.addStretch()
h_box.addWidget(labelA)
h_box.addStretch()

addStretch() ウィジェットは、できるだけ多くの水平方向のスペースを埋めます。ラベルの前後の 2つのストレッチは、水平ボックスの中央にラベルを残すために必要なだけのスペースを占有します。

PyQt5 VBox_HBox

水平アライメントセンター

ウィジェットを中央に配置する別の方法は、ウィジェットの配置を AlignCenter に設定することです。

import sys
from PyQt5 import QtWidgets
from PyQt5 import QtCore

def basicWindow():
    app = QtWidgets.QApplication(sys.argv)
    windowExample = QtWidgets.QWidget()
    buttonA = QtWidgets.QPushButton('Click!')
    labelA = QtWidgets.QLabel('Label Example')
    labelA.setAlignment(QtCore.Qt.AlignCenter)

    v_box = QtWidgets.QVBoxLayout()
    v_box.addWidget(buttonA)
    v_box.addWidget(labelA)

    windowExample.setLayout(v_box)

    windowExample.setWindowTitle('AlignCenter Example')
    windowExample.show()

    sys.exit(app.exec_())

basicWindow()

上記の最初の例と比較して、2 行追加するだけです。

labelA.setAlignment(QtCore.Qt.AlignCenter)

setAlignment メソッドはウィジェットの配置を設定し、QtCore.Qt.AlignCenter は、コードにインポートする必要がある QtCore モジュールの中央の配置パラメーターです。

上記の例とまったく同じレイアウトです。

PyQt5 Horizo​​ntal AlignCenter

Author: Jinku Hu
Jinku Hu avatar Jinku Hu avatar

Founder of DelftStack.com. Jinku has worked in the robotics and automotive industries for over 8 years. He sharpened his coding skills when he needed to do the automatic testing, data collection from remote servers and report creation from the endurance test. He is from an electrical/electronics engineering background but has expanded his interest to embedded electronics, embedded programming and front-/back-end programming.

LinkedIn