GridLayout with scaled images has huge row spacing - layout

Question

I have a simple "dialog" in qml where the user is supposed to select one image. Images are scaled-down and shown in a GridLayout inside ScrollView. Images should be 1/2 width of the scrollview, there will be descriptions next to it.
What I see is that the vertical spacing is huge and it does not change with resizing the window. It actually seems that the spacing corresponds to full-size (unscaled) images.
The issue changes when I set Layout.preferredHeight: 100 (for example), but then again the spacing is there should the images be smaller than that, and don't grow beyond 100px in height. I would like to solve this without supposing any absolute sizes.
How to fix that?
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ApplicationWindow{
visible: true
id: root
width: 600
height: 1200
ScrollView {
id: scroll
anchors.fill: parent
ListModel{
id: demosModel
ListElement{ src:"01.jpg"; }
ListElement{ src:"02.jpg"; }
ListElement{ src:"03.jpg"; }
ListElement{ src:"04.jpg"; }
}
GridLayout{
anchors.fill: parent
columns: 1
rowSpacing: 10
Repeater{
model: demosModel
Image {
source: "assets/"+src;
Layout.preferredWidth: .5*scroll.width;
fillMode: Image.PreserveAspectFit;
}
}
}
}
}

Answer 1

In your example:
Image { source: "assets/"+src } will use the real size of the images.
Layout.preferredWidth: .5*scroll.width will limit the width of the area in which the image will be displayed. So the big images will be displayed with a width of 300px (.5*scroll.width) but will conserve their height.
fillMode: Image.PreserveAspectFit; will scale the image uniformly to fit in the 300px. The proportions of the images are now visually OK but the value of the height property remains the same and this is this value which will be used by the layout.
So I think the solution is to force the width (the height will be recalculated) of the element via the sourceSize property:
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ApplicationWindow{
id: root
width: 600
height: 1200
visible: true
ScrollView {
id: scroll
anchors.fill: parent
ListModel{
id: demosModel
ListElement{ src:"01.jpg"; }
ListElement{ src:"02.jpg"; }
ListElement{ src:"03.jpg"; }
ListElement{ src:"04.jpg"; }
}
GridLayout{
anchors.fill: parent
columns: 1
rowSpacing: 10
Repeater{
model: demosModel
Image {
source: "assets/" + src;
Layout.preferredWidth: .5 * scroll.width;
// Qt documentation: "If only one dimension of the size is set to greater
// than 0, the other dimension is set in proportion to preserve the
// source image's aspect ratio. (The fillMode is independent of this.)"
// fillMode: Image.PreserveAspectFit;
sourceSize.width: Layout.preferredWidth
}
}
}
}
}