How to implement Flow layout in a Group Box.
-
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.
-
@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
andflowlayout.cpp
) to your project.
Or you create a new class in your project. Name itFlowLayout
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. -
@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.
-
@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 aQWidget
. AFlowLayout
is a layout, so use it like/where any other layout, such as yourQGridLayout
.QWidget
->FlowLayout
-> add however manyQWidget
/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 theQGridLayout
. -
-
-