关于qt：QML / QtQuick：使图像仅占据ColumnLayout中的可用高度


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

我正在使用QML / QtQuick和Qt 5.9.x开发移动应用程序(由于不支持iOS 8和9，因此无法选择Qt 5.10)。

在我的垂直布局中，我想使Image的大小自动调整为可用高度，但是我不知道该如何实现：它总是以全高度显示。我的QML文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
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中找不到类似的东西。

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

1
2
3
4
5
Image {
    // ...
    fillMode: Image.PreserveAspectCrop
    Layout.fillHeight: true
}