Adding scroll indicators to ListView



  • Hi, i am wondering about adding scroll indicators to ListView. What i mean saying scrool indicators ? I mean not scroll bar, but two arrows one on the left side of the list, one on the right side of the list indicating that we have elements outside visible area.

    < |element1| |element2| |element3| >

    < and > is scroll indicator.



  • Something like this?
    @
    import QtQuick 2.1

    Row {
    Rectangle {
    id: prev
    width: 10
    height: 50
    Text {
    text: "<"
    color: list.currentIndex > 0 ? "black" : "lightgrey"
    }
    MouseArea {
    anchors.fill: parent
    onClicked: list.currentIndex = Math.max(0, list.currentIndex - 1)
    }
    }

    ListView {
        id: list
        width: 110
        height: 50
        orientation: ListView.Horizontal
        clip: true
        model: 10
        delegate: Text {
            text: " item " + index + " "
        }
    }
    
    Rectangle {
        id: next
        width: 10
        height: 50
        Text {
            text: ">"
            color: list.currentIndex < list.count - 1 ? "black" : "lightgrey"
        }
        MouseArea {
            anchors.fill: parent
            onClicked: list.currentIndex = Math.min(list.count - 1, list.currentIndex + 1)
        }
    }
    

    }
    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.