{"id":4959,"date":"2022-09-20T03:47:02","date_gmt":"2022-09-20T03:47:02","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=4959"},"modified":"2022-10-25T03:26:38","modified_gmt":"2022-10-25T03:26:38","slug":"pyqt-qvboxlayout","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/pyqt\/pyqt-qvboxlayout\/","title":{"rendered":"PyQt QVBoxLayout"},"content":{"rendered":"\n

Summary<\/strong>: in this tutorial, you’ll learn how to use the PyQt QVBoxLayout<\/code> to arrange widgets vertically.<\/p>\n\n\n\n

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

The QVBoxLayout<\/code> divides the parent widget into vertical boxes and places the child widgets sequentially from top to bottom.<\/p>\n\n\n\n

This program illustrates how to use the QVBoxLayout<\/code> class:<\/p>\n\n\n

import<\/span> sys\n<\/span><\/span>from<\/span> PyQt6.QtWidgets import<\/span> QApplication, QWidget, QPushButton, QVBoxLayout\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>class<\/span> MainWindow<\/span>(QWidget)<\/span>:<\/span>\n<\/span><\/span>    def<\/span> __init__<\/span>(self, *args, **kwargs)<\/span>:<\/span>\n<\/span><\/span>        super().__init__(*args, **kwargs)\n<\/span><\/span>\n<\/span><\/span>        self.setWindowTitle('PyQt QVBoxLayout'<\/span>)\n<\/span><\/span>\n<\/span><\/span>        # create a layout<\/span>\n<\/span><\/span>        layout = QVBoxLayout()\n<\/span><\/mark>        self.setLayout(layout)\n<\/span><\/mark>\n<\/span><\/span>        # create buttons and add them to the layout<\/span>\n<\/span><\/span>        titles = ['Find Next'<\/span>, 'Find All'<\/span>, 'Close'<\/span>]\n<\/span><\/span>        buttons = [QPushButton(title) for<\/span> title in<\/span> titles]\n<\/span><\/span>        for<\/span> button in<\/span> buttons:\n<\/span><\/span>            layout.addWidget(button)\n<\/span><\/mark>\n<\/span><\/span>        # show the window<\/span>\n<\/span><\/span>        self.show()\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>if<\/span> __name__ == '__main__'<\/span>:\n<\/span><\/span>    app = QApplication(sys.argv)\n<\/span><\/span>    window = MainWindow()\n<\/span><\/span>    sys.exit(app.exec())\n<\/span><\/span><\/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.<\/p>\n\n\n\n
First, create a QVBoxLayout<\/code> object:<\/p>\n\n\n
layout = QVBoxLayout()<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Next, set the layout for the MainWindow<\/code> by calling its setLayout()<\/code> method:<\/p>\n\n\n
self.setLayout(layout)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Then, define a list of three strings that represent button titles:<\/p>\n\n\n
titles = ['Find Next'<\/span>, 'Find All'<\/span>, 'Close'<\/span>]<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
buttons = [QPushButton(title) for title in titles]<\/code><\/span><\/pre>\n\n\n
Finally, add the buttons to the layout using a for<\/a><\/code> loop:<\/p>\n\n\n
for<\/span> button in<\/span> buttons:\n    layout.addWidget(button)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Alignments #<\/a><\/h2>\n\n\n\n
The QVBoxLayout<\/code> stretches each widget type in a specific way. For example, the QVBoxLayout<\/code> stretches the QPushButton<\/code> horizontally, not vertically. <\/p>\n\n\n\n
It means that when you increase the width of the parent widget, the widths of all the buttons also increase:<\/p>\n\n\n\n
\"PyQt<\/figure>\n\n\n\n
However, when you increase the height of the parent widget, the heights of the buttons don’t change. More importantly, the QVBoxLayout<\/code> allocates evenly the spaces of the parent widget to each button:<\/p>\n\n\n\n
\"PyQt<\/figure>\n\n\n\n
When the parent widget has more space for the child widgets, you can align the child widgets within the parent widget using vertical spacers.<\/p>\n\n\n\n
Align bottom #<\/a><\/h3>\n\n\n\n
To push the buttons to the bottom of the parent widget, you add a vertical spacer at the beginning of the layout by using the addStretch()<\/code> method of the QVBoxLayout<\/code> object:<\/p>\n\n\n\n
\"PyQt<\/figure>\n\n\n
import<\/span> sys\n<\/span><\/span>from<\/span> PyQt6.QtWidgets import<\/span> QApplication, QWidget, QPushButton, QVBoxLayout\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>class<\/span> MainWindow<\/span>(QWidget)<\/span>:<\/span>\n<\/span><\/span>    def<\/span> __init__<\/span>(self, *args, **kwargs)<\/span>:<\/span>\n<\/span><\/span>        super().__init__(*args, **kwargs)\n<\/span><\/span>\n<\/span><\/span>        self.setWindowTitle('PyQt QVBoxLayout'<\/span>)\n<\/span><\/span>\n<\/span><\/span>        # create a layout<\/span>\n<\/span><\/span>        layout = QVBoxLayout()\n<\/span><\/span>        self.setLayout(layout)\n<\/span><\/span>\n<\/span><\/span>        # add a spacer<\/span>\n<\/span><\/span>        layout.addStretch()\n<\/span><\/mark>        \n<\/span><\/span>        # create buttons and add them to the layout<\/span>\n<\/span><\/span>        titles = ['Find Next'<\/span>, 'Find All'<\/span>, 'Close'<\/span>]\n<\/span><\/span>        buttons = [QPushButton(title) for<\/span> title in<\/span> titles]\n<\/span><\/span>        for<\/span> button in<\/span> buttons:\n<\/span><\/span>            layout.addWidget(button)\n<\/span><\/span>\n<\/span><\/span>        # show the window<\/span>\n<\/span><\/span>        self.show()\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>if<\/span> __name__ == '__main__'<\/span>:\n<\/span><\/span>    app = QApplication(sys.argv)\n<\/span><\/span>    window = MainWindow()\n<\/span><\/span>    sys.exit(app.exec())\n<\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
If you increase the height of the window, the vertical spacer will stretch to the end of the QVBoxLayout<\/code> and leaves enough spaces for the buttons:<\/p>\n\n\n\n
Align top #<\/a><\/h3>\n\n\n\n
Similarly, you can add a vertical spacer as the last item of the layout to push the buttons to the top by calling the addStretch()<\/code> method after adding the buttons to the layout:<\/p>\n\n\n\n
\"PyQt<\/figure>\n\n\n
import<\/span> sys\n<\/span><\/span>from<\/span> PyQt6.QtWidgets import<\/span> QApplication, QWidget, QPushButton, QVBoxLayout\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>class<\/span> MainWindow<\/span>(QWidget)<\/span>:<\/span>\n<\/span><\/span>    def<\/span> __init__<\/span>(self, *args, **kwargs)<\/span>:<\/span>\n<\/span><\/span>        super().__init__(*args, **kwargs)\n<\/span><\/span>\n<\/span><\/span>        self.setWindowTitle('PyQt QVBoxLayout'<\/span>)\n<\/span><\/span>\n<\/span><\/span>        # create a layout<\/span>\n<\/span><\/span>        layout = QVBoxLayout()\n<\/span><\/span>        self.setLayout(layout)\n<\/span><\/span>\n<\/span><\/span>        # create buttons and add them to the layout<\/span>\n<\/span><\/span>        titles = ['Find Next'<\/span>, 'Find All'<\/span>, 'Close'<\/span>]\n<\/span><\/span>        buttons = [QPushButton(title) for<\/span> title in<\/span> titles]\n<\/span><\/span>        for<\/span> button in<\/span> buttons:\n<\/span><\/span>            layout.addWidget(button)\n<\/span><\/span>\n<\/span><\/span>        # add a spacer<\/span>\n<\/span><\/span>        layout.addStretch()\n<\/span><\/mark>\n<\/span><\/span>        # show the window<\/span>\n<\/span><\/span>        self.show()\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>if<\/span> __name__ == '__main__'<\/span>:\n<\/span><\/span>    app = QApplication(sys.argv)\n<\/span><\/span>    window = MainWindow()\n<\/span><\/span>    sys.exit(app.exec())\n<\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Align center #<\/a><\/h3>\n\n\n\n
To align the buttons in the center of the parent widget, you add a vertical spacer at the beginning and one at the end of the layout like this:<\/p>\n\n\n\n
\"PyQt<\/figure>\n\n\n
import<\/span> sys\n<\/span><\/span>from<\/span> PyQt6.QtWidgets import<\/span> QApplication, QWidget, QPushButton, QVBoxLayout\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>class<\/span> MainWindow<\/span>(QWidget)<\/span>:<\/span>\n<\/span><\/span>    def<\/span> __init__<\/span>(self, *args, **kwargs)<\/span>:<\/span>\n<\/span><\/span>        super().__init__(*args, **kwargs)\n<\/span><\/span>\n<\/span><\/span>        self.setWindowTitle('PyQt QVBoxLayout'<\/span>)\n<\/span><\/span>\n<\/span><\/span>        # create a layout<\/span>\n<\/span><\/span>        layout = QVBoxLayout()\n<\/span><\/span>        self.setLayout(layout)\n<\/span><\/span>\n<\/span><\/span>        # add a spacer<\/span>\n<\/span><\/span>        layout.addStretch()\n<\/span><\/mark>\n<\/span><\/span>        # create buttons and add them to the layout<\/span>\n<\/span><\/span>        titles = ['Find Next'<\/span>, 'Find All'<\/span>, 'Close'<\/span>]\n<\/span><\/span>        buttons = [QPushButton(title) for<\/span> title in<\/span> titles]\n<\/span><\/span>        for<\/span> button in<\/span> buttons:\n<\/span><\/span>            layout.addWidget(button)\n<\/span><\/span>\n<\/span><\/span>        # add a spacer<\/span>\n<\/span><\/span>        layout.addStretch()\n<\/span><\/mark>\n<\/span><\/span>        # show the window<\/span>\n<\/span><\/span>        self.show()\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>if<\/span> __name__ == '__main__'<\/span>:\n<\/span><\/span>    app = QApplication(sys.argv)\n<\/span><\/span>    window = MainWindow()\n<\/span><\/span>    sys.exit(app.exec())\n<\/span><\/span><\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Note that you can add a vertical spacer between the widgets in the QVBoxLayout<\/code>. For example, the following adds a vertical spacer between the second and third buttons:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n
import<\/span> sys\n<\/span><\/span>from<\/span> PyQt6.QtWidgets import<\/span> QApplication, QWidget, QPushButton, QVBoxLayout\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>class<\/span> MainWindow<\/span>(QWidget)<\/span>:<\/span>\n<\/span><\/span>    def<\/span> __init__<\/span>(self, *args, **kwargs)<\/span>:<\/span>\n<\/span><\/span>        super().__init__(*args, **kwargs)\n<\/span><\/span>\n<\/span><\/span>        self.setWindowTitle('PyQt QVBoxLayout'<\/span>)\n<\/span><\/span>\n<\/span><\/span>        # create a layout<\/span>\n<\/span><\/span>        layout = QVBoxLayout()\n<\/span><\/span>        self.setLayout(layout)\n<\/span><\/span>\n<\/span><\/span>        # create buttons<\/span>\n<\/span><\/span>        find_next_btn = QPushButton('Find Next'<\/span>)\n<\/span><\/span>        find_all_btn = QPushButton('Find All'<\/span>)\n<\/span><\/span>        close_btn = QPushButton('Find All'<\/span>)\n<\/span><\/span>\n<\/span><\/span>        # add the first & second buttons to the layout<\/span>\n<\/span><\/span>        layout.addWidget(find_next_btn)\n<\/span><\/span>        layout.addWidget(find_all_btn)\n<\/span><\/span>\n<\/span><\/span>        # add a spacer<\/span>\n<\/span><\/span>        layout.addStretch()\n<\/span><\/mark>\n<\/span><\/span>        # add the third button<\/span>\n<\/span><\/span>        layout.addWidget(close_btn)\n<\/span><\/span>\n<\/span><\/span>        # show the window<\/span>\n<\/span><\/span>        self.show()\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>if<\/span> __name__ == '__main__'<\/span>:\n<\/span><\/span>    app = QApplication(sys.argv)\n<\/span><\/span>    window = MainWindow()\n<\/span><\/span>    sys.exit(app.exec())\n<\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Setting layout stretch factors #<\/a><\/h2>\n\n\n\n
The following program displays three QLabel<\/code> widgets with different background colors red, green, and blue using the QVBoxLayout<\/code>:<\/p>\n\n\n
import<\/span> sys\nfrom<\/span> PyQt6.QtWidgets import<\/span> QApplication, QWidget, QLabel, QVBoxLayout\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 QVBoxLayout'<\/span>)\n\n        # create a layout<\/span>\n        layout = QVBoxLayout()\n        self.setLayout(layout)\n\n        # create buttons<\/span>\n        label_1 = QLabel()\n        label_1.setStyleSheet('QLabel{background-color:red}'<\/span>)\n        label_2 = QLabel()\n        label_2.setStyleSheet('QLabel{background-color:green}'<\/span>)\n        label_3 = QLabel()\n        label_3.setStyleSheet('QLabel{background-color:blue}'<\/span>)\n\n        layout.addWidget(label_1)\n        layout.addWidget(label_2)\n        layout.addWidget(label_3)\n\n        # show the window<\/span>\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
Unlike QPushButton<\/code> widgets, the QLabel<\/code> widgets stretch both vertically and horizontally when you resize the parent widget:<\/p>\n\n\n\n
\"PyQt<\/figure>\n\n\n\n
To allocate spaces for each QLabel<\/code> widget proportionally, you use the setStretchFactor()<\/code> method with the following syntax:<\/p>\n\n\n
setStretchFactor(widget, factor)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
The setStretchFactor()<\/code> method sets a stretch factor<\/code> for the widget<\/code> to stretch within the layout. Therefore, you need to setStretchFactor()<\/code> method after adding the child widgets to the layout.<\/p>\n\n\n\n
The following program uses the setStretchFactor()<\/code> method to set the stretch factors for the first, second, and third QLabel<\/code> widgets as 1, 2, and 3:<\/p>\n\n\n
import<\/span> sys\n<\/span><\/span>from<\/span> PyQt6.QtWidgets import<\/span> QApplication, QWidget, QLabel, QVBoxLayout\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>class<\/span> MainWindow<\/span>(QWidget)<\/span>:<\/span>\n<\/span><\/span>    def<\/span> __init__<\/span>(self, *args, **kwargs)<\/span>:<\/span>\n<\/span><\/span>        super().__init__(*args, **kwargs)\n<\/span><\/span>\n<\/span><\/span>        self.setWindowTitle('PyQt QVBoxLayout'<\/span>)\n<\/span><\/span>\n<\/span><\/span>        # create a layout<\/span>\n<\/span><\/span>        layout = QVBoxLayout()\n<\/span><\/span>        self.setLayout(layout)\n<\/span><\/span>\n<\/span><\/span>        # create buttons<\/span>\n<\/span><\/span>        label_1 = QLabel(''<\/span>)\n<\/span><\/span>        label_1.setStyleSheet('QLabel{background-color:red}'<\/span>)\n<\/span><\/span>\n<\/span><\/span>        label_2 = QLabel(''<\/span>)\n<\/span><\/span>        label_2.setStyleSheet('QLabel{background-color:green}'<\/span>)\n<\/span><\/span>\n<\/span><\/span>        label_3 = QLabel(''<\/span>)\n<\/span><\/span>        label_3.setStyleSheet('QLabel{background-color:blue}'<\/span>)\n<\/span><\/span>\n<\/span><\/span>        layout.addWidget(label_1)\n<\/span><\/span>        layout.addWidget(label_2)\n<\/span><\/span>        layout.addWidget(label_3)\n<\/span><\/span>\n<\/span><\/span>        layout.setStretchFactor(label_1, 1<\/span>)\n<\/span><\/mark>        layout.setStretchFactor(label_2, 2<\/span>)\n<\/span><\/mark>        layout.setStretchFactor(label_3, 3<\/span>)\n<\/span><\/mark>\n<\/span><\/span>        # show the window<\/span>\n<\/span><\/span>        self.show()\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>if<\/span> __name__ == '__main__'<\/span>:\n<\/span><\/span>    app = QApplication(sys.argv)\n<\/span><\/span>    window = MainWindow()\n<\/span><\/span>    sys.exit(app.exec())\n<\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
\"PyQt<\/figure>\n\n\n\n
Because of the stretch factors, the second QLabel<\/code> widget takes twice as much space as the first one and the third QLabel<\/code> widget uses space that is three times bigger than the first one.<\/p>\n\n\n\n
Setting spaces between widgets #<\/a><\/h2>\n\n\n\n
By default, the QVBoxLayout<\/code> sets a default space between widgets. To change the spaces between widgets, you use the setSpacing()<\/code> method. <\/p>\n\n\n\n
The following example uses the setSpacing()<\/code> method to set the spaces between QLabel<\/code> widgets to zero:<\/p>\n\n\n
import<\/span> sys\n<\/span><\/span>from<\/span> PyQt6.QtWidgets import<\/span> QApplication, QWidget, QLabel, QVBoxLayout\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>class<\/span> MainWindow<\/span>(QWidget)<\/span>:<\/span>\n<\/span><\/span>    def<\/span> __init__<\/span>(self, *args, **kwargs)<\/span>:<\/span>\n<\/span><\/span>        super().__init__(*args, **kwargs)\n<\/span><\/span>\n<\/span><\/span>        self.setWindowTitle('PyQt QVBoxLayout'<\/span>)\n<\/span><\/span>\n<\/span><\/span>        # create a layout<\/span>\n<\/span><\/span>        layout = QVBoxLayout()\n<\/span><\/span>        self.setLayout(layout)\n<\/span><\/span>\n<\/span><\/span>        # create buttons<\/span>\n<\/span><\/span>        label_1 = QLabel(''<\/span>)\n<\/span><\/span>        label_1.setStyleSheet('QLabel{background-color:red}'<\/span>)\n<\/span><\/span>\n<\/span><\/span>        label_2 = QLabel(''<\/span>)\n<\/span><\/span>        label_2.setStyleSheet('QLabel{background-color:green}'<\/span>)\n<\/span><\/span>\n<\/span><\/span>        label_3 = QLabel(''<\/span>)\n<\/span><\/span>        label_3.setStyleSheet('QLabel{background-color:blue}'<\/span>)\n<\/span><\/span>\n<\/span><\/span>        layout.addWidget(label_1)\n<\/span><\/span>        layout.addWidget(label_2)\n<\/span><\/span>        layout.addWidget(label_3)\n<\/span><\/span>\n<\/span><\/span>        layout.setSpacing(0<\/span>)\n<\/span><\/mark>\n<\/span><\/span>        # show the window<\/span>\n<\/span><\/span>        self.show()\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>if<\/span> __name__ == '__main__'<\/span>:\n<\/span><\/span>    app = QApplication(sys.argv)\n<\/span><\/span>    window = MainWindow()\n<\/span><\/span>    sys.exit(app.exec())\n<\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Output:<\/p>\n\n\n\n
\"PyQt<\/figure>\n\n\n\n
Setting content margins #<\/a><\/h2>\n\n\n\n
By default, the QVBoxLayout<\/code> sets specific left, top, right, and bottom margins for a widget. To change the margins, you use the setContentsMargins()<\/code> method:<\/p>\n\n\n
setContentsMargins(self<\/span>, left: int, top: int, right: int, bottom: int) -> None<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
For example, the following uses the setContentsMargins()<\/code> method to set the margins for QLabel<\/code> widgets to zero:<\/p>\n\n\n
import<\/span> sys\n<\/span><\/span>from<\/span> PyQt6.QtWidgets import<\/span> QApplication, QWidget, QLabel, QVBoxLayout\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>class<\/span> MainWindow<\/span>(QWidget)<\/span>:<\/span>\n<\/span><\/span>    def<\/span> __init__<\/span>(self, *args, **kwargs)<\/span>:<\/span>\n<\/span><\/span>        super().__init__(*args, **kwargs)\n<\/span><\/span>\n<\/span><\/span>        self.setWindowTitle('PyQt QVBoxLayout'<\/span>)\n<\/span><\/span>\n<\/span><\/span>        # create a layout<\/span>\n<\/span><\/span>        layout = QVBoxLayout()\n<\/span><\/span>        self.setLayout(layout)\n<\/span><\/span>\n<\/span><\/span>        # create buttons<\/span>\n<\/span><\/span>        label_1 = QLabel(''<\/span>)\n<\/span><\/span>        label_1.setStyleSheet('QLabel{background-color:red}'<\/span>)\n<\/span><\/span>\n<\/span><\/span>        label_2 = QLabel(''<\/span>)\n<\/span><\/span>        label_2.setStyleSheet('QLabel{background-color:green}'<\/span>)\n<\/span><\/span>\n<\/span><\/span>        label_3 = QLabel(''<\/span>)\n<\/span><\/span>        label_3.setStyleSheet('QLabel{background-color:blue}'<\/span>)\n<\/span><\/span>\n<\/span><\/span>        layout.addWidget(label_1)\n<\/span><\/span>        layout.addWidget(label_2)\n<\/span><\/span>        layout.addWidget(label_3)\n<\/span><\/span>\n<\/span><\/span>        # set the contents margins<\/span>\n<\/span><\/span>        layout.setContentsMargins(0<\/span>, 0<\/span>, 0<\/span>, 0<\/span>)\n<\/span><\/mark>\n<\/span><\/span>        # show the window<\/span>\n<\/span><\/span>        self.show()\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>if<\/span> __name__ == '__main__'<\/span>:\n<\/span><\/span>    app = QApplication(sys.argv)\n<\/span><\/span>    window = MainWindow()\n<\/span><\/span>    sys.exit(app.exec())\n<\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Output:<\/p>\n\n\n\n
\"PyQt<\/figure>\n\n\n\n
Summary #<\/a><\/h2>\n\n\n\n
  • Use PyQt QVBoxLayout<\/code> to divide the parent widget into vertical boxes and place the child widgets sequentially from top to bottom.<\/li>
  • Use the addStretch()<\/code> method of the QVBoxLayout<\/code> object to add a vertical spacer to the layout to align widgets at the top, bottom, or center.<\/li>
  • Use the setStretchFactor()<\/code> method of the QVBoxLayout<\/code> object to set a stretch factor for a widget in the layout.<\/li>
  • Use the setSpacing()<\/code> method of the  QVBoxLayout<\/code> object to set the spaces between child widgets.<\/li>
  • Use the setContentsMargins()<\/code> method of the QVBoxLayout<\/code> object to set the left, top, right, and bottom margins of the contents.<\/li><\/ul>\n
    \n\t
    \n\t\t
    Was this tutorial helpful ?<\/div>\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t Yes <\/span>\n\t\t\t<\/button>\n\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t No <\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/header>\n\n\t
    \n\t\t
    \n\t\t\t
    <\/div>\n\t\t\t
Note that we use the style sheets<\/a> to set the background color for the QLabel<\/code> widgets. <\/p>\n\n\n\n
After that, create three buttons (QPushButton<\/a><\/code>) from the list titles<\/code> using a list comprehension<\/a>:<\/p>\n\n\n