{"id":5071,"date":"2022-09-23T03:27:52","date_gmt":"2022-09-23T03:27:52","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=5071"},"modified":"2022-10-29T08:02:18","modified_gmt":"2022-10-29T08:02:18","slug":"pyqt-qtabwidget","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/pyqt\/pyqt-qtabwidget\/","title":{"rendered":"PyQt QTabWidget"},"content":{"rendered":"\n

Summary<\/strong>: in this tutorial, you’ll learn how to use the PyQt QTabWidget<\/code> to create a tab widget.<\/p>\n\n\n\n

Introduction to the PyQt QTabWidget #<\/a><\/h2>\n\n\n\n

Tabs allow you to display related information on separate labeled pages. Tabs are useful for dividing complex interfaces into smaller pages that are easier for users to digest.<\/p>\n\n\n\n

To create a tab widget, you use the QTabWidget<\/code><\/code> class. The steps for using the QTabWidget<\/code><\/code> is as follows:<\/p>\n\n\n\n

First, create the QTabWidget<\/code> object:<\/p>\n\n\n

tab = QTabWidget()\nlayout.addWidget(tab)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
page = QWidget(tab)\npage_layout = QGridLayout()\npage.setLayout(page_layout)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Third, add a page to the tab widget using the addTab()<\/code> method:<\/p>\n\n\n
tab.addTab(page,'Tab title'<\/span>)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Finally, repeat the second and third steps to add more pages to the tab.<\/p>\n\n\n\n
PyQt QTabWidget example #<\/a><\/h2>\n\n\n\n
The following example illustrates how to create a tab widget with two pages:<\/p>\n\n\n
import<\/span> sys\nfrom<\/span> PyQt6.QtWidgets import<\/span> QApplication, QWidget,  QFormLayout, QGridLayout, QTabWidget, QLineEdit, QDateEdit, QPushButton\nfrom<\/span> PyQt6.QtCore import<\/span> Qt\n\n\nclass<\/span> MainWindow<\/span>(QWidget)<\/span>:<\/span>\n    def<\/span> __init__<\/span>(self, *args, **kwargs)<\/span>:<\/span>\n        super().__init__(*args, **kwargs)\n\n        self.setWindowTitle('PyQt QTabWidget'<\/span>)\n\n        main_layout = QGridLayout(self)\n        self.setLayout(main_layout)\n\n        # create a tab widget<\/span>\n        tab = QTabWidget(self)\n\n        # personal page<\/span>\n        personal_page = QWidget(self)\n        layout = QFormLayout()\n        personal_page.setLayout(layout)\n        layout.addRow('First Name:'<\/span>, QLineEdit(self))\n        layout.addRow('Last Name:'<\/span>, QLineEdit(self))\n        layout.addRow('DOB:'<\/span>, QDateEdit(self))\n\n        # contact pane<\/span>\n        contact_page = QWidget(self)\n        layout = QFormLayout()\n        contact_page.setLayout(layout)\n        layout.addRow('Phone Number:'<\/span>, QLineEdit(self))\n        layout.addRow('Email Address:'<\/span>, QLineEdit(self))\n\n        # add pane to the tab widget<\/span>\n        tab.addTab(personal_page, 'Personal Info'<\/span>)\n        tab.addTab(contact_page, 'Contact Info'<\/span>)\n\n        main_layout.addWidget(tab, 0<\/span>, 0<\/span>, 2<\/span>, 1<\/span>)\n        main_layout.addWidget(QPushButton('Save'<\/span>), 2<\/span>, 0<\/span>,\n                              alignment=Qt.AlignmentFlag.AlignLeft)\n        main_layout.addWidget(QPushButton('Cancel'<\/span>), 2<\/span>, 0<\/span>,\n                              alignment=Qt.AlignmentFlag.AlignRight)\n\n        self.show()\n\n\nif<\/span> __name__ == '__main__'<\/span>:\n    app = QApplication(sys.argv)\n    window = MainWindow()\n    sys.exit(app.exec())<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Output:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
How it works. (We’ll focus on the tab widget construction only)<\/p>\n\n\n\n
First, create a tab widget:<\/p>\n\n\n
tab = QTabWidget(self)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
personal_page = QWidget(self)\nlayout = QFormLayout()\npersonal_page.setLayout(layout)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Then, add QLineEdit<\/code> widgets to the person_page<\/code> widget:<\/p>\n\n\n
layout.addRow('First Name:'<\/span>, QLineEdit(self))\nlayout.addRow('Last Name:'<\/span>, QLineEdit(self))\nlayout.addRow('DOB:'<\/span>, QDateEdit(self))<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
After that, create a new page that holds the fields for contact information:<\/p>\n\n\n
contact_page = QWidget(self)\nlayout = QFormLayout()\ncontact_page.setLayout(layout)\nlayout.addRow('Phone Number:'<\/span>, QLineEdit(self))\nlayout.addRow('Email Address:'<\/span>, QLineEdit(self))<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Finally, add pages to the tab using the add_tab()<\/code> method:<\/p>\n\n\n
tab.addTab(personal_page, 'Personal Info'<\/span>)\ntab.addTab(contact_page, 'Contact Info'<\/span>)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
QTabWidget options #<\/a><\/h2>\n\n\n\n
The QTabWidget<\/code> has some notable options.<\/p>\n\n\n\n
Movable #<\/a><\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
To make the tab movable, you set the movable<\/code> property to True<\/code>:<\/p>\n\n\n
tab = QTabWidget(self,movable=True<\/span>)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Note that you can initialize the movable property when creating the tab widget.<\/p>\n\n\n\n
Or you can use the setMovable()<\/code> method of the tab widget object:<\/p>\n\n\n
tab.setMovable(True<\/span>)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
tabsClosable #<\/a><\/h3>\n\n\n\n
If the tabsClosble<\/code> is true, the tabs will display a close button on tabs.<\/p>\n\n\n
tab = QTabWidget(self,tabsClosable=True<\/span>)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
Or you can use the setTabsClosable()<\/code> method:<\/p>\n\n\n
tab.setTabsClosable(True<\/span>)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
When the close button is clicked, the QTabWidget<\/code> emits the tabCloseRequested<\/code> signal. If you want to close the tab, you need to connect to this signal and implement the code to close the corresponding tab.<\/p>\n\n\n\n
Tab shape #<\/a><\/h3>\n\n\n\n
The tab has two shapes rounded & triangular. The rounded is the default. <\/p>\n\n\n\n
To set the tab shape, you can use the tabShape<\/code> argument when creating a new tab widget:<\/p>\n\n\n
tab = QTabWidget(self, tabShape=QTabWidget.TabShape.Triangular)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Or you can use the setTabShape()<\/code> method:<\/p>\n\n\n
tab.setTabShape(QTabWidget.TabShape.Triangular)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
\"PyQt<\/figure>\n\n\n\n
Tab positions #<\/a><\/h3>\n\n\n\n
Tabs can have four positions determined by the TabPosition<\/code> enum:<\/p>\n\n\n\n
Next, create a page using the QWidget<\/code> and set its layout to a QFormLayout<\/a><\/code>:<\/p>\n\n\n
Second, create a page by using the QWidget<\/code><\/code> object as the container and add child widgets to the QWidget<\/a><\/code><\/code>:<\/p>\n\n\n