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



  • 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



  • 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.


  • Moderators

    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 ;-)



  • @Shrinidhi-Upadhyaya Thanks a lot . It helped.



  • @J.Hilk Thanks a lot !!!



  • This post is deleted!

Log in to reply
 

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