QML ScrollViewStyle width?

Question

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.

Answer 1

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: