自定义滚动条的QML列表视图

Question

我试着在谷歌和专门的论坛上搜索这个问题，但什么也没找到。

我的问题是：我有一个带代表的列表视图，根据Qt指南从C模型中读取数据。

当项目超出可见区域时，我不能使用滚动条，但我会得到如下结果：

... 
Item_1
Item_2
Item_N
...

其中3点将被启用/禁用，以告诉列表可以根据视图中的项目数量向上或向下滚动。

总之，它就像一个定制的滚动条。

你对实现这种行为有什么建议吗？或者我可以看看哪里？谢谢你。克里斯蒂亚诺

Answer 1

我已经解决了。

片段在这里。是带有C后端的整个QML文件的一部分，但非常简单，可能对想要这样做的人有用：

Column
    {
        anchors.fill: parent
        // header
        Rectangle
        {
            id: headerComponent
            width: list.width
            height: headerHeight
            color: "transparent"

            Text {
                anchors.fill: parent
                color: "white"
                visible: list.dotUp
                font.pointSize: 11
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: qsTr("...")
            }
        }

        ListView
        {
            id: list
            property int draggedItem: -1
            property int visibileItems: 0
            property bool dotUp: false
            property bool dotDown: false

            width: parent.width
            height: parent.height - headerHeight*2
            clip: true
            spacing: 5
            model: backendList.model
            highlightMoveDuration: 10
            focus: true
            currentIndex: backendList.currentIndex
            snapMode: ListView.SnapToItem
            pixelAligned: true

            function setHeaderAndFooter()
            {     
                if (visibileItems >= count)
                {
                    return
                }
                var index = indexAt(1, contentY)
                if ( index === 0 && visibileItems < count)
                {
                    dotDown = true
                    dotUp = false
                }

                if (index > 0 && !(count-index <= visibileItems))
                {
                    dotDown = true
                    dotUp = true
                }

                if (index > 0 && count-index <= visibileItems)
                {
                    dotDown = false
                    dotUp = true
                }
            }

            onCountChanged:
            {
                visibileItems =  height / ( backendList.itemHeight + list.spacing)
                var reminder =  height % ( backendList.itemHeight + list.spacing)
                if (reminder)
                {
                    ++visibileItems
                }

                setHeaderAndFooter()
            }

            onContentYChanged:
            {
                var index = indexAt(1, contentY)
                setHeaderAndFooter()
            }
.....
        // footer
        Rectangle
        {
            width: list.width
            height: headerHeight
            color: "transparent"

            Text {
                anchors.fill: parent
                color: "white"
                font.pointSize: 11
                visible: list.dotDown
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: qsTr("...")
            }
        }