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

【问题标题】：GridLayout with scaled images has huge row spacing带有缩放图像的 GridLayout 具有巨大的行间距
【发布时间】：2018-08-28 18:36:39
【问题描述】：

我在 qml 中有一个简单的“对话框”，用户应该在其中选择一个图像。图像按比例缩小并显示在 ScrollView 内的 GridLayout 中。图片应该是scrollview的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;
                }
            }
        }
    }
}

【问题讨论】：

以这种方式定义您的图像Image { source: src; sourceSize.width: .5 * scroll.width; fillMode: Image.PreserveAspectFit; } 不能解决您的问题？
确实如此 :) 你怎么知道的？我发现布局、调整大小等本质上是神秘的，我钦佩那些看到背后逻辑的人。请重新发布作为答案，以便我可以接受:)
我经常遇到与项目大小和布局相关的错误。我终于开始了解如何解决这些问题，但我一直不了解它们。有时间再深入一点，我试着在Qt的源代码中看看，但并不总是那么容易... :)

标签： layout qml

【解决方案1】：

在你的例子中：

Image { source: "assets/"+src } 将使用图片的实际尺寸。
Layout.preferredWidth: .5*scroll.width 将限制图像显示区域的宽度。因此，大图像将以 300px (.5*scroll.width) 的宽度显示，但会保留它们的高度。
fillMode: Image.PreserveAspectFit; 将均匀缩放图像以适应 300 像素。图像的比例现在在视觉上还可以但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
                }
            }
        }
    }
}

【讨论】：

感谢您的解释。谢谢！