Question

我在qml中有一个简单的“对话框”，应该让用户选择一个图像。图像按比例缩小并显示在ScrollView内的GridLayout中。图片应为滚动视图的1/2宽度，旁边将有说明。

我看到的是垂直间距很大，并且不会随着调整窗口大小而改变。实际上，间距似乎与全尺寸（未缩放）图像相对应。

例如，当我设置Layout.preferredHeight: 100时，问题就发生了变化，但是同样，如果图像小于此像素，并且图像高度不超过100像素，则间距仍然存在。我想在不假设任何绝对大小的情况下解决此问题。

该如何解决？

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ApplicationWindow{
    visible: true
    id: root
    width: 600
    height: 1200
    ScrollView {
        id: scroll
        anchors.fill: parent
        ListModel{
            id: demosModel
            ListElement{  src:"01.jpg"; }
            ListElement{  src:"02.jpg"; }
            ListElement{  src:"03.jpg"; }
            ListElement{  src:"04.jpg"; }
        }

        GridLayout{
            anchors.fill: parent
            columns: 1
            rowSpacing: 10
            Repeater{
                model: demosModel
                Image {
                    source: "assets/"+src;
                    Layout.preferredWidth: .5*scroll.width;
                    fillMode: Image.PreserveAspectFit;
                }
            }
        }
    }
}

Answer 1

在您的示例中：

Image { source: "assets/"+src }将使用图像的实际大小。
Layout.preferredWidth: .5*scroll.width将限制图像显示区域的宽度。因此，大图像将以300px（.5 * scroll.width）的宽度显示，但会保留其高度。
fillMode: Image.PreserveAspectFit;将均匀缩放图像以适合300px。现在图像的比例在视觉上可以确定，但是 height属性的值保持不变，并且此值将由布局使用。

所以我认为解决方案是通过sourceSize属性来强制元素的宽度（高度将重新计算）：

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

ApplicationWindow{
    id: root
    width: 600
    height: 1200
    visible: true

    ScrollView {
        id: scroll
        anchors.fill: parent

        ListModel{
            id: demosModel
            ListElement{  src:"01.jpg"; }
            ListElement{  src:"02.jpg"; }
            ListElement{  src:"03.jpg"; }
            ListElement{  src:"04.jpg"; }
        }

        GridLayout{
            anchors.fill: parent
            columns: 1
            rowSpacing: 10

            Repeater{
                model: demosModel

                Image {
                    source: "assets/" + src;
                    Layout.preferredWidth: .5 * scroll.width;

                    // Qt documentation: "If only one dimension of the size is set to greater
                    // than 0, the other dimension is set in proportion to preserve the
                    // source image's aspect ratio. (The fillMode is independent of this.)"
                    //      fillMode: Image.PreserveAspectFit;
                    sourceSize.width: Layout.preferredWidth
                }
            }
        }
    }
}

具有缩放图像的GridLayout具有巨大的行间距

1 个答案: