Qt5 Tutorial Layouts without Designer - 2020

In this tutorial, we will learn Layouts of Qt. We will add layouts to a form and add widgets to the layout programmatically instead of using Designer as was done in the Layouts.

We will create an empty project and will create 6 PushButtons. Then, we will arrange 3 buttons with horizontal layout, and the other three with vertical layout. The two layouts will be added to the the outer most layout, and then we pass the outer layout to our widget using setLayout().

File->Other Project->Empty Qt Project

There is none in the Project explorer, and even the .pro has nothing in it. So, we need to create a file main.cpp by Add New...

#include <QApplication>
#include <QPushButton>
#include <QHBoxLayout>
#include <QVBoxLayout>

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

    // Horizontal layout with 3 buttons
    QHBoxLayout *hLayout = new QHBoxLayout;
    QPushButton *b1 = new QPushButton("A");
    QPushButton *b2 = new QPushButton("B");
    QPushButton *b3 = new QPushButton("C");
    hLayout->addWidget(b1);
    hLayout->addWidget(b2);
    hLayout->addWidget(b3);

    // Vertical layout with 3 buttons
    QVBoxLayout *vLayout = new QVBoxLayout;
    QPushButton *b4 = new QPushButton("D");
    QPushButton *b5 = new QPushButton("E");
    QPushButton *b6 = new QPushButton("F");
    vLayout->addWidget(b4);
    vLayout->addWidget(b5);
    vLayout->addWidget(b6);

    // Outer Layer
    QVBoxLayout *mainLayout = new QVBoxLayout;
    
    // Add the previous two inner layouts
    mainLayout->addLayout(hLayout);
    mainLayout->addLayout(vLayout);

    // Create a widget
    QWidget *w = new QWidget();
    
    // Set the outer layout as a main layout 
    // of the widget
    w->setLayout(mainLayout);

    // Window title
    w->setWindowTitle("layouts");
    
    // Display
    w->show();
    
    // Event loop
    return app.exec();
}

We also need to edit the .pro file:

QT += core gui
QT += widgets
SOURCES += \
    main.cpp

Note that we could have taken out the line:

QT += core gui

and instead, we could have added include statements in the main.cpp:

#include <QtCore>
#include <QtGui>

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