CODEWITHSUNDEEP
qt
PeerPandit
PeerPandit

Reputation: 309

qt vertical and horizontal layouts inside gridlayout?

Actual One
Desired One

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;
    }

Upvotes: 4

Views: 3785

Answers (1)

ThorngardSO
ThorngardSO

Reputation: 1211

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)?

Upvotes: 3

Related Questions