ListView overscrolling

[mentalmushroom]

There is a QML application showing the list of items by means of ListView component:
listview.jpg

When ListView is scrolled its content often goes beyond the borders:
listview-overscrolled.jpg

I thought it could be adjusted by setting boundsBehavior to Flickable.StopAtBounds, but although I have done that, it still behaves like it is shown above.

The code is quite simple:

import QtQuick 2.0
import QtQuick.Controls 2.0
 
Rectangle
{
    color: "gray"
 
    Rectangle
    {
        color: "blue"
        border.color: "orange"
        anchors { fill: parent; margins: 50 }
 
        ListView
        {
            anchors { fill: parent; margins: parent.border.width }
            boundsBehavior: Flickable.StopAtBounds
            //snapMode: ListView.SnapOneItem
            //snapMode: ListView.SnapToItem
            //preferredHighlightBegin: 0
            //preferredHighlightEnd: 0
            //highlightRangeMode: ListView.StrictlyEnforceRange
            //cacheBuffer: 200
            model: [ "What", "a", "hell", "is", "wrong", "with", "you?"]
            delegate: Item
            {
                height: 150
                width: parent.width
                Rectangle
                {
                    anchors.fill: parent
                    color: "lightgray"
                    Text { text: modelData; font.pixelSize: 50 }
                }
            } // delegate
 
            //ScrollBar.vertical: ScrollBar {}
        } // ListView
    } // Rectangle (listview border)
} // Rectangle (main)

import QtQuick 2.0
import QtQuick.Controls 2.0

Rectangle
{
    color: "gray"

    Rectangle
    {
        color: "blue"
        border.color: "orange"
        anchors { fill: parent; margins: 50 }

        ListView
        {
            anchors { fill: parent; margins: parent.border.width }
            boundsBehavior: Flickable.StopAtBounds
            //snapMode: ListView.SnapOneItem
            //snapMode: ListView.SnapToItem
            //preferredHighlightBegin: 0
            //preferredHighlightEnd: 0
            //highlightRangeMode: ListView.StrictlyEnforceRange
            //cacheBuffer: 200
            model: [ "What", "a", "hell", "is", "wrong", "with", "you?"]
            delegate: Item
            {
                height: 150
                width: parent.width
                Rectangle
                {
                    anchors.fill: parent
                    color: "lightgray"
                    Text { text: modelData; font.pixelSize: 50 }
                }
            } // delegate

            //ScrollBar.vertical: ScrollBar {}
        } // ListView
    } // Rectangle (listview border)
} // Rectangle (main)

To copy to clipboard, switch view to plain text mode 

Any ideas?

[scgrant327]

I've been able to keep this from happening by putting the ListView inside a Flickable:

Flickable {
                height: parent.height
                anchors.top: parent.top
                anchors.topMargin: Funcs.psize(4,parent.height)
                anchors.left: parent.left
                anchors.leftMargin: Funcs.psize(2,parent.width)
                anchors.right: parent.right
                anchors.rightMargin: Funcs.psize(2,parent.width)
                anchors.bottom: parent.bottom
                anchors.bottomMargin: Funcs.psize(4,parent.height)
 
                ListView {
                    id: boatList
                    anchors.fill: parent
 
                    Component {
                        id: boatDelegate
                        Item {
                            id: container
                            width: parent.width
                            height: Funcs.pointHeight(14)
                            Column {
                               Text {
                                    font.pointSize: Funcs.fontHeight(24)
                                    text: boatName
                                    horizontalAlignment: Text.AlignHCenter
                                    color: "red"
                                }
                            }
 
                            MouseArea {
                                id: mouseArea
                                anchors.fill: parent
                                hoverEnabled: true
                                onClicked: {
                                    boatList.currentIndex = index;
                                    boatList.positionViewAtIndex(index,ListView.Center);
                                }
                            }
                        }
                    }
 
                    model: appWin.boatModel
                    delegate: boatDelegate
                    highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
                    highlightFollowsCurrentItem: true
                    highlightMoveDuration: 250
                    highlightMoveVelocity: 50
                    focus: true
                    spacing: Funcs.pointHeight(6)
                    clip: true
                    currentIndex: -1
                    onCurrentItemChanged: {
                        appWin.myBoatName = boatModel.get(boatList.currentIndex).boatName;
                        appWin.myBID = boatModel.get(boatList.currentIndex).boatID;
                    }
                }
            }

Flickable {
                height: parent.height
                anchors.top: parent.top
                anchors.topMargin: Funcs.psize(4,parent.height)
                anchors.left: parent.left
                anchors.leftMargin: Funcs.psize(2,parent.width)
                anchors.right: parent.right
                anchors.rightMargin: Funcs.psize(2,parent.width)
                anchors.bottom: parent.bottom
                anchors.bottomMargin: Funcs.psize(4,parent.height)

                ListView {
                    id: boatList
                    anchors.fill: parent

                    Component {
                        id: boatDelegate
                        Item {
                            id: container
                            width: parent.width
                            height: Funcs.pointHeight(14)
                            Column {
                               Text {
                                    font.pointSize: Funcs.fontHeight(24)
                                    text: boatName
                                    horizontalAlignment: Text.AlignHCenter
                                    color: "red"
                                }
                            }

                            MouseArea {
                                id: mouseArea
                                anchors.fill: parent
                                hoverEnabled: true
                                onClicked: {
                                    boatList.currentIndex = index;
                                    boatList.positionViewAtIndex(index,ListView.Center);
                                }
                            }
                        }
                    }

                    model: appWin.boatModel
                    delegate: boatDelegate
                    highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
                    highlightFollowsCurrentItem: true
                    highlightMoveDuration: 250
                    highlightMoveVelocity: 50
                    focus: true
                    spacing: Funcs.pointHeight(6)
                    clip: true
                    currentIndex: -1
                    onCurrentItemChanged: {
                        appWin.myBoatName = boatModel.get(boatList.currentIndex).boatName;
                        appWin.myBID = boatModel.get(boatList.currentIndex).boatID;
                    }
                }
            }

To copy to clipboard, switch view to plain text mode 

[anda_skoa]

The original code is missing the "clip: true", so items are drawn partially outside if they are also partially inside the view.

Cheers,
_