Qml a really ScrollBar?



  • I want to implement a ScrollBar in qml. you know, there is a listView and a scrollBar in my application. now, i just hope that the listView will move when I drag the scrollBar. just like a normal ScrollBar will do. i have tried lots of ways, but it doesn't work!
    can you help me ? thanks!



  • From documentation (Home > Examples > QML Examples & Demos > UI Components: Scroll Bar Example) :

    @
    import Qt 4.7

    Item {
    id: scrollBar

     // The properties that define the scrollbar's state.
     // position and pageSize are in the range 0.0 - 1.0.  They are relative to the
     // height of the page, i.e. a pageSize of 0.5 means that you can see 50%
     // of the height of the view.
     // orientation can be either Qt.Vertical or Qt.Horizontal
     property real position
     property real pageSize
     property variant orientation : Qt.Vertical
    
     // A light, semi-transparent background
     Rectangle {
         id: background
         anchors.fill: parent
         radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1)
         color: "white"
         opacity: 0.3
     }
    
     // Size the bar to the required size, depending upon the orientation.
     Rectangle {
         x: orientation == Qt.Vertical ? 1 : (scrollBar.position * (scrollBar.width-2) + 1)
         y: orientation == Qt.Vertical ? (scrollBar.position * (scrollBar.height-2) + 1) : 1
         width: orientation == Qt.Vertical ? (parent.width-2) : (scrollBar.pageSize * (scrollBar.width-2))
         height: orientation == Qt.Vertical ? (scrollBar.pageSize * (scrollBar.height-2)) : (parent.height-2)
         radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1)
         color: "black"
         opacity: 0.7
     }
    

    }
    @



  • My slightly modified version of Gr├ęgorys "Scrollbar":https://bitbucket.org/gregschlom/qmlscrollbar/src/tip/ScrollBar.qml:

    @
    import Qt 4.7

    Rectangle {
    id: scrollBar
    property variant target

    clip: true
    color: "#b3b3b3"
    width: 17
    radius: 10
    smooth: true
    
    anchors.top: target.top
    anchors.bottom: target.bottom
    anchors.right: target.right
    anchors.topMargin: 5
    anchors.bottomMargin: 5
    anchors.rightMargin: 5
    
    //visible: (track.height == slider.height) ? false : true //TODO: !visible -> width: 0 (but creates a binding loop)
    
    
    states: [
        State { name: "nothing"; },
        State { name: "disabled"; when: track.height == slider.height }
    ]
    transitions: [
        Transition { to: "disabled"; //reversible: true;
            SequentialAnimation {
                NumberAnimation { target: scrollBar; property: "opacity"; to: 0; duration: 500; }
                PropertyAction { target: scrollBar; property: "visible"; value: false; }
            }
        },
        Transition { to: "*";
            PropertyAction { target: scrollBar; property: "visible"; value: true; }
            NumberAnimation { target: scrollBar; property: "opacity"; to: 1; duration: 500; }
        }
    ]
    
    Timer {
        property int scrollAmount
    
        id: timer
        repeat: true
        interval: 20
        onTriggered: {
            target.contentY = Math.max(0, Math.min(target.contentY + scrollAmount,
                                          target.contentHeight - target.height));
        }
    }
    
    Item {
        id: track
        anchors.top: parent.top
        anchors.bottom: parent.bottom;
        width: parent.width
    
        MouseArea {
            anchors.fill: parent
            onPressed: {
                timer.scrollAmount = target.height * (mouseY < slider.y ? -1 : 1) // scroll by a page
                timer.running = true;
            }
            onReleased: {
                timer.running = false;
            }
        }
    
        Rectangle {
            id:slider
            color: "#343434"
            smooth: true
            width: parent.width
            radius: 10
    
            anchors.bottom: (target.visibleArea.yPosition > 1)? parent.bottom: undefined
            height: {
                if (target.visibleArea.yPosition<0)         // Oberer Rand
                    Math.max(30, Math.min(target.height / target.contentHeight * track.height, track.height-y) +target.height * target.visibleArea.yPosition)
                else                                        // Mittelbereich
                    Math.min(target.height / target.contentHeight * track.height, track.height-y)
                }
            y: Math.max(0,Math.min(track.height-30, target.visibleArea.yPosition * track.height));
    
            MouseArea {
                anchors.fill: parent
                drag.target: parent
                drag.axis: Drag.YAxis
                drag.minimumY: 0
                drag.maximumY: track.height - height
    
                onPositionChanged: {
                    if (pressedButtons == Qt.LeftButton) {
                        target.contentY = slider.y * target.contentHeight / track.height
                    }
                }
            }
        }
    }
    

    }
    @
    in your QML simply add:
    @ScrollBar {
    target: lstParameter
    }@



  • Very useful, Rocken. Thank you!



  • Still useful (for legacy systems), thanks for sharing !



  • Still useful (for legacy systems), thanks for sharing !


Log in to reply
 

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