ColumnLayout，图像仅占用 QML 中的最小空间

Question

我有一个ListView 和ColumnLayout 代表，其中包含任何大小的图像。我希望每个代表占据尽可能小的宽度和高度，只定义某个最大宽度，但我无法将图像调整到正确的大小，而不是在一个盒子中居中（这里用灰色矩形显示）：

我的代码是这样的：

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

ApplicationWindow {
    id: window
    width: 640
    height: 800
    visible: true
    color: "black"

    ListView {
        id: listView
        anchors.fill: parent
        model: 3

        delegate: ColumnLayout {
            width: listView.width

            Label {
                text:
                    "Lorem ipsum dolor sit amet, consectetuer adipiscing " +
                    "Aenean commodo ligula eget dolor. Aenean massa."
                color: "white"
                wrapMode: Text.Wrap
                font.pixelSize: 22

                Layout.maximumWidth: listView.width / 2
            }

            Image {
                asynchronous: true
                source: "https://picsum.photos/1024/256"
                fillMode: Image.PreserveAspectFit

                Layout.maximumWidth: listView.width / 2

                Rectangle { anchors.fill: parent; color: "#222"; z: -1 }
            }
        }
    }
}

当使用Column 而不是ColumnLayout 并将Layout.maximumWidth 行替换为width: Math.min(implicitWidth, listView.width / 2) 时，我可以获得正确的行为，如下所示，但我需要在我的项目中使用布局：

Answer 1

图片之前的空白是因为fillMode: Image.PreserveAspectFit，它试图保持图片的纵横比（即图片宽度/图片高度）。您应该使用fillmode: Stretch 来完全填满空间。