listview - QML：当元素超过 40 个元素时，ListView 的行为很奇怪

Question

我正在使用 Qt 5.2.1，并且我有一个自定义滚动条。

import QtQuick 1.1

Item {
    id: root
    property variant flickable: parent
    property int rightSpacing: 5
    property int scrollStep: 25
    anchors.top: parent.top
    //anchors.topMargin: -50
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    width: 16
    z: 4

    Rectangle {
        id: up
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.rightMargin: rightSpacing
        visible: scrollbar.visible

        color: "dark grey"
        height: 16
        width: 16
        border.width: 1
        border.color: "black"

        MouseArea {
            anchors.fill: parent

            Image {
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.horizontalCenterOffset: 0.5

                source: theme.location + "triangle.png"
                height: 11
                width: 11
                fillMode: Image.PreserveAspectFit
            }

            onClicked: {

                if((flickable.contentY - scrollStep) <= 0) {
                    flickable.contentY = 0
                }
                else {
                    flickable.contentY = flickable.contentY - scrollStep
                }
            }

            onReleased: {
                up.color = "dark grey"
            }

            onPressed: {
                up.color = "light grey"
            }
        }
    }

    Rectangle {
        id: scrollbar


        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.right: parent.right

        anchors.topMargin: 16
        anchors.bottomMargin: 16
        anchors.rightMargin: rightSpacing

        width: 16//0.03 * parent.width
        radius: 0//0.5 * width
        color: "lightgrey"
        visible: flickable.visibleArea.heightRatio < 1.0
        clip: true

        border.width: 1
        border.color: "black"

        Rectangle {
            id: handle
            width: parent.width
            height: flickable.visibleArea.heightRatio * scrollbar.height
            color: "dark grey"
            opacity: clicker.drag.active ? 0.7 : 0.4
            radius: 0//0.5 * width
            border.width: 1
            border.color: "black"

        }

        Binding {
            target: handle
            property: "y"
            value: flickable.visibleArea.yPosition * scrollbar.height
            when: !clicker.pressed
        }

        MouseArea {
            id: clicker
            anchors.fill: parent

            drag {
                target: handle
                minimumY: 0
                maximumY: scrollbar.height - handle.height
                axis: Drag.YAxis
            }

            onMouseYChanged: {
                flickable.contentY = handle.y / drag.maximumY * (flickable.contentHeight - flickable.height)
            }

            onClicked: {
                flickable.contentY = mouse.y / scrollbar.height * (flickable.contentHeight - flickable.height)
            }
        }
    }

    Rectangle {
        id: down
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        anchors.rightMargin: rightSpacing
        visible: scrollbar.visible

        color: "dark grey"
        height: 16
        width: 16
        border.width: 1
        border.color: "black"

        MouseArea {
            anchors.fill: parent

            Image {
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.horizontalCenterOffset: 0.5

                source: theme.location + "triangle.png"
                height: 11
                width: 11
                fillMode: Image.PreserveAspectFit

                rotation: 180
            }

            onClicked: {
                if((flickable.contentY + scrollStep) > (flickable.contentHeight - flickable.height)) {
                    flickable.contentY = (flickable.contentHeight - flickable.height)
                }
                else {
                    flickable.contentY = flickable.contentY + scrollStep
                }
            }

            onReleased: {
                down.color = "dark grey"
            }

            onPressed: {
                down.color = "light grey"
            }
        }
    }
}

这是滚动条与 ListView 一起使用的方式

        ListView
        {
            id: listView
            focus: elist.activeWindow
            anchors.top: listHeader.bottom
            anchors.topMargin: 2
            anchors.bottom: parent.bottom
            anchors.bottomMargin: details.visible ? 210 : 1
            width: parent.width
            model: eventProxyModel
            delegate: delListItem
            highlight: delListHighlight
            highlightMoveDuration: 0
            highlightFollowsCurrentItem: true
            property bool sortOrder: false
            interactive: false
            boundsBehavior: Flickable.StopAtBounds
            snapMode: ListView.SnapToItem
            clip: true

            VScrollBar {
                id: listScrollBar
                anchors.rightMargin: -5
                anchors.bottomMargin: 1
            }
        }

问题是当大约 40 个项目被插入到模型中时。我有一个插入很多元素的脚本，我可以滚动到顶部和底部，一切都很好。当我再插入 1 个项目并向上滚动时，顶部元素丢失并且可以向上滚动以查看它。当我滚动到底部时，ListView 底部有一个空白区域。我还可以使用手柄滚动越过底部，ListView 将继续滚动越过边界。如果我继续添加元素，顶部元素将无法访问，底部会因空元素而变大，并且可滚动区域会变大。

我已经去了好几天了，希望得到一些关于可能导致这种行为的指导，谢谢。