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

Posted 2023-02-16

【中文标题】QML/QtQuick：使图像在 ColumnLayout 中仅占用可用高度

【英文标题】：QML/QtQuick: make Image occupy only available height in ColumnLayout

【发布时间】：2018-03-23 14:11:50

【问题描述】：

我正在使用 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 中找不到类似的东西。

【参考方案1】：

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

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