listview - 带有自定义滚动条的 QML Listview

Question

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

我的问题：我有一个带有委托的 Listview，根据 Qt 指南从 C++ 模型中读取。

当项目超过可见区域时，我不能使用滚动条，但我会得到类似的东西：

... 
Item_1
Item_2
Item_N
...

其中 3 个点将被启用/禁用，以告知列表可以根据视图中有多少项目向上或向下滚动。

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

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

标签： listviewqmlscrollbar

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("...")
            }
        }