如何仅垂直制作 ScrollView 剪辑？答案

【问题标题】：How to make ScrollView clip only vertically?如何仅垂直制作 ScrollView 剪辑？
【发布时间】：2017-05-19 04:25:41
【问题描述】：

ScrollView 将其所有内容剪辑到其大小。是否可以使其仅适用于顶部和底部但允许孩子在右侧和左侧离开父母的框架？

【问题讨论】：

标签： qt qml scrollview clipping qt5.5

【解决方案1】：

我只能想象一个原因，为什么您不将ScrollView 的宽度设置为更高的值（contentItem 的宽度）。

为了能够做到这一点，同时不限制 ScrollView 的宽度，您可以使用一个简单的技巧：

Item {
    id: limitedWidthItemToAnchorTo
    width: 200 // the width the ScrollView was supposed to have
    height: 400

    ScrollView {
        width: contentItem.width + __verticalScrollBar.width// Don't limit the width.
        height: 400 // Limit only the height.
        horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff // You don't need them.
        contentItem: Rectangle {
            width: 700 // This will set the ScrollViews width.
            height: 600 // The height will be clipped by the ScrollView. 
                        // You can scroll though.

            gradient: Gradient {
                GradientStop { position: 0; color: 'red' }
                GradientStop { position: 1; color: 'blue' }
            }
            border.width: 10
        }
    }
}

你将它包裹在Item 中，锚定到这个，你会很好的。或者，您可以使用掩码，但这会……更复杂。

本身不可能只水平或垂直剪辑，因为剪辑是使用Item 的边界框完成的。

【讨论】：

谢谢，但问题是关于ScrollView。这也适用于它吗？
当然。 ScrollView 和 ListView 一样继承 Item。我更新我的答案。抱歉没有正确阅读。
好吧，不过有一个问题：滚动条总是在滚动视图的右侧，所以增加宽度会使滚动条看起来很奇怪。

【解决方案2】：

如果您只想在一个方向上滚动，那么只需使用属性绑定将内容项的宽度/高度设置为 ScrollView 的宽度/高度（因为 ScrollView 内的项目重新设置为 ScrollView.contentItem） .下面的示例将仅垂直滚动。如果您需要确认它确实有效，我已经对其进行了测试。

Item {
    ScrollView {
        id: scrollview1
        anchors.fill: parent
        anchors.margins: 20
        clip: true

        ColumnLayout {
            width: scrollview1.width
        }
    }
}

【讨论】：