How to implement Flow layout in a Group Box.

[Aronox]

Hi i am making an application using Qt widget and i want to make the main content area as a flow layout where small boxes will arrange themselves. There is a side bar which is used to switch between pages (using stacked widget). There is a flow layout example here: https://doc.qt.io/qt-6/qtwidgets-layouts-flowlayout-example.html

But i am having a hard time to implement it into my project. I am VERY new to Qt and C++ and am also using qmake for my project but the example is using Cmake. Please any help will be appreciated and a detailed explanation will be absolutely loved.

thanks in advance.

[Pl45m4]

@Aronox said in How to implement Flow layout in a Group Box.:

I am VERY new to Qt and C++ and am also using qmake for my project but the example is using Cmake. Please any help will be appreciated and a detailed explanation will be absolutely loved.

To use the FlowLayout class from the example, the build system doesn't matter. You can copy the class files (flowlayout.h and flowlayout.cpp) to your project.
Or you create a new class in your project. Name it FlowLayout and then you just copy-paste the content.
If you choose the first way of doing it, you need to manually add the copied files to your *.pro file.

[Aronox]

@Pl45m4 thank you for your reply. but I already have added them into my project. I just am not understanding how to implement it. like should I do

QWidget *fl=new Flowlayout(this);

or somehting like that. I have already been trying to make my own version of the flow layout but using Qtimers. Essentially what I am doing is adding my custom widget form class to the grid layout. the no of boxes added is determied by dividing the width groupbox layout and the width of the custom box and adding the boxes until the col number is higher than the division result-1. then I move on to the next row. but the problem is that when I reduce the size after incresaing it, the boxes move to a weird position.

Here are my codes:

cstm_flow_layout.h:

#ifndef CSTM_FLOW_LAYOUT_H
#define CSTM_FLOW_LAYOUT_H

#include <QMainWindow>
#include<QTimer>
#include "newwidget.h"
QT_BEGIN_NAMESPACE
namespace Ui {
class cstm_Flow_layout;
}
QT_END_NAMESPACE

class cstm_Flow_layout : public QMainWindow
{
    Q_OBJECT

public:
    cstm_Flow_layout(QWidget *parent = nullptr);
    ~cstm_Flow_layout();


private slots:
    void myfunc();
    void myfunc2();

private:
    Ui::cstm_Flow_layout *ui;
    QTimer *timer;
    QTimer *timer2;
    newWIdget *box4[10];
    int boxNo=10;
    int width;
    int height;
    int width2;
    int height2;
};
#endif // CSTM_FLOW_LAYOUT_H

cstm_flow_layout.ccp:

#include "cstm_flow_layout.h"
#include "newwidget.h"
#include "ui_cstm_flow_layout.h"
#include "flowlayout.h"
#include <iostream>
#include <QTimer>

cstm_Flow_layout::cstm_Flow_layout(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::cstm_Flow_layout)
{
    ui->setupUi(this);

   


    timer =new QTimer(this);
    connect(timer,SIGNAL(timeout()),this,SLOT(myfunc()));
    //timer->start(2000);

    timer2 =new QTimer(this);
    connect(timer2,SIGNAL(timeout()),this,SLOT(myfunc2()));
    timer2->start(1000);


}

cstm_Flow_layout::~cstm_Flow_layout()
{
    delete ui;
}


//=======GLOBAL SCOPE==========>
int flag=0;
//=============================>


void cstm_Flow_layout::myfunc()
{
    QRect currentGeometry2 = ui->groupBox->geometry();
    int width3 = currentGeometry2.width();
    int height3 = currentGeometry2.height();

    QWidget *check2=new newWIdget;
    QRect currentGeometry23 = check2->geometry();
    int width23 = currentGeometry23.width();
    int height23 = currentGeometry23.height();

    std::cout<<"the width:"<<width3<<std::endl;
    std::cout<<"the height:"<<height3<<std::endl;

    std::cout<<"the width2:"<<width23<<std::endl;
    std::cout<<"the height2:"<<height23<<std::endl;
}

void cstm_Flow_layout::myfunc2()
{
    //
    if(flag!=0){
        for (int i = 0; i < 9; ++i) {
            box4[i]->close();
        }
        //timer2->stop();
    }

    QRect currentGeometry = ui->groupBox->geometry();
    width = currentGeometry.width();
    height = currentGeometry.height();

    QWidget *check=new newWIdget;
    QRect currentGeometry2 = check->geometry();
    width2 = (currentGeometry2.width())+10;
    height2 = currentGeometry2.height();

    //int maxRow=(height/height2);
    int colNo=0;
    int roNo=0;

    for (int i = 0; i < 9; ++i) {

        int math=width/width2;

        if(colNo>(math-1)){
            roNo++;
            colNo=0;
        }
        std::cout<<"the math is:"<<math<<"and col no is:"<<colNo<<"\n\n"<<std::endl;
        box4[i]=new newWIdget(this);
        ui->mainbox->setColumnMinimumWidth(colNo,202);
        ui->mainbox->setRowMinimumHeight(roNo,218);
        ui->mainbox->addWidget(box4[i],roNo,colNo);
        box4[i]->setAttribute(Qt::WA_DeleteOnClose,true);
        colNo++;
        // QTimer *timer2=new QTimer(this);
        // connect(timer2,SIGNAL(timeout()),this,SLOT(myfunc()));
    }
    flag=1;

}

newwidget.h:

#ifndef NEWWIDGET_H
#define NEWWIDGET_H

#include <QWidget>

namespace Ui {
class newWIdget;
}

class newWIdget : public QWidget
{
    Q_OBJECT

public:
    explicit newWIdget(QWidget *parent = nullptr);
    ~newWIdget();

private:
    Ui::newWIdget *ui;
};

#endif // NEWWIDGET_H

newwidget.cpp:

#include "newwidget.h"
#include "ui_newwidget.h"

newWIdget::newWIdget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::newWIdget)
{
    ui->setupUi(this);
}

newWIdget::~newWIdget()
{
    delete ui;
}

not using flowlayout.h flowlayout.cpp. they are from the example project.

here are some more screenshots:

but when I reduce the size:

can you please tell me what is going wrong? and always thank you for your time.

[JonB]

@Aronox said in How to implement Flow layout in a Group Box.:

I just am not understanding how to implement it. like should I do

QWidget *fl=new Flowlayout(this);
or somehting like that.

No, a FlowLayout is not a QWidget. A FlowLayout is a layout, so use it like/where any other layout, such as your QGridLayout. QWidget -> FlowLayout -> add however many QWidget/QWidget-derived objects onto it. It will arrange them in a "flow" way. Since it's the same as adding widgets to any layout I don't see what else to say/you are asking. Just use it in place of the QGridLayout.

[Aronox]

This post is deleted!

[Aronox]

@JonB hey i got it working thank you for your help!!