如何使矩形高度填充ScrollView

Question

我有以下 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 使水平滚动条正确显示。但是，由于滚动条占用了 window 的一些高度，垂直滚动条也会出现。

如何让 Rectangle 填充仅在我的 ScrollView 中可用 space，这样垂直滚动条就不会显示了？使用像 win.height - <someNumber> 这样的东西是 不可接受的 。添加 verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff 也是 不可接受的 因为它隐藏了 rect.

底部的一些内容

Answer 1

一般来说 ScrollView 不适合这样的用法。它更像是一个容器，用于布置项目并通过提供的滚动条显示它们。如果绑定设置不正确，绑定循环可能会到处弹出。 Flickable + 自定义滚动条（例如可用的 here）也可以完美满足您的需求。

也就是说，viewport 属性提供了问题所需的 (cross-platform) 解决方法。文档指出：

The viewport determines the current "window" on the contentItem. In other words, it clips it and the size of the viewport tells you how much of the content area is visible.

因此可以根据viewport的height设置childItem的height。带有 Image（可爱的小猫传入）的最后一个简单示例如下所示：

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

如何使矩形高度填充ScrollView

How to make rectangle height fill ScrollView

qt

qml

qt-quick

qtquickcontrols