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.

Cherianne

I want the width of sidebar to be fixed at-least. And if possible the width of upper bar. What should I do? This kind of design is easily possible with web framework, can QT so something? – Cherianne

Yes, Qt can do so. This makes my previous answer totally obsolete, I'll edit it and perhaps you should edit your question too by by removing the previous version and make it clear. You shouldn't do this kind of thing again, it's a very bad act in SO. – Parturient

Totally sorry, I guessed, as sidebars generally are of fixed width, I won't have to mention in explicitly. I was wrong. – Cherianne

I've updated my answer to be the version of stacked widget, please check and see if you have any further problems. Besides, the sidebar should provide some corresponding signals to switch between different pages of the QStackedWidget. – Parturient

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:

Parturient

Is there any way to I can make widget_5 to have fixed size? And can I make widget_1, widget_2, widget_3, widget_4 are part of a stack window? – Cherianne

What do you mean "stack window?" Stacked windows are supposed to be "stacked" while in your picture widget_1~4 are "separate." – Parturient

@ShakibAhmed If you are trying to make a new layout where widget_1~4 are placed together in a stacked window, the answer is Yes. But you should've just asked for the stacked window version instead of the current version in your question. – Parturient

Sorry, firstly sorry because I wrote stacked window, I meant stacked widget. (To err is human) Secondly yes I should have written that in my question. – Cherianne

Excellent explanation and my ui works! For the first time Qt Layout seems easy! – Cherianne

How to make widget 5 of fixed length? – Warchaw

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:

Samurai