pyqt5 layout

PyQt5 layouts are essential for designing interactive GUI applications. One such layout is the horizontal layout which allows you to dynamically add widgets such as buttons, text fields, images, and others, in a horizontal direction.

Using PyQt5’s horizontal layout, you can seamlessly align your widgets to create visually appealing interfaces for your applications. In this guide, we will delve into the steps to add buttons horizontally using the PyQt5 horizontal layout.

Interested in mastering PyQt5? Check out this course:

• Create GUI Apps with PyQt5

Designing with the Horizontal Layout

Before we dive in, let’s take a comprehensive look at the code, followed by a detailed explanation:

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QHBoxLayout, QGroupBox, QDialog, QVBoxLayout
from PyQt5.QtGui import QIcon
from PyQt5.QtCore import pyqtSlot

class App(QDialog):

    def __init__(self):
        super().__init__()
        self.title = 'PyQt5 layout - pythonspot.com'
        self.left = 10
        self.top = 10
        self.width = 320
        self.height = 100
        self.initUI()
    
    def initUI(self):
        self.setWindowTitle(self.title)
        self.setGeometry(self.left, self.top, self.width, self.height)
        
        self.createHorizontalLayout()
        
        windowLayout = QVBoxLayout()
        windowLayout.addWidget(self.horizontalGroupBox)
        self.setLayout(windowLayout)
        
        self.show()
    
    def createHorizontalLayout(self):
        self.horizontalGroupBox = QGroupBox("What is your favorite color?")
        layout = QHBoxLayout()
        
        buttonBlue = QPushButton('Blue', self)
        buttonBlue.clicked.connect(self.on_click)
        layout.addWidget(buttonBlue)
        
        buttonRed = QPushButton('Red', self)
        buttonRed.clicked.connect(self.on_click)
        layout.addWidget(buttonRed)
        
        buttonGreen = QPushButton('Green', self)
        buttonGreen.clicked.connect(self.on_click)
        layout.addWidget(buttonGreen)
        
        self.horizontalGroupBox.setLayout(layout)
    
    @pyqtSlot()
    def on_click(self):
        print('PyQt5 button click')
    
if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = App()
    sys.exit(app.exec_())

Decoding the Code

Let’s decipher how the horizontal layout works in PyQt5:

1. Initialization: The method self.createHorizontalLayout() is called inside the initUI() method. This sets up the foundation for the horizontal layout.

2. Box Creation: A box with a title and a horizontal layout is established with:

   self.horizontalGroupBox = QGroupBox("What is your favorite color?")
   layout = QHBoxLayout()

3. Widget Addition: Widgets (for example, qpushbutton) are produced and incorporated into the layout sequentially:

   buttonBlue = QPushButton('Blue', self)
   buttonBlue.clicked.connect(self.on_click)
   layout.addWidget(buttonBlue)

4. Box Assignment: The title-box is designated to encompass the horizontal layout:

   self.horizontalGroupBox.setLayout(layout)

5. Window Integration: The box is integrated into the main window through:

   windowLayout = QVBoxLayout()
   windowLayout.addWidget(self.horizontalGroupBox)
   self.setLayout(windowLayout)

If you’re intrigued by layouts, PyQt5 also offers the flexibility to create vertical layouts using a qvboxlayout.

For more hands-on examples and insights: Download PyQT5 Examples

Navigate to learn more: ← Previous | Next →