Как сделать прямоугольник высота заполнения ScrollView

Question

Как сделать прямоугольник высота заполнения ScrollView

У меня есть следующий QML-код:

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2

Window {
    id: win
    width: 1024
    height: 768
    visible: true

    ScrollView {
        id:scrollView
        anchors.fill: parent
        Rectangle{
            id:rect
            z:5
            color:"red"
            width: 2048
            height: win.height
            border{
                color: "black"
                width: 2
            }
        }
    }
}

В этом коде больший размер Rectangle делает горизонтальную полосу прокрутки правильно отображаемой. Однако, поскольку полоса прокрутки занимает некоторую высоту от окна, вертикальная полоса прокрутки также появляется.

Как я могу сделать так, чтобы Rectangle заполнял только доступное пространство в моем ScrollView, чтобы вертикальная полоса прокрутки не отображалась? Использование чего-то вроде win.height - <someNumber> является неприемлемым. Добавление verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff также неприемлемо , потому что оно скрывает некоторое содержимое на дне из rect.

1 2

qt

1 ответ:

BaCaRoZzo · Accepted Answer · 2017-05-23 15:22:27

Вообще говоря ScrollView не предназначено для такого использования. Это больше контейнер, чтобы выложить элементы и показать их через предоставленную полосу прокрутки. Петли Привязки могут всплывать здесь и там, если привязки не установлены должным образом. Также Flickable + пользовательская полоса прокрутки (например, доступные здесь) могут идеально соответствовать вашим потребностям.
Тем не менее, свойство viewport предоставляет желаемый (кросс-платформенный) обходной путь для решения проблемы. В документации говорится:

Видовой экран определяет текущее "окно" на contentItem. Другими словами, он зажимает его иразмер видового экрана говорит вам, сколько области содержимого видно .

Следовательно,
Ребенка Item можно установить в соответствии с height ребенка viewport. Последний простой пример с Image (cute kitty incoming) будет выглядеть так:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2

Window {
    id: win
    width: 300
    height: 300
    visible: true

    ScrollView {
        id:scrollView
        anchors.fill: parent

        Image{
            height: scrollView.viewport.height
            source: "http://c1.staticflickr.com/9/8582/16489458700_c9d82954b7_z.jpg"
        }
    }
}