Making ScrollView bounds behavior the same as ListView, for a long form made with GridLayout

jac241

Hello!

I'm working on making an application, and part of it has a form that is made with a GridLayout. It is a pretty long form, so I want it to be scrollable, but the behavior of the ScrollView I am wrapping it with is not what quite what I hoped. Whenever you use touch to drag past the bounds of the ScrollView, the contents remain fixed in place when you stop touching, instead of returning to the screen like in a ListView.

Ideally, I would like for it to have behavior like the Flickable.DragOverBounds that you can have on a ListView, but I would be fine if it just snapped back in some way. Also, the general scrolling behavior/feel differs between the ListView and ScrollView. If there's a way to make these behave the same I would be so happy.

Here is a short GIF showing what I mean. Left is a ListView, right is a ScrollView. First, I drag the ListView and it snaps back. Then I scroll the ListView with a touch pad. Then I drag the ScrollView past its bounds. Then I scroll to the bottom of the ScrollView, and if I click repeatedly, it shifts upwards by one pixel.
https://imgur.com/LHOYRV8

The example is on Qt 6.2.3 on Windows, but at least the 1 pixel scrolling with clicking and differing scroll behavior is also present on MacOS.

Here is the code from the example:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    title: qsTr("Hello World")
    visible: true
    minimumWidth: layout.implicitWidth
    width: 800
    height: 200
    RowLayout {
        anchors.fill: parent
        ListView {
            Layout.minimumHeight: 200
            Layout.minimumWidth: 400
            Layout.alignment: Qt.AlignTop
            Layout.fillWidth: true
            Layout.fillHeight: true
            boundsBehavior: Flickable.DragOverBounds
            ScrollBar.vertical: ScrollBar {
                active: true
            }
            model: ListModel {
                ListElement {
                    name: "Bill Smith"
                    number: "555 3264"
                }
                ListElement {
                    name: "John Brown"
                    number: "555 8426"
                }
                ListElement {
                    name: "Sam Wise"
                    number: "555 0473"
                }
                ListElement {
                    name: "John Brown"
                    number: "555 8426"
                }
                ListElement {
                    name: "Sam Wise"
                    number: "555 0473"
                }
                ListElement {
                    name: "John Brown"
                    number: "555 8426"
                }
                ListElement {
                    name: "Sam Wise"
                    number: "555 0473"
                }
            }
            delegate: Label {
                font.pointSize: 48
                text: name
            }
        }

        ScrollView {
            Layout.minimumWidth: 200
            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
            Layout.fillHeight: true
            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff

            // prevent horizontal scroll?
            contentWidth: availableWidth
            Column {
                id: layout
                anchors.fill: parent
                Label {
                    text: "test"
                    font.pointSize: 48
                }
                Label {
                    text: "test"
                    font.pointSize: 48
                }
                Label {
                    text: "test"
                    font.pointSize: 48
                }
                Label {
                    text: "test"
                    font.pointSize: 48
                }
                Label {
                    text: "test"
                    font.pointSize: 48
                }
                Label {
                    text: "test"
                    font.pointSize: 48
                }
                Label {
                    text: "test"
                    font.pointSize: 48
                }
                Label {
                    text: "test"
                    font.pointSize: 48
                }
            }
        }
    }
}

Thank you so much! I figured others will run into this same problem and could find an answer useful.