Qml a really ScrollBar?

[QtDancer]

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!

[msx_br]

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
 }

}
@

[Rocken]

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
}@

[tiredtyrant]

Very useful, Rocken. Thank you!

[pmoelgaard]

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

[pmoelgaard]

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