Qt5 Tutorial Grid Layout - 2020

In this tutorial, we will learn Grid Layout of Qt. We will modify the code we used in the previous tutorial, Layouts without Designer.

Grid Layout provides a way of dynamically arranging items in a grid.

If the GridLayout is resized, all items in the layout will be rearranged. It is similar to the widget-based QGridLayout. All children of the GridLayout element will belong to the layout. If you want a layout with just one row or one column, you can use the RowLayout or ColumnLayout. These offers a bit more convenient API, and improves readability.

By default items will be arranged according to the flow property. The default value of the flow property is GridLayout.LeftToRight.

If the columns property is specified, it will be treated as a maximum limit of how many columns the layout can have, before the auto-positioning wraps back to the beginning of the next row. The columns property is only used when flow is GridLayout.LeftToRight.

Here is our new file main.cpp:

#include <QApplication>
#include <QtCore>
#include <QtGui>
#include <QPushButton>
#include <QGridLayout>

int main(int argc, char* argv[])
{
    QApplication app(argc, argv);

    // Grid layout with 3 buttons
    QGridLayout *gridLayout = new QGridLayout;
    QPushButton *b1 = new QPushButton("A");
    QPushButton *b2 = new QPushButton("B");
    QPushButton *b3 = new QPushButton("C");
    QPushButton *b4 = new QPushButton("D");
    QPushButton *b5 = new QPushButton("E");
    QPushButton *b6 = new QPushButton("F");

    // addWidget(*Widget, row, column, rowspan, colspan)
    // 0th row
    gridLayout->addWidget(b1,0,0,1,1);
    gridLayout->addWidget(b2,0,1,1,1);
    gridLayout->addWidget(b3,0,2,1,1);

    // 1st row
    gridLayout->addWidget(b4,1,0,1,1);

    // 2nd row with 2-column span
    gridLayout->addWidget(b5,2,0,1,2);

    // 3rd row with 3-column span
    gridLayout->addWidget(b6,3,0,1,3);

    // Create a widget
    QWidget *w = new QWidget();

    // Set the grid layout as a main layout
    w->setLayout(gridLayout);

    // Window title
    w->setWindowTitle("Grid Layouts (3x4)");

    // Display
    w->show();

    // Event loop
    return app.exec();
}

Run the code:

Qt 5 Tutorial

1. Hello World
2. Signals and Slots
3. Q_OBJECT Macro
4. MainWindow and Action
5. MainWindow and ImageViewer using Designer A
6. MainWindow and ImageViewer using Designer B
7. Layouts
8. Layouts without Designer
9. Grid Layouts
10. Splitter
11. QDir
12. QFile (Basic)
13. Resource Files (.qrc)
14. QComboBox
15. QListWidget
16. QTreeWidget
17. QAction and Icon Resources
18. QStatusBar
19. QMessageBox
20. QTimer
21. QList
22. QListIterator
23. QMutableListIterator
24. QLinkedList
25. QMap
26. QHash
27. QStringList
28. QTextStream
29. QMimeType and QMimeDatabase
30. QFile (Serialization I)
31. QFile (Serialization II - Class)
32. Tool Tips in HTML Style and with Resource Images
33. QPainter
34. QBrush and QRect
35. QPainterPath and QPolygon
36. QPen and Cap Style
37. QBrush and QGradient
38. QPainter and Transformations
39. QGraphicsView and QGraphicsScene
40. Customizing Items by inheriting QGraphicsItem
41. QGraphicsView Animation
42. FFmpeg Converter using QProcess
43. QProgress Dialog - Modal and Modeless
44. QVariant and QMetaType
45. QtXML - Writing to a file
46. QtXML - QtXML DOM Reading
47. QThreads - Introduction
48. QThreads - Creating Threads
49. Creating QThreads using QtConcurrent
50. QThreads - Priority
51. QThreads - QMutex
52. QThreads - GuiThread
53. QtConcurrent QProgressDialog with QFutureWatcher
54. QSemaphores - Producer and Consumer
55. QThreads - wait()
56. MVC - ModelView with QListView and QStringListModel
57. MVC - ModelView with QTreeView and QDirModel
58. MVC - ModelView with QTreeView and QFileSystemModel
59. MVC - ModelView with QTableView and QItemDelegate
60. QHttp - Downloading Files
61. QNetworkAccessManager and QNetworkRequest - Downloading Files
62. Qt's Network Download Example - Reconstructed
63. QNetworkAccessManager - Downloading Files with UI and QProgressDialog
64. QUdpSocket
65. QTcpSocket
66. QTcpSocket with Signals and Slots
67. QTcpServer - Client and Server
68. QTcpServer - Loopback Dialog
69. QTcpServer - Client and Server using MultiThreading
70. QTcpServer - Client and Server using QThreadPool
71. Asynchronous QTcpServer - Client and Server using QThreadPool
72. Qt Quick2 QML Animation - A
73. Qt Quick2 QML Animation - B
74. Short note on Ubuntu Install
75. OpenGL with QT5
76. Qt5 Webkit : Web Browser with QtCreator using QWebView Part A
77. Qt5 Webkit : Web Browser with QtCreator using QWebView Part B
78. Video Player with HTML5 QWebView and FFmpeg Converter
79. Qt5 Add-in and Visual Studio 2012
80. Qt5.3 Installation on Ubuntu 14.04
81. Qt5.5 Installation on Ubuntu 14.04
82. Short note on deploying to Windows