Trying to add new widgets to a scroll area on click

I am trying to add a custom widget to a scroll area on click.

Let say this is my custom widget
Attachment 13094

And this is the main window where I can add my custom widget one by one when I click the "add" button.
Attachment 13095

Now when I try to add many custom widgets to that scroll area, the scroll bar didn't show up but instead
all the custom widgets huddled within the scroll area.

Clicked twice the "add" button:
Attachment 13096

Clicked the "add" button for 5 times:
Attachment 13097

But it works when I am adding many QPushButtons:
Attachment 13098


I am new to Qt so I hope that someone can show me how to do this in ui. Thanks in advance.

I assume that you have implemented your QScrollArea so that it contains a QWidget as the widget it controls, and that widget contains a QVBoxLayout that you are adding the copies of your custom widget to. If not, that's first thing you need to fix. Read the documentation for QScrollArea::setWidget() so you do this correctly.

You also need to call QScrollArea::setWidgetResizable() with "true".

As you add each copy of your custom widget, you may want to call QScrollArea::ensureWidgetVisible() with the pointer to that custom widget so the scroll area will scroll so it can be seen.

Calling QScrollArea::setWidgetResizable() with true is supposed to automatically resize the QWidget as its contents grow, but if that doesn't work in your case, you may need to resize the QWidget manually as you add custom widgets to make sure it grows to contain them. Otherwise, you will get the behavior you see - the custom widgets get squashed because the QWidget does not resize to fit them. As the QWidget grows to be bigger than the scroll area, the scroll bars will automatically appear. When you compute the size of the QWidget, be sure to take into account the spacing and margins of the layout and size and margins of your custom widget, and not just the size of the custom widget alone. If you don't do this, the custom widgets will still get squashed, just not as quickly.

This is what the object inspector currently looks like
Attachment 13101

in form ui
Attachment 13100

I put the scroll area at the second page of the stacked widget. On this page, there is a little vertical layout on the top left corner and a scroll area at the right side. I made a function for that "add" function.

Code:

---

void MainWindow::on_pushButton_2_clicked(){
 
ui->scrollArea->setWidgetResizable(true);
 
ui->scrollAreaWidgetContents->setLayout(layout);
 
ui->scrollArea->ensureWidgetVisible(ui->scrollAreaWidgetContents);
 
// to add my custome widget
ui->scrollAreaWidgetContents->layout()->addWidget(new modal(this));
 
ui->scrollArea->ensureWidgetVisible(ui->scrollAreaWidgetContents);
 
}

---

"QScrollArea so that it contains a QWidget as the widget it controls, and that widget contains a QVBoxLayout "

I'm not sure what QWidget should this be, but I assume that it is the scrollAreaWidgetContent.

So I wrote the line " ui->scrollAreaWidgetContents->setLayout(layout); " as you mentioned "and that widget contains a QVBoxLayout that you are adding the copies of your custom widget to"

and finally, I wrote the line to invoke ensureWidgetVisible(). But the widgets still got squashed.

When I run the program it says "QLayout: Attempting to add QLayout "" to MainWindow "MainWindow", which already has a layout". I assume this is because I tried to put 2 layouts on the same page of the stackedWidget?

I am not sure if I have to call all those items via stackedWidget such as "ui->stackedWidget->page_2->scrollArea->...."

I need more help from you. Thanks in advance.

From looking at your widget hierarchy, it seems like page2 of your stacked layout is not correct. That whole widget needs a layout so that the set of radio buttons and so forth is in one part of it, and the scroll area in the other part. You probably want a QHBoxLayout for this. When you finish, your page2 widget should look something like this:

Code:

---

QWidget (page_2)
-- QHBoxLayout
---- QVBoxLayout (left hand side of hbox)
------- QCheckBox (checkBox)
------- QPushButton (pushButton_2
------- etc.
---- QScrollArea (right hand side of hbox)
------ QWidget (scrollAreaWidgetContents)
-------- QVBoxLayout (layout for scroll area's widget)
----------  your custom widget #1
----------  your custom widget #2
----------  etc.

---

Your page 1 widget also needs a layout. Any time you have child widgets within another QWidget, you need to place a layout of some kind inside that QWidget to manage the layout of the child widgets. It is bad practice to simply add child widgets directly to a QWidget with absolute positions. By using a layout, the child widgets will behave properly as the window is resized. With no layout, the child widgets won't move or resize along with the widget that contains them.

You also do not need the QWidget you have added as the central widget for the main window. You can make the QStackedWidget the central widget directly.