PyQt6 Layout Management

PyQt6 Tutorials

About Lesson

In this PyQt6 lesson we are going to learn about PyQt6 Layout Management, basically there are different types of layout management that you can use in PyQt6.we have QVBoxLayout, QHBoxLayout and QGridLayout.

1: PyQt6 QVBoxLayout

Using QVBoxLayout we can align our widgets vertically and for that we can use QVBoxLayout class, this is our complete code for QVBoxLayout.

from PyQt6.QtWidgets import QApplication, QWidget, \
    QVBoxLayout, QPushButton
from PyQt6.QtGui import QIcon
import sys


class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("PyQt6 QVBoxLayout - Geekscoders.com")
        self.setWindowIcon(QIcon("qt.png"))
        self.setGeometry(500,200, 500,400)

        vbox = QVBoxLayout()

        btn1 = QPushButton("Button One")
        btn2 = QPushButton("Button Two")
        btn3 = QPushButton("Button Three")
        btn4 = QPushButton("Button Four")

        vbox.addWidget(btn1)
        vbox.addWidget(btn2)
        vbox.addWidget(btn3)
        vbox.addWidget(btn4)
        self.setLayout(vbox)






app = QApplication(sys.argv)
window = Window()
window.show()
sys.exit(app.exec())

from PyQt6.QtWidgets import QApplication, QWidget, \

QVBoxLayout, QPushButton

from PyQt6.QtGui import QIcon

import sys

class Window(QWidget):

def __init__(self):

super().__init__()

self.setWindowTitle("PyQt6 QVBoxLayout - Geekscoders.com")

self.setWindowIcon(QIcon("qt.png"))

self.setGeometry(500,200, 500,400)

vbox = QVBoxLayout()

btn1 = QPushButton("Button One")

btn2 = QPushButton("Button Two")

btn3 = QPushButton("Button Three")

btn4 = QPushButton("Button Four")

vbox.addWidget(btn1)

vbox.addWidget(btn2)

vbox.addWidget(btn3)

vbox.addWidget(btn4)

self.setLayout(vbox)

app = QApplication(sys.argv)

window = Window()

window.show()

sys.exit(app.exec())

First we have created the object of QVBoxLayout.

vbox = QVBoxLayout()

1	vbox = QVBoxLayout()

Now we need some buttons, because we want to add the buttons in out QVBoxLayout.

        btn1 = QPushButton("Button One")
        btn2 = QPushButton("Button Two")
        btn3 = QPushButton("Button Three")
        btn4 = QPushButton("Button Four")

        vbox.addWidget(btn1)
        vbox.addWidget(btn2)
        vbox.addWidget(btn3)
        vbox.addWidget(btn4)

btn1 = QPushButton("Button One")

btn2 = QPushButton("Button Two")

btn3 = QPushButton("Button Three")

btn4 = QPushButton("Button Four")

vbox.addWidget(btn1)

vbox.addWidget(btn2)

vbox.addWidget(btn3)

vbox.addWidget(btn4)

At the end you need to set the main window layout to the VBoxLayout.

self.setLayout(vbox)

1	self.setLayout(vbox)

Run the complete code and this is the result.

2: PyQt6 QHBoxLayout

Using QHBoxLayout we can align our widgets horizontally and we want to use the same example from QVBoxLayout, we have created the object of QHBoxLayout, after that we have created some buttons, added the button in the QHBoxLayout, at the end set the main window layout to the QHBoxLayout.

from PyQt6.QtWidgets import QApplication, QWidget, QHBoxLayout, QPushButton
from PyQt6.QtGui import QIcon
import sys


class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("PyQt6 QHBoxLayout - Geekscoders.com")
        self.setWindowIcon(QIcon("qt.png"))
        self.setGeometry(500,200, 500,400)

        hbox = QHBoxLayout()

        btn1 = QPushButton("Button One")
        btn2 = QPushButton("Button Two")
        btn3 = QPushButton("Button Three")
        btn4 = QPushButton("Button Four")

        hbox.addWidget(btn1)
        hbox.addWidget(btn2)
        hbox.addWidget(btn3)
        hbox.addWidget(btn4)
        self.setLayout(hbox)



app = QApplication(sys.argv)
window = Window()
window.show()
sys.exit(app.exec())

from PyQt6.QtWidgets import QApplication, QWidget, QHBoxLayout, QPushButton

from PyQt6.QtGui import QIcon

import sys

class Window(QWidget):

def __init__(self):

super().__init__()

self.setWindowTitle("PyQt6 QHBoxLayout - Geekscoders.com")

self.setWindowIcon(QIcon("qt.png"))

self.setGeometry(500,200, 500,400)

hbox = QHBoxLayout()

btn1 = QPushButton("Button One")

btn2 = QPushButton("Button Two")

btn3 = QPushButton("Button Three")

btn4 = QPushButton("Button Four")

hbox.addWidget(btn1)

hbox.addWidget(btn2)

hbox.addWidget(btn3)

hbox.addWidget(btn4)

self.setLayout(hbox)

app = QApplication(sys.argv)

window = Window()

window.show()

sys.exit(app.exec())

Run the complete code and this is the result.

3: PyQt6 QGridLayout

Using QGridLayout we can align our widgets in column and rows, in this example we have created the object of QGridLayout, and after that we have added some buttons to the grid layout, you need to specify the number of columns and rows for every widgets and at the end we have set the main window layout to QGridLayout.

from PyQt6.QtWidgets import QApplication, QWidget, \
    QGridLayout, QPushButton
from PyQt6.QtGui import QIcon
import sys


class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("PyQt6 QGridLayout - Geekscoders.com")
        self.setWindowIcon(QIcon("qt.png"))
        self.setGeometry(500,200, 500,400)

        grid = QGridLayout()

        btn1 = QPushButton("Click One")
        btn2 = QPushButton("Click Two")
        btn3 = QPushButton("Click Three")
        btn4 = QPushButton("Click Four")
        btn5 = QPushButton("Click Five")
        btn6 = QPushButton("Click Six")
        btn7 = QPushButton("Click Seven")
        btn8 = QPushButton("Click Eight")

        grid.addWidget(btn1, 0, 0)
        grid.addWidget(btn2, 0, 1)
        grid.addWidget(btn3, 0, 2)
        grid.addWidget(btn4, 0, 3)
        grid.addWidget(btn5, 1, 0)
        grid.addWidget(btn6, 1, 1)
        grid.addWidget(btn7, 1, 2)
        grid.addWidget(btn8, 1, 3)

        self.setLayout(grid)





app = QApplication(sys.argv)
window = Window()
window.show()
sys.exit(app.exec())

from PyQt6.QtWidgets import QApplication, QWidget, \

QGridLayout, QPushButton

from PyQt6.QtGui import QIcon

import sys

class Window(QWidget):

def __init__(self):

super().__init__()

self.setWindowTitle("PyQt6 QGridLayout - Geekscoders.com")

self.setWindowIcon(QIcon("qt.png"))

self.setGeometry(500,200, 500,400)

grid = QGridLayout()

btn1 = QPushButton("Click One")

btn2 = QPushButton("Click Two")

btn3 = QPushButton("Click Three")

btn4 = QPushButton("Click Four")

btn5 = QPushButton("Click Five")

btn6 = QPushButton("Click Six")

btn7 = QPushButton("Click Seven")

btn8 = QPushButton("Click Eight")

grid.addWidget(btn1, 0, 0)

grid.addWidget(btn2, 0, 1)

grid.addWidget(btn3, 0, 2)

grid.addWidget(btn4, 0, 3)

grid.addWidget(btn5, 1, 0)

grid.addWidget(btn6, 1, 1)

grid.addWidget(btn7, 1, 2)

grid.addWidget(btn8, 1, 3)

self.setLayout(grid)

app = QApplication(sys.argv)

window = Window()

window.show()

sys.exit(app.exec())

Run the complete code and this is the result.

Also you can use Qt Designer for the Layout Management, in this GUI we have created our three types of Layout using Qt Designer, to open Qt Designer you can write pyqt5designer in your terminal, after that create new Widget window application. add your buttons, you can right click on the button, after that choose the layout that you want.