{"id":4965,"date":"2022-09-20T09:12:50","date_gmt":"2022-09-20T09:12:50","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=4965"},"modified":"2022-10-14T03:37:45","modified_gmt":"2022-10-14T03:37:45","slug":"pyqt-qgridlayout","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/pyqt\/pyqt-qgridlayout\/","title":{"rendered":"PyQt QGridLayout"},"content":{"rendered":"\n

Summary<\/strong>: in this tutorial, you will learn how to use PyQt QGridLayout<\/code> to arrange widgets in uniform rows and columns.<\/p>\n\n\n\n

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

The QGridLayout<\/code> allows you to place widgets in uniform rows <\/em>and columns <\/em>of a grid. For example, the following picture shows a grid that consists of four columns and three rows:<\/p>\n\n\n\n

\"PyQt<\/figure>\n\n\n\n

Rows and columns are zero-based indexing<\/em>. It means that the first row has an index of zero, the second row has an index of one, and so on. Similarly, the first column has an index of zero, the second column has an index of one, etc.<\/p>\n\n\n\n

The intersection between a row and a column is called a cell<\/em>. A cell is a space where you can place a widget.<\/p>\n\n\n\n

Rows and columns can span. For example, the following picture illustrates that the second column of the first row spans two columns and the second row of the second column spans two rows:<\/p>\n\n\n\n

\"PyQt<\/figure>\n\n\n\n

If a widget takes less space than the containing cell, you can align it within the cell using one of the following alignment options:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
Alignment Flag<\/th>Meaning<\/th><\/tr><\/thead>
AlignAbsolute<\/code><\/td>If the direction is left to right, the AlignLeft<\/code> means align with the right <\/em>edge. However, if you want AlignLeft<\/code> to be always aligned with the left edge, you can combine the AlignLeft<\/code> with the AlignAbsolute<\/code> option.<\/td><\/tr>
AlignBaseline<\/code><\/td>Align the widget with the baseline.<\/td><\/tr>
AlignBottom<\/code><\/td>Align the widget with the bottom edge.<\/td><\/tr>
AlignCenter<\/code><\/td>Centers the widget in both dimensions.<\/td><\/tr>
AlignHCenter<\/code><\/td>Centers the widget horizontally in the available space.<\/td><\/tr>
AlignHorizontal_Mask<\/code><\/td>AlignLeft<\/code> | AlignRight | AlignHCenter | AlignJustify | AlignAbsolute<\/code><\/td><\/tr>
AlignJustify<\/code><\/td>Justifies the text in the available space.<\/td><\/tr>
AlignLeft<\/code><\/td>Align the widget with the left edge.<\/td><\/tr>
AlignRight<\/code><\/td>Align the widget with the right edge.<\/td><\/tr>
AlignTop<\/code><\/td>Align the widget with the top edge.<\/td><\/tr>
AlignVCenter<\/code><\/td>Centers the widget vertically in the available space.<\/td><\/tr>
AlignVertical_Mask<\/code><\/td>AlignTop<\/code> | AlignBottom | AlignVCenter | AlignBaseline<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Using a QGridLayout #<\/a><\/h3>\n\n\n\n

To use the QGridLayout<\/code>, you follow these steps:<\/p>\n\n\n\n

First, create a QGridLayout<\/code> object:<\/p>\n\n\n

layout = QGridLayout()<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Second, set the parent widget layout:<\/p>\n\n\n
parent.setLayout(layout)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Third, place the child widgets on the grid layout:<\/p>\n\n\n
layout.addWidget(widget, row, column, rowSpan, columnSpan, alignment)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
In this syntax: <\/p>\n\n\n\n