QuickControls2 图像不会拉伸到父级的全宽答案

【问题标题】：QuickControls2 Image does not stretch to full width of parentQuickControls2 图像不会拉伸到父级的全宽
【发布时间】：2018-10-18 14:53:47
【问题描述】：

我有一个简单的 QuickControls2 QML 设计，其中图像应水平拉伸以填充应用程序窗口并保持其纵横比。但是当我运行我的程序时，图像不会缩放/拉伸。

是图片比当前窗口尺寸小，QT没有放大/增加图片尺寸的问题吗？是否有设置让 QT 调整图像大小以填充宽度而不考虑图像大小？

您能告诉我哪里出了问题以及如何解决吗？

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

ApplicationWindow {
    id: applicationWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Scroll")

    ColumnLayout {
        id: mainLayout
        anchors.fill: parent

        Image {
            id: imagePane
            Layout.fillWidth: true
            fillMode: Image.PreserveAspectFit
            source: "placeholder.jpg"
        }
    }
}

【问题讨论】：

标签： qt qml qtquick2

【解决方案1】：

试试这个：

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

ApplicationWindow {
    id: applicationWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Scroll")

    ColumnLayout {
        id: mainLayout
        anchors.fill: parent

        Image {
            id: imagePane
            Layout.preferredWidth: parent.width
            Layout.preferredHeight: parent.height
            fillMode: Image.PreserveAspectFit
            source: "placeholder.jpg"
        }
    }
}

【讨论】：

【解决方案2】：

使用Image.PreserveAspectFit，图像被统一缩放以适应不裁剪，现在，由于您没有填充 Layout 高度，因此图像不能超出其隐式高度。

由于您的要求是让 QT 调整图像大小以填充宽度而不管图像大小意味着您接受裁剪图像超出高度限制，在这种情况下你需要使用：

fillMode: Image.PreserveAspectCrop

【讨论】：