ListView: Scrollbar should scroll by whole items

maxwell31

I have a ListView with a scroll bar. I would like the scrollbar to scroll by whole items, so that I don't have a partial item at the top. How can this be done?

Yunus

@maxwell31 hi. What I understood is that you have a list like in this example( https://doc.qt.io/qt-5/qtlocation-places-list-example.html)
and you dont want its elements to disappear when you scroll. or am I wrong? You may explain with an image more specifically.

Shrinidhi Upadhyaya

Hi @maxwell31 , you can use a property called snapMode.

Here is the sample code:-

  ListView {
    width: 180; height: 200

    model: 10
    spacing: 10
    snapMode: ListView.SnapToItem
    delegate: Rectangle {
        height: 100
        width: 100
        color: "red"

        Text {
            anchors.centerIn: parent
            text: index
        }
    }
}

maxwell31

My ListView is like this:

        ListView {
            width:1400
            height:345
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.top: parent.top
            anchors.topMargin: 600
            spacing: -1
            model: mylist
            boundsBehavior: Flickable.StopAtBounds
            clip: true
            ScrollBar.vertical: ScrollBar {
                minimumSize: 0.15
                snapMode: ScrollBar.SnapAlways
                policy: ScrollBar.AlwaysOn
            }
            snapMode: ListView.SnapToItem
            delegate: MyDelegate{}
        }

The snapmode works fine, if I scroll by dragging the view, but if I move the scrollbar at the right edge, I can also scroll in a way, that I only see part of an item.

Shrinidhi Upadhyaya

Hi @maxwell31 , you need to set the stepSize of the scrollbar also.

Here is the sample code please have a look:-

 ListView {
    width: 180; height: 200

    model: 10
    spacing: 10
    snapMode: ListView.SnapToItem

    ScrollBar.vertical: ScrollBar {
        minimumSize: 0.15
        stepSize: 0.125
        snapMode: ScrollBar.SnapOnRelease
        //####Here are other options also,try the one which suits you
        //1. ScrollBar.SnapAlways
        //2. ListView.SnapToItem
        policy: ScrollBar.AlwaysOn
    }

    delegate: Rectangle {
        height: 100
        width: 100
        color: "red"

        Text {
            anchors.centerIn: parent
            text: index
        }
    }
}