如何使矩形高度填充ScrollView答案

【问题标题】：How to make rectangle height fill ScrollView如何使矩形高度填充ScrollView
【发布时间】：2015-08-26 20:11:03
【问题描述】：

我有以下 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 底部的一些内容。

【问题讨论】：

标签： qt qml qt-quick qtquickcontrols

【解决方案1】：

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

也就是说，viewport 属性为该问题提供了所需的（跨平台）解决方法。文档指出：

视口决定了 contentItem 的当前“窗口”。换句话说，它会剪辑它并且视口的大小告诉您有多少内容区域是可见的。

因此子Item的height可以根据viewport的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"
        }
    }
}

【讨论】：