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 上实现所需的行为（使用图像的拥抱优先级 and/or 压缩阻力），但我在 QML/QtQuick 中找不到任何类似的东西.

Answer 1

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

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

QML/QtQuick: 使Image在ColumnLayout中只占据可用高度

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

qt

qml

qtquick2