Qt: what layout or combination of layout should use in this case?

Question

I am working on a Qt Project and for this project I require to design something like this:

I have designed so far in Qt Creator and I have the component ready, but when I am trying to add widget in different layouts, I am not getting the shapes I want. What should I do to make my application resizable?

Catches:

• Sidebar has fixed width, which means for horizontal increment of window size the sidebar's horizontal width won't increase. Sidebar itself is a widget.
• upperbar's vertical width is fixed (if possible). Which means, during vertical window size increment the upperbar can't become vertically wider. And it itself is also a widget.
• the widgets by the side of sidebar are in a qstackedwidget.

Answer 1

Nested layouts:

(green square = QStackedWidget)

Steps:

[Definition]

H(x, y, ...) = horizontal layouts on x, y, ...; where x, y, ... are widget(W#) or Layout(L#)

V(x, y, ...) = horizontal layouts on x, y, ...; where x, y, ... are widget(W#) or Layout(L#)

• Step 1: V(W1, W2) = L1
• Step 2: H(W3, L1) = L2
• Step 3: V(W4, L2) = L3
• Step 4: Set L3 as the layout of current page of the StackedWidget layout
• Step 5: H(W5, StackedWidget) = L4
• Step 6: H(W6, a spacer, W7) = L5
• Step 7: V(L5, L4)

Notice that W6 and W7 are fixed in horizontal size (or set maximum on it), the spacer between them acts as the only resizable widget in the layout L5.

---

And here is the hierarchy:

Answer 2

Just for fun, the code version, with minimal optimized code...

#include "mainwindow.h"

#include <QBoxLayout>
#include <QLabel>
#include <QStackedWidget>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
// Ingredients (taken from the mockup from top-left to bottom-right)
QFrame *upperBar = new QFrame;
QLabel *upperIcon = new QLabel("icon");
QLabel *profilePicture = new QLabel("profile picture");

QFrame *sideBar = new QFrame;
QLabel *sideItemA = new QLabel("Item A");
QLabel *sideItemB = new QLabel("Item B");

QStackedWidget *contentStack = new QStackedWidget;

QFrame *contentPage1 = new QFrame;
QLabel *page1WidgetA = new QLabel("I am widget A");
QLabel *page1WidgetB = new QLabel("I am widget B");
QLabel *page1WidgetC = new QLabel("I am widget C");
QLabel *page1WidgetD = new QLabel("I am widget D");

QWidget *centralWidget = new QWidget;

// The needed layouts:
QHBoxLayout *upperBarLayout = new QHBoxLayout;
QVBoxLayout *sideBarLayout = new QVBoxLayout;
QGridLayout *page1GridLayout = new QGridLayout;
QGridLayout *centralLayout = new QGridLayout;

// Let's connect the pieces:

/* First we setup the upperbar: */
upperBarLayout->addWidget(upperIcon, 1, Qt::AlignLeft);
upperBarLayout->addWidget(profilePicture, 3, Qt::AlignRight);
upperBar->setLayout(upperBarLayout);
upperBar->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);

/* Then we setup the sidebar: */
sideBarLayout->addWidget(sideItemA);
sideBarLayout->addWidget(sideItemB);
sideBarLayout->addStretch();
sideBar->setLayout(sideBarLayout);
sideBar->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Expanding);

/* Then we setup the content stacked widget */
page1GridLayout->addWidget(page1WidgetA, 0, 0, 3, 1);
page1GridLayout->addWidget(page1WidgetB, 0, 1, 1, 1);
page1GridLayout->addWidget(page1WidgetC, 1, 1, 2, 1);
page1GridLayout->addWidget(page1WidgetD, 3, 0, 1, 2);
contentPage1->setLayout(page1GridLayout);

contentStack->addWidget(contentPage1);
contentStack->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

/* Finally we setup the main elements into the central layout... */
centralLayout->addWidget(upperBar, 0, 0, 1, 2);
centralLayout->addWidget(sideBar, 1, 0, 1, 1);
centralLayout->addWidget(contentStack, 1, 1, 1, 1);
centralWidget->setLayout(centralLayout);
setCentralWidget(centralWidget);

/* Let's color it a little to better realize the positioning: */
setStyleSheet("QWidget {"
              "border: 1px solid black;"
              "color: red"
              "}");
}

MainWindow::~MainWindow()
{

}

Here is the result: