带有自定义滚动条的 QML Listview

Posted 2023-02-16

【中文标题】带有自定义滚动条的 QML Listview

【英文标题】：QML Listview with scrollbar customized

【发布时间】：2020-05-20 13:06:15

【问题描述】：

我尝试在 Google 和专用论坛上搜索此问题，但没有找到任何内容。

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

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

... 
Item_1
Item_2
Item_N
...

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

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

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

【问题讨论】：

为此我会使用footer 和header。这种方法的一个优点是这些项目始终可见且不可滚动。

@folibis：这是个好建议。如何计算可见区域中有多少项目？ listview 有一个轻弹，老实说我不明白我怎么能得到这样的信息。谢谢

似乎没有一种很好的方法来访问当前可见的项目数量或哪些项目。关于我能想到的唯一跟踪方法是委托将自己添加到 Component.onCompleted 上的 JS 数组中，并从 Component.onDestruction 上的该数组中删除自己。

【参考方案1】：

我已经解决了。

sn-p 在这里。是带有 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("...")