如何使矩形高度填充ScrollView [英] How to make rectangle height fill 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使水平滚动条正确显示.但是，由于滚动条离窗口有一定的高度，因此垂直滚动条也会出现.

In this code the larger Rectangle makes the horizontal scrollbar correctly appear. However, since the scrollbar takes some height from the window, the vertical scrollbar appears too.

如何使Rectangle仅填充ScrollView中的可用空间，以使垂直滚动条不显示?使用win.height - <someNumber>之类的东西不可接受.添加verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff也是不可接受的，因为它会将某些内容隐藏在rect的底部.

How can I make the Rectangle fill only available space in my ScrollView so that vertical scrollbar won't show up? Using something like win.height - <someNumber> is not acceptable. Adding verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff is also not acceptable cause it hides some content on bottom of rect.

推荐答案

通常来说，ScrollView并非用于此类用途.它是放置项目并通过提供的滚动条显示它们的容器.如果未正确设置绑定，则绑定循环会在此弹出.同样，Flickable +自定义滚动条(例如，此处可用的滚动条)完全可以满足您的需求.

Generally speaking ScrollView is not meant for such usage. It is more a container to lay out items and have them shown through the provided scrollbar. Binding loops can pop here and there if bindings are not properly set. Also Flickable + a custom scrollbar (e.g. the ones available here) can perfectly fit your needs.

也就是说，viewport属性为该问题提供了所需的(跨平台)解决方法.该文档指出:

That said, viewport property provides the desired (cross-platform) workaround for the problem. The documentation states:

视口确定contentItem上的当前窗口".换句话说，它会对其进行裁剪，并且视口的大小会告诉您可见的内容区域有多少.

因此，可以根据viewport的height设置子Item的height.带有Image(传入的可爱小猫)的最后一个简单示例如下所示:

Hence the height of the child Item can be set according to the height of the viewport. A final simple example with an Image (cute kitty incoming) would look like this:

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！