Why does this scrollable area not keep the wanted size of my images?

Question

I have developed a Qt application. I built a form with Qt Designer. The important fact is that I have a Scroll Area like this :

<widget class="QScrollArea" name="scrollArea">
<property name="geometry">
 <rect>
  <x>299</x>
  <y>50</y>
  <width>631</width>
  <height>441</height>
 </rect>
</property>
<property name="widgetResizable">
 <bool>false</bool>
</property>
<widget class="QWidget" name="scrollAreaWidgetContents">
 <property name="geometry">
  <rect>
   <x>0</x>
   <y>0</y>
   <width>639</width>
   <height>429</height>
  </rect>
 </property>
</widget>

then, in my form, I first set a layout to my QscrollArea :

Form::Form(QWidget *parent) :
QWidget(parent),
ui(new Ui::Form)
{

    ui->setupUi(this);
    gridLayout = new QGridLayout;
    ui->scrollArea->setLayout(gridLayout);

}

then, I want to add 50 pictures and a progress bar for each picture (I am making multimedia retrieval actually) inside this ScrollArea

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

      QLabel * L = new QLabel;
      L->setScaledContents(true);
      QProgressBar *dist=new QProgressBar;

      L->setGeometry(250,150, 100, 100);
      dist->setGeometry(250,150,100,100);
      L->setObjectName("lab" + (i+1));
      dist->setObjectName("d" + (i+1));
      QString chemin ="my_path"+QString::fromStdString(im[i])+".jpg";
      QPixmap image(chemin);
      L->setPixmap(image.scaled(L->size()));

      if((n_algo==2||n_algo==4)&&index_2==0) 
          dist->setValue(p[i]*100);
      else if ((n_algo==2||n_algo==4)&&index_2==2)
          dist->setValue(p[i]/p[0]*100);
      else
          dist->setValue(100-(p[i]*100));;
      gridLayout->addWidget(L, 2*(i/10),i%10);
      gridLayout->addWidget(dist,2*(i/10)+1,i%10);
  }

But that gives sth like this :

That's not so bad but it seems that the images are scaled in a way that all can be placed into the "physical" size of the area. Indeed, if I increase the number of columns (here the number of colums is 10, the denominator in the two last lines), I get the images are compressed (giving sth really odd) and it seems that the scroll bars are actually never useful (all is always stacked into a fixed size window).

What I would like are images with a fixed, convenient size whatever the number of images to display or the disposition (number of rows and columns), where it would be able to scroll inside the scrollArea if needed to look at the pictures.

Thanks for help

EDIT : after the first answer, here is what I have. I still can't scroll...

Answer 1

First of all, the layout should not be set in the QScrollArea but in the scrollAreaWidgetContents:

gridLayout = new QGridLayout;
ui->scrollAreaWidgetContents->setLayout(gridLayout);
ui->scrollArea->setWidgetResizable(true);

And then you must set a fixed size to the QLabel:

QSize s(128, 128);

for (int i=0; i<50; i++)
{
    QLabel *L = new QLabel;
    L->setScaledContents(true);
    QProgressBar *dist=new QProgressBar;
    L->setObjectName(QString("lab%1").arg(i+1));
    dist->setObjectName(QString("d%1").arg(i+1));
    QString chemin ="my_path"+QString::fromStdString(im[i])+".jpg";
    QPixmap image(chemin);
    L->setPixmap(image);
    L->setFixedSize(s);
    if((n_algo==2||n_algo==4)&&index_2==0)
        dist->setValue(p[i]*100);
    else if ((n_algo==2||n_algo==4)&&index_2==2)
        dist->setValue(p[i]/p[0]*100);
    else
        dist->setValue(100-(p[i]*100));
    QVBoxLayout *lay = new QVBoxLayout;
    lay->setContentsMargins(0, 0, 0, 0);
    lay->addWidget(L);
    lay->addWidget(dist);
    gridLayout->addLayout(lay, i/10, i%10);
}