PyQt5 provides powerful layout managers for arranging widgets effectively. Box layouts, specifically QVBoxLayout (vertical) and QHBoxLayout (horizontal), are fundamental for creating structured user interfaces. This tutorial explores these layouts, demonstrating their usage and how to control widget alignment.
Table of Contents:
- Vertical Box Layout (QVBoxLayout)
- Horizontal Box Layout (QHBoxLayout)
- Controlling Widget Alignment
- Nesting Layouts for Complex UIs
Vertical Box Layout (QVBoxLayout)
QVBoxLayout arranges widgets vertically, stacking them one above the other. This is ideal for creating forms, lists, or any scenario requiring a columnar arrangement.
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QLabel, QPushButton
app = QApplication(sys.argv)
window = QWidget()
window.setWindowTitle("Vertical Box Layout Example")
layout = QVBoxLayout()
layout.addWidget(QLabel("This is a label."))
layout.addWidget(QPushButton("Click Me!"))
layout.addWidget(QLabel("Another label."))
window.setLayout(layout)
window.show()
sys.exit(app.exec_())
This code creates a window with a vertical layout containing a label, a button, and another label.
Horizontal Box Layout (QHBoxLayout)
QHBoxLayout arranges widgets horizontally, placing them side-by-side. Use this for toolbars, grouping related controls, or arranging widgets in a row.
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QHBoxLayout, QLabel, QPushButton
app = QApplication(sys.argv)
window = QWidget()
window.setWindowTitle("Horizontal Box Layout Example")
layout = QHBoxLayout()
layout.addWidget(QLabel("Label 1"))
layout.addWidget(QPushButton("Button 1"))
layout.addWidget(QLabel("Label 2"))
window.setLayout(layout)
window.show()
sys.exit(app.exec_())
This example is similar to the previous one, but uses QHBoxLayout for a horizontal arrangement.
Controlling Widget Alignment
Widgets in box layouts default to top/left alignment. To control alignment, use the setAlignment() method with flags like Qt.AlignHCenter (horizontal center), Qt.AlignVCenter (vertical center), or combinations thereof. This centers the widget within its allocated space in the layout.
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QHBoxLayout, QLabel, QPushButton, Qt
app = QApplication(sys.argv)
window = QWidget()
window.setWindowTitle("Widget Alignment Example")
layout = QHBoxLayout()
label = QLabel("Centered Label")
layout.addWidget(label)
layout.setAlignment(label, Qt.AlignHCenter | Qt.AlignVCenter)
button = QPushButton("Button")
layout.addWidget(button)
window.setLayout(layout)
window.show()
sys.exit(app.exec_())
This example centers a label both horizontally and vertically within the layout.
Nesting Layouts for Complex UIs
For more complex UIs, nest layouts within each other. This allows for intricate arrangements and fine-grained control over widget placement.
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QHBoxLayout, QLabel, QPushButton
app = QApplication(sys.argv)
window = QWidget()
window.setWindowTitle("Nested Layouts Example")
mainLayout = QVBoxLayout()
# Horizontal layout for top section
topLayout = QHBoxLayout()
topLayout.addWidget(QLabel("Top Left"))
topLayout.addWidget(QPushButton("Top Right"))
mainLayout.addLayout(topLayout)
# Vertical layout for bottom section
bottomLayout = QVBoxLayout()
bottomLayout.addWidget(QLabel("Bottom"))
mainLayout.addLayout(bottomLayout)
window.setLayout(mainLayout)
window.show()
sys.exit(app.exec_())
This example demonstrates nesting a horizontal layout within a vertical layout to create a two-section UI.
This tutorial provides a foundation for using box layouts in PyQt5. Explore the PyQt5 documentation for more advanced layout options and features to build sophisticated and user-friendly applications.