Any way to customize the appearance of TextArea/ScrollView scrollbars?
-
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
-
@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.
-
@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" } } } }
-
@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.