Layout for QScrollArea to expand Horizontally&Vertically

Emrecp

Hello
I am trying to create widget like this:
I need to use QScrollArea for more than 100+ items.

When I use QGridLayout I get result like this, the buttons not expanding Horizontally.

This is result when I use QHBoxLayout

Part of my code:
ETag.h

class ETagManager : public QWidget {
	Q_OBJECT
	QList<ETag*> activeTags;
	QList<ETag*> inactiveTags;
	QWidget* widActive = new QWidget(), * widInactive = new QWidget();
	QScrollArea* scrollActive= new QScrollArea(), *scrollInactive= new QScrollArea();
	QVBoxLayout* layTotal;
	
	//QGridLayout* layActive, * layInactive;
	QHBoxLayout* layActive, * layInactive;
	
public:
	ETagManager();
	void Add(ETag*btn, bool active=false);
};
class ETag : public QPushButton {
	Q_OBJECT
	ETagData* data = nullptr;
public:
	ETag(ETagData* _data, QString text);
	void setActive(bool active);
};

ETag.cpp

ETagManager::ETagManager() {
	scrollActive->setWidgetResizable(true);
	scrollInactive->setWidgetResizable(true);

	scrollActive->setStyleSheet("border:none"); scrollActive->setFrameStyle(QFrame::NoFrame);

	scrollInactive->setStyleSheet("border:none"); scrollInactive->setFrameStyle(QFrame::NoFrame);

	layTotal = new QVBoxLayout(this);
	layActive = new QHBoxLayout(widActive);
	layInactive = new QHBoxLayout(widInactive);
	widActive->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
	widInactive->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
	//layActive = new QGridLayout(widActive);
	//layInactive = new QGridLayout(widInactive);
	layTotal->addWidget(scrollActive);
	layTotal->addWidget(scrollInactive);
	scrollActive->setWidget(widActive);
	scrollInactive->setWidget(widInactive);
	
	
	layActive->setAlignment(Qt::AlignTop|Qt::AlignLeft);
	layInactive->setAlignment(Qt::AlignTop | Qt::AlignLeft);
	//layActive->addStretch();
	//layInactive->addStretch();
	setLayout(layTotal);
	
	//setStyleSheet("background-color:yellow");
}
void ETagManager::Add(ETag* btn, bool active) {
	if (active)
	{
		this->activeTags.append(btn);
		layActive->addWidget(btn);
		//layActive->insertWidget(layActive->count()-1, btn);
	}
	else {
		this->inactiveTags.append(btn);


		scrollInactive->sizePolicy().setVerticalStretch(1);
		scrollInactive->sizePolicy().setHorizontalStretch(1);
		//layInactive->addWidget(btn,i/5,i%5,1,1);
		layInactive->insertWidget(layInactive->count()-1, btn);
	}
}

ETag::ETag(ETagData *_data, QString text) {
	this->data = _data;
	setText(text);
	adjustSize();
	int w = width();
	qDebug() << w;
	QString stylesh = QString(R"(
		background-color:%1;
		color:%2;
		border:2px solid %2;
		border-radius:%4px;
		padding-left:20px;
		padding-right:20px;
		padding-top:10px;
		padding-bottom:10px;
)").arg(data->color_baseBackground.name()).arg(data->color_text_and_border.name()).arg((int)(w/4.0f)-1);
	setStyleSheet(stylesh);
	//setFixedWidth(50);
}

Thanks!

Chris Kawa

There's no built-in layout that will do what you want, but Qt comes with examples, and one of them is a custom Flow Layout that behaves like what the picture shows - fits as many items as it can in a line and then moves to the next. Take a look: Flow Layout. You might be able to take it directly or tweak a little to match what you need.

Emrecp

@Chris-Kawa This worked, thank you very much!

Emrecp

This post is deleted!