PyQt5 tabbar QTabWidget

by Atakan

Hello, we continue with our PyQt5 articles. We will talk about the tab, a popular component.
As you know, many components can be used together in a frame on a page. in cases where too many components are used from some situations, we need to reasonably separate them. there are different methods of it.

Like making multiple frames, like making a modal frame. Now let’s see another method, tab widget.
We can divide the tab with different things on each page, such as notebook pages.

Example :

Let’s first get the tab object from the QTabWidget () class

self.tabs = QTabWidget()

I want to have 2 tab pages, these are from the QWidget Class

self.tab1 = QWidget()
self.tab2 = QWidget()

we adjust the tab size.

self.tabs.resize(300,200)

I add my tabs to the general tab object by giving the title

self.tabs.addTab(self.tab1, "First Tab")
self.tabs.addTab(self.tab2, "Second Tab")

I am setting the layouts of tab pages.

self.tab1.layout = QHBoxLayout(self)
self.tab2.layout = QVBoxLayout(self)

I add 3 buttons to tab 1 and a textedit to tab 2

self.push_button1 = QPushButton("Button 1 tab 1")
self.tab1.layout.addWidget(self.push_button1)

self.push_button2 = QPushButton("Button 2 tab 1")
self.tab1.layout.addWidget(self.push_button2)

self.push_button3 = QPushButton("Button 3 tab 1")
self.tab1.layout.addWidget(self.push_button3)

self.text_edit = QTextEdit("")
self.tab2.layout.addWidget(self.text_edit)

I adjust the layouts of my tabs

self.tab1.setLayout(self.tab1.layout)
self.tab2.setLayout(self.tab2.layout)

I add the tab widget to my general layout

self.layout.addWidget(self.tabs)

I add triggers in tab changes

self.tabs.tabBarClicked.connect(self.tab_click_handler)

Result :

Full Source Code :

from PyQt5.QtWidgets import *
import sys

W_WIDTH = 400
W_HEIGHT = 250
W_X = 400
W_Y = 150


class MainFrame(QWidget):
    def __init__(self):
        super(MainFrame, self).__init__()
        self.layout = QVBoxLayout(self)
        self.init()
        self.show()


    def init(self):

        self.resize(W_WIDTH, W_HEIGHT)
        self.move(W_X, W_Y)
        self.setWindowTitle("www.langpy.com | Python GUI Tutorial")

        self.tabs = QTabWidget()

        self.tab1 = QWidget()
        self.tab2 = QWidget()


        self.tabs.resize(300,200)


        self.tabs.addTab(self.tab1, "First Tab")
        self.tabs.addTab(self.tab2, "Second Tab")

        self.tab1.layout = QHBoxLayout(self)
        self.tab2.layout = QVBoxLayout(self)


        self.push_button1 = QPushButton("Button 1 tab 1")
        self.tab1.layout.addWidget(self.push_button1)

        self.push_button2 = QPushButton("Button 2 tab 1")
        self.tab1.layout.addWidget(self.push_button2)

        self.push_button3 = QPushButton("Button 3 tab 1")
        self.tab1.layout.addWidget(self.push_button3)

        self.text_edit = QTextEdit("")
        self.tab2.layout.addWidget(self.text_edit)


        self.tab1.setLayout(self.tab1.layout)
        self.tab2.setLayout(self.tab2.layout)

        self.layout.addWidget(self.tabs)

        self.tabs.tabBarClicked.connect(self.tab_click_handler)


    def tab_click_handler(self):
        print(self.tabs.currentIndex())


app = QApplication(sys.argv)
win = MainFrame()
sys.exit(app.exec_())

You may also like

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. OK Read More