CODEWITHSUNDEEP
qtscrollqmlscrollview
Kyle Strand
Kyle Strand

Reputation: 16499

QML ScrollViewStyle width?

I'd like to make a ScrollView's scroll bar wider than the default value, but I don't see any width properties, even as part of the ScrollViewStyle element's frame component.

Upvotes: 0

Views: 5273

Answers (1)

mcchu
mcchu

Reputation: 3369

To make the scroll bar wider, you can change the following four properties in ScrollViewStyle with your custom components: handle, scrollBarBackground, decrementControl, and incrementControl (it may look weird if you do not change all of them). For example,

ScrollView {
    style: ScrollViewStyle {
        handle: Rectangle {
            implicitWidth: 50
            implicitHeight: 30
            color: "red"
        }
        scrollBarBackground: Rectangle {
            implicitWidth: 50
            implicitHeight: 30
            color: "black"
        }
        decrementControl: Rectangle {
            implicitWidth: 50
            implicitHeight: 30
            color: "green"
        }
        incrementControl: Rectangle {
            implicitWidth: 50
            implicitHeight: 30
            color: "blue"
        }
    }
    //...
}

and it looks like this:

custom scroll bar

Upvotes: 7

Related Questions