如何使 ScrollView 仅垂直剪辑？

Question

ScrollView 将其所有内容裁剪到其大小。是否可以让它只对顶部和底部起作用，但允许 children 在右侧和左侧超出 parent 的框架？

Answer 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 的边界框完成的。

Answer 2

如果您只想在一个方向上滚动，则只需将内容项的 width/height 设置为 ScrollView 的 width/height，使用属性绑定（因为ScrollView 中的项目重新设置为 ScrollView.contentItem）。下面的例子只会垂直滚动。我已经测试过了，如果你需要确认它是否真的有效。

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

        ColumnLayout {
            width: scrollview1.width
        }
    }
}

如何使 ScrollView 仅垂直剪辑？

How to make ScrollView clip only vertically?

qt

qml

scrollview

clipping

qt5.5