GridLayout с масштабированными изображениями имеет большой интервал между строками - PullRequest
Новая
       7

GridLayout с масштабированными изображениями имеет большой интервал между строками

0 голосов
/ 28 августа 2018

У меня есть простой «диалог» в qml, где пользователь должен выбрать одно изображение. Изображения уменьшаются и отображаются в виде GridLayout внутри ScrollView. Изображения должны быть шириной 1/2 прокрутки, рядом с ними будут описания.

Что я вижу, так это то, что вертикальный интервал огромен и не изменяется при изменении размера окна. На самом деле кажется, что интервал соответствует полноразмерным (немасштабированным) изображениям.

Проблема меняется, когда я устанавливаю Layout.preferredHeight: 100 (например), но с другой стороны, интервал между изображениями должен быть меньше, чем этот, и не превышать 100 пикселей в высоту. Я хотел бы решить это, не предполагая каких-либо абсолютных размеров.

Как это исправить?

spacing issue

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;
                }
            }
        }
    }
}

1 Ответ

0 голосов
/ 28 августа 2018

В вашем примере:

  • Image { source: "assets/"+src } будет использовать реальный размер изображений.

  • Layout.preferredWidth: .5*scroll.width ограничит ширину области, в которой будет отображаться изображение. Таким образом, большие изображения будут отображаться с шириной 300 пикселей (.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
                }
            }
        }
    }
}
...