Any way to customize the appearance of TextArea/ScrollView scrollbars?

[VRHans]

The defaults are system scrollbars which look horrible in my quite pretty QML user interface.

Do I have to roll my own? I didn't see any scroll view style options for changing the color or the shape.

[jpnurmi]

Notice that TextAreaStyle inherits ScrollViewStyle.

[VRHans]

I found that earlier and used it to modify some aspects, but I need to affect the scroll bars and there are virtually no settings for those.

[jpnurmi]

Try these:

• handle: http://doc.qt.io/qt-5/qml-qtquick-controls-styles-scrollviewstyle.html#handle-prop
• scrollBarBackground: http://doc.qt.io/qt-5/qml-qtquick-controls-styles-scrollviewstyle.html#scrollBarBackground-prop
• transientScrollBars: http://doc.qt.io/qt-5/qml-qtquick-controls-styles-scrollviewstyle.html#transientScrollBars-prop

[VRHans]

@jpnurmi said:

http://doc.qt.io/qt-5/qml-qtquick-controls-styles-scrollviewstyle.html#handle-prop

Are you just guessing or have you actually changed the appearance of the scrollbars to something custom?

I've seen all of the properties you've liniked to and they (according to the documentation) only expose boolean properties relating to behavior.

[jpnurmi]

@VRHans said:

Are you just guessing or have you actually changed the appearance of the scrollbars to something custom?

No, I'm not guessing. I have been involved in implementing that stuff a couple of years ago.

I've seen all of the properties you've liniked to and they (according to the documentation) only expose boolean properties relating to behavior.

The handle property is a Component that defines the Item that represents a handle. The styleData boolean properties are defined in the context of that item.

import QtQuick 2.5
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3

ApplicationWindow {
    id: window
    width: 640
    height: 480
    visible: true

    TextArea {
        anchors.fill: parent
        Component.onCompleted: {
            for (var i = 0; i < 100; ++i)
                append("foo bar " + i)
        }

        style: TextAreaStyle {
            incrementControl: null
            decrementControl: null
            transientScrollBars: true
            handle: Rectangle {
                implicitWidth: 20
                implicitHeight: 20
                color: styleData.pressed ? "dimgray" : "gray"
            }
            scrollBarBackground: Rectangle {
                implicitWidth: 20
                implicitHeight: 20
                color: "#33000000"
            }
        }
    }
}

[VRHans]

@jpnurmi said:

http://doc.qt.io/qt-5/qml-qtquick-controls-styles-scrollviewstyle.html#scrollBarBackground-prop

Ahhh... That makes sense, apologies. The documentation is very confusing because it very much makes it sound like only the two state properties can be affected: "You can access the following state properties"

What it means to say is something like "You can define the component, and that component will have the following state properties added to it that don't usually sit on a component."

I'll give that a try, thanks.

[VRHans]

@jpnurmi - That worked great, thanks. Just enough control to make it fit in visually.