qt vertical and horizontal layouts inside gridlayout? - qt

Question

I am new to Qt App Development. I am attaching two screen shots, one is the desired ui and other is created one using code.
I believe my code will explain things, instead of my typing here and confusing all my friends here. What needs to be changed /updated?
/* HEADER FILE */
#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
namespace Ui {
class Widget;
}
class Widget : public QWidget
{
Q_OBJECT
public:
explicit Widget(QWidget *parent = 0);
~Widget();
private:
// Ui::Widget *ui;
};
#endif // WIDGET_H
/*Implementation Code */
#include "widget.h"
#include "ui_widget.h"
#include<QGridLayout>
#include<QVBoxLayout>
#include<QHBoxLayout>
Widget::Widget(QWidget *parent) :
QWidget(parent)//,
//ui(new Ui::Widget)
{
this->setGeometry(50,50,850,650);
QGridLayout *gridLayout= new QGridLayout(this);
setLayout(gridLayout);
QVBoxLayout *vLayout = new QVBoxLayout(this);
QHBoxLayout *hLayout = new QHBoxLayout(this);
//QWidget *tmp1 = new QWidget(this);
//QWidget *tmp2 = new QWidget(this);
// tmp1->setLayout(vLayout);
// tmp2->setLayout(hLayout);
gridLayout->addLayout(vLayout,0,3);
gridLayout->addLayout(hLayout,3,0);
//gridLayout->addWidget(tmp1,0,3,1,1);
//gridLayout->addWidget(tmp2,3,0,1,1);
QWidget *w = new QWidget(this);
QWidget *w1 = new QWidget(this);
QWidget *w2 = new QWidget(this);
QWidget *w3 = new QWidget(this);
QWidget *w11 = new QWidget(this);
QWidget *w22 = new QWidget(this);
QWidget *w33 = new QWidget(this);
QWidget *w4 = new QWidget(this);
QWidget *w5 = new QWidget(this);
w->setStyleSheet("background-color:rgb(0,0,0);");
w1->setStyleSheet("background-color:rgb(255,0,0);");
w2->setStyleSheet("background-color:rgb(255,0,255);");
w3->setStyleSheet("background-color:rgb(0,255,0);");
w11->setStyleSheet("background-color:rgb(255,0,0);");
w22->setStyleSheet("background-color:rgb(255,0,255);");
w33->setStyleSheet("background-color:rgb(0,255,0);");
w4->setStyleSheet("background-color:rgb(0,0,255);");
w5->setStyleSheet("background-color:rgb(255,255,0);");
vLayout->addWidget(w1);
vLayout->addWidget(w2);
vLayout->addWidget(w3);
vLayout->addWidget(w11);
vLayout->addWidget(w22);
vLayout->addWidget(w33);
hLayout->addWidget(w4);
hLayout->addWidget(w5);
gridLayout->addWidget(w,0,0,2,2);
show();
}
Widget::~Widget()
{
//delete ui;
}

Answer 1

The code doesn't look so bad. In my opinion, you just need to tweak the parameters to your addWidget/addLayout calls. Think about what your grid-layout should be like, and then choose the parameters accordingly.
I would try it like this:
// Desired grid layout is of size 2x2:
// .................
// . row0 . row0 .
// . col0 . col1 .
// .................
// . row1 . row1 .
// . col0 . col1 .
// .................
// Big widget at row 0, column 0
gridLayout->addWidget (w, 0, 0);
// "Horizontal group" at row 1, column 0
gridLayout->addLayout (hLayout, 1, 0);
// "Vertical group" at rows 0+1 (i.e. rowspan 2), column 1
gridLayout->addLayout (vLayout, 0, 1, 2, 1);
Does that work better (I havent tried it out myself)?