QML / QtQuick：使Image在ColumnLayout中仅占用可用高度

Question

我正在使用QML / QtQuick和Qt 5.9.x开发移动应用程序（Qt 5.10+不是一个选项，因为它不支持iOS 8和9）。

在我的垂直布局中，我想让Image自动调整为可用高度，但我无法弄清楚如何实现这一点：它始终以全高显示。我的QML文件：

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
            }
        }
    }
}

第一张图片现在是如何显示的，第二张是我想要的图片:(截图来自桌面，但在移动设备上的结果是相同的）

我知道如何通过AutoLayout在iOS上实现所需的行为（使用图像的拥抱优先级和/或压缩阻力），但我在QML / QtQuick中找不到类似的东西。

Answer 1

使用Layout.fillHeight会自动将Image调整为可用高度：

Image {
    // ...
    fillMode: Image.PreserveAspectCrop
    Layout.fillHeight: true
}