QML/QtQuick: make Image occupy only available height in ColumnLayout - qt

Question

I'm developing a mobile app with QML/QtQuick and Qt 5.9.x (Qt 5.10+ is not an option because it doesn't support iOS 8 and 9).
In my vertical layout I'd like to make Image be automatically resized to available height, but I can't figure out how to achieve this: it's always shown in full height. My QML file:
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ApplicationWindow {
id: window
visible: true
// simulate iPhone 6
width: 375
height: 667
ColumnLayout {
anchors.fill: parent
spacing: 0
Text {
text: qsTr("multiline text multiline text multiline text multiline text")
textFormat: Text.PlainText
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
font { weight: Font.Normal; pointSize: 18 }
Layout.fillWidth: true
Layout.topMargin: 20
}
Text {
text: qsTr("title1")
textFormat: Text.PlainText
font { weight: Font.DemiBold; pointSize: 50 }
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: 30
}
Text {
text: qsTr("title2")
textFormat: Text.PlainText
font { weight: Font.DemiBold; pointSize: 25 }
Layout.alignment: Qt.AlignHCenter
}
Image {
source: "qrc:/Painting.jpg"
verticalAlignment: Image.AlignTop
fillMode: Image.PreserveAspectCrop
// Layout.preferredHeight: 200 // that's how I obtained the second screenshot, but using a constant is not an option of course
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: 20
}
Text {
text: qsTr("multiline text multiline text multiline text multiline text")
textFormat: Text.PlainText
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
font { weight: Font.Normal; pointSize: 17 }
Layout.fillWidth: true
Layout.topMargin: 20
}
GridLayout {
Layout.maximumWidth: 300
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: 20
Layout.bottomMargin: 30
rows: 3
columns: 3
rowSpacing: 10
columnSpacing: 10
Rectangle {
color: "blue"
Layout.row: 0
Layout.column: 0
Layout.columnSpan: 3
Layout.fillWidth: true
Layout.preferredHeight: 25
}
Rectangle {
color: "blue"
Layout.row: 1
Layout.column: 0
Layout.fillWidth: true
Layout.preferredHeight: 25
}
Rectangle {
color: "blue"
Layout.row: 1
Layout.column: 1
Layout.columnSpan: 2
Layout.fillWidth: true
Layout.preferredHeight: 25
}
Rectangle {
color: "blue"
Layout.row: 2
Layout.column: 0
Layout.fillWidth: true
Layout.preferredHeight: 25
}
Rectangle {
color: "blue"
Layout.row: 2
Layout.column: 1
Layout.fillWidth: true
Layout.preferredHeight: 25
}
Rectangle {
color: "blue"
Layout.row: 2
Layout.column: 2
Layout.fillWidth: true
Layout.preferredHeight: 25
}
}
}
}
First image is how it's shown now, second one is how I want it to be: (screenshots are from desktop, but on mobile the result is the same)
I know how to achieve the desired behavior on iOS through AutoLayout (play with image's hugging priority and/or compression resistance), but I can't find anything similar in QML/QtQuick.

Answer 1

Using Layout.fillHeight will automatically resize the Image to the available height:
Image {
// ...
fillMode: Image.PreserveAspectCrop
Layout.fillHeight: true
}