Qt C++ Basic Layout Widgets: QGridLayout, QVBoxLayout, & QHBoxLayout

(Last Updated On: April 2, 2021)

Qt C++ Basic layout widgets:

Qt C++ Basic Layout Widgets and how to use them in programming- In this article, you will learn about the basic Qt C++ layout widgets. This article can be really helpful for you guys if you want to design beautifully GUI applications using Qt C++. Before we go into the basic Qt layout concept in more detail, let’s look at first the class hierarchy of it (Figure1).

Qt C++
Figure 1: Class hierarchy for the Qtlayout

In practice, the classes QGridLayout, QStackedLayout, QVBoxLayout, and QHBoxLayout are mostly used. All classes are derived from the base class QLayout, which in turn comes from the super- Base class QObject, and QLayoutItem is derived. From QLayoutItem alone the two classes QSpaceItem and QWidgetItem are derived. QBoxLayout in turn can be used directly, but this is also rarely the case because here the two classes QVBoxLayout and QHBoxLayout do most of the cases cover.

Amazon Purchase Links:

Top Gaming Computers

Best Laptops

Best Graphic Cards

Portable Hard Drives

Best Keyboards

Best High Quality PC Mic

Computer Accessories

*Please Note: These are affiliate links. I may make a commission if you buy the components through these links. I would appreciate your support in this way!

QGridLayout, QVBoxLayout, and QHBoxLayout:

The easiest and fastest way to give your application a good layout, the built-in widgets (also called layout manager) QHBoxLayout, QVBoxLayout, and QGridLayout. All three classes are from QLayout (see Figure 1). The individual layouts can be changed quite quickly:

  • QVBoxLayout – arranges the widgets in a vertical column from the top down;
  • QHBoxLayout – arranges the widgets in a horizontal row from the left to right (in countries where the text line runs from right to left the arrangement is also designed accordingly);
  • QGridLayout – arranges the widgets in a two-dimensional grid. This can be thought of as similar to a spreadsheet. On For example, the widget comes in row 1 and row 3, where the count begins from 0.

Example: how to use QGridLayout, QVBoxLayout, and QHBoxLayout in Qt C++ programming:

First, create layoutExample.h file and paste the below code:

Now create the layoutexample.cpp and paste the below code:

Now we need one more class which is main.cpp and paste the below code:


Qt C++
Figure 2: QVBoxLayout, QHBoxLayout, and QGridGroup

Qt C++ Program Explanation:

layoutExample.h code:

In addition to the buttons, you will find the three layout widgets QVBoxLayout, QHBoxLayout and QGridLayout. That there are two classes of the type QVBoxLayout are available has to do with the fact that the individual layout widgets are also available again need to be arranged in the window. As you can see in Figure 2, we arranged the layout widgets vertically. Before we insert the individual layout widgets into the vertical box, however, we put the layouts with the buttons in a group box (QGroupBox). Basically, this is a widget, which in turn can contain widgets and in addition has a frame around these widgets with a text label. Again, the whole thing seems more complicated than it actually is.

layoutexample.cpp code:

In lines 6 to 11 we first create 3 by 4 buttons of the class QPushButton, then in line 13 a vertical layout box (QVBoxLayout), to which 4 buttons are added with addWidget () in lines 14 and 17 respectively. A group box (QGroupBox) with the text label will now appear in line 19 “QGroupBox” is created, in which in line 22 the vertical box (QVBoxLayout) is placed together with the buttons. The same process now also in lines 24 to 33, only in relation to one horizontal box (QHBoxLayout). At the end something similar happens with the grid Layout (QGridLayout). However, the addition of the individual widgets takes place here with addWidget () a little different.

// line 0; Column 0

Grid-> addWidget (but01 [2], 0, 0);

// line 0; Column 1

Grid-> addWidget (but02 [2], 0, 1);

// Line 1; Column 0

Grid-> addWidget (but03 [2], 1, 0);

// Line 1; Column 1;

Grid-> addWidget (but04 [2], 1, 1);

Of course, QGridLayout is a lot more versatile than it seems. Uses for example, the following grid points result in the following:

// line 0; Column 0;

Grid-> addWidget (but01 [2], 0, 0);

// Line 1; Column 0;

Grid-> addWidget (but02 [2], 1, 0);

// row 1, column 1;

Grid-> addWidget (but03 [2], 1, 1);

// Line 2; Column 1

Grid-> addWidget (but04 [2], 2, 1);

Qt C++

What is unpleasant here is that “Button01” and “Button04” are relatively lost here. Do you want the rest of the area to be filled with the button? you must also specify how far the delimitation will extend to the buttons, the buttons should extend. You do this with the following information:

Grid-> addWidget (but01 [2], 0, 0, 1, 2);

Grid-> addWidget (but02 [2], 1, 0);

Grid-> addWidget (but03 [2], 1, 1);

Grid-> addWidget (but04 [2], 2, 0, 1, 2);

In relation to the first line addWidget (but01 [2], 0, 0, 1, 2), this means: Leg the button in row 0 and column 0. The button should only be located above the one Row, but extend over two columns. Through this further information at addWidget () results in the following figure:

Qt C++

At the end of the example, we create another vertical box in line 45, which in lines 47 to 49 has the Group box is added. In the end, we set the layout (line 51) and the window title (line 53).

Qt C++

Recommended For You

About the Author: Engr Fahad

My name is Shahzada Fahad and I am an Electrical Engineer. I have been doing Job in UAE as a site engineer in an Electrical Construction Company. Currently, I am running my own YouTube channel "Electronic Clinic", and managing this Website. My Hobbies are * Watching Movies * Music * Martial Arts * Photography * Travelling * Make Sketches and so on...

Leave a Reply