Illustration of customization of scroll bar using QtQuick.Controls 2.2.

Satyakaama

Hi All,

I have customized scroll bar using QtQuick.Controls 1.4 .

But i need to port it using QtQuick.Controls 2.4 ?

Can some one please share illustration of using property such as
decrementControl : Component ,
incrementControl : Component,
scrollBarBackground : Component,
handle : Component

Thanks in advance

Shrinidhi Upadhyaya

Hi @Satyakaama , here is the sample code below, there are two scroll bars one is the default one while the other one is Customized one,have a look into it,you will get to know how to customize the background ,content item etc. There are 2 buttons which can be used to increase or decrease the scroll bar,you can select the scroll bar in the combo box.

    Row {
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 10

        ComboBox {
            id: selectBarOption
            height: 100
            width: 100
            model: ["Vertical Bar","Horizontal Bar"]
        }

        Button {
            height: 100
            width: 100
            text: "Increase"
            onClicked: {
                if(selectBarOption.currentIndex === 0)
                    vbar.increase();
                else
                    hbar.increase();
            }
        }

        Button {
            height: 100
            width: 100
            text: "Decrease"
            onClicked: {
                if(selectBarOption.currentIndex === 0)
                    vbar.decrease();
                else
                    hbar.decrease();
            }
        }
    }

    Rectangle {
        id: frame
        clip: true
        width: 160
        height: 160
        border.color: "black"
        anchors.centerIn: parent

        Text {
            id: content
            text: "ABC"
            font.pixelSize: 160
            x: -hbar.position * width
            y: -vbar.position * height
        }

        //####Customized ScrollBar
        ScrollBar {
            id: vbar
            hoverEnabled: true
            active: hovered || pressed
            orientation: Qt.Vertical
            size: frame.height / content.height
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.bottom: parent.bottom

            background: Rectangle {
                width: parent.width
                height: parent.height
                color: "dark grey"
            }

            contentItem: Rectangle {
                implicitWidth: 6
                implicitHeight: 10
                radius: width / 2
                color: vbar.pressed ? "cyan" : "light green"
            }
        }

        //####Default ScrollBar
        ScrollBar {
            id: hbar
            hoverEnabled: true
            active: hovered || pressed
            orientation: Qt.Horizontal
            size: frame.width / content.width
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
        }
    }

For more details you can have a look into the documentation:- [https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollbar.html#stepSize-prop]

Note:- Copy paste the code and try to run it,you will have a better understanding.

J.Hilk

hi @Satyakaama
have you taken a look at the docs yet?
https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-scrollbar

That should cover everything that is possible, and not only Scrollbar ;-)

Satyakaama

@Shrinidhi-Upadhyaya Thanks a lot . It helped.

Satyakaama

@J.Hilk Thanks a lot !!!

Satyakaama

This post is deleted!