ListView overscrolling

[mentalmushroom]

There is a QML application showing the list of items by means of ListView component:
12076

When ListView is scrolled its content often goes beyond the borders:
12077

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)



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;
}
}
}

[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,
_