Qt Quick Controls 2.14 how to style ScrollView

Question

It is not clear how to style the QML ScrollView.
I want to have the below style for the ScrollView but getting error style as invalid property.

import QtQuick 2.0
import QtQuick.Controls 2.14
import QtQuick.Controls.Styles 1.4

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"
        }
    }
    //...
}

Update:

import QtQuick 2.0
import QtQuick.Controls 2.14

ScrollView {
    id: myScrollView
    width: 700
    height: parent.height
    clip: true

    ScrollBar.vertical: ScrollBar {
        id: scrollBar
        parent: myScrollView.parent
        policy: ScrollBar.AlwaysOn
        anchors.top: myScrollView.top
        anchors.left: myScrollView.right
        anchors.bottom: myScrollView.bottom
        height: myScrollView.availableHeight

        contentItem: Rectangle {
            implicitWidth: 16
            implicitHeight: 10
            anchors.leftMargin: 10

            radius: 16
            color: "blue"
        }
    }

    ListView {
        id: myListView
        anchors.fill: parent

    .... Rest of the code ....

With above code I could get the style for the vertical scrall bar but with this code I see two scrolls bars. One with light gray color with very small size and one with blue color as per the above style.

Also the height of the blue scroll bar is not as per the style.

JarMan JarMan · Accepted Answer · 2020-09-15T17:27:42

You're confusing Qt Quick Controls 1 with Qt Quick Controls 2. QQC2 does not use a style property. Here are the docs. The basic idea for a ScrollView is that you can change the background and also the ScrollBar that gets attached.

ScrollView {
    background: ... // This changes what's drawn in the background

    ScrollBar.vertical: ScrollBar { ... }
    ScrollBar.horizontal: ScrollBar { ... }
}

And a ScrollBar itself can be customized as well by changing the background or contentItem.

ScrollBar {
    background: ... // Change the background of the scrollbar
    contentItem: ... // Change the scroll indicator
}

UPDATE: Actually, I see the same behavior you do when I try it. I was just following the docs, so maybe there's a Qt bug there. The good news is since you're just trying to scroll a ListView, the ScrollView is actually unnecessary. You can just do this:

    ListView {
        id: listView
        width: 200
        height: 200
        model: 100
        clip: true
        delegate: ItemDelegate {
            text: modelData
        }

        ScrollBar.vertical: ScrollBar {
            background: Rectangle { color: "red" }
            contentItem: Rectangle { implicitWidth: 10; implicitHeight: 10; color: "blue" }
        }
    }

I tried it myself this time and it worked.

Qt Quick Controls 2.14 how to style ScrollView

1 Answers