qt.labs.controls - customizing Tumbler - Material

ekkescorner

I tried to customize the Tumbler.
a) selected number with accent color and slightly larger font and something less spacing between values
b) slightly larger font and at top and bottom of selected number a small line in accent color saimilar to TabButton

a) got it working for color and font size, but didn't found out HowTo change the spacing

Tumbler {
	id: tumbler
	model: 10
	visibleItemCount: 5
	delegate: Text {
		property int displacement: Math.abs(Tumbler.displacement)
			id: label
			text: modelData
			color: displacement == 1 ? Material.accentColor : "darkGray"
			font: tumbler.font
			scale: displacement == 1 ? 1.25 : 1.0
			horizontalAlignment: Text.AlignHCenter
			verticalAlignment: Text.AlignVCenter
	}
}

any ideas HowTo change the space between the values ?

b) have no idea HowTo draw the accent colored lines

thx helping

ekkescorner

@ekkescorner any ideas or hints ? - thx

jpnurmi

It sounds like you would have to replace the builtin contentItem, which is a PathView. You could copy the one from http://code.qt.io/cgit/qt/qtquickcontrols2.git/tree/src/imports/controls/material/Tumbler.qml and use it as a starting point and tweak the path to your needs.

ekkescorner

@jpnurmi thx for the hint.
then at first I have to learn what a PathView is ;-)

ekkescorner

@jpnurmi thx again
only had to change the implicitHeight:

Tumbler {
    id: tumbler
    model: 10
    visibleItemCount: 5
    implicitHeight: visibleItemCount * 24
    delegate: Text {
        property int displacement: Math.abs(Tumbler.displacement)
        id: label
        text: modelData
        color: displacement == 0 ? Material.primaryTextColor : Material.secondaryTextColor
        font: tumbler.font
        scale: displacement == 0 ? 1.20 : 1.0
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }
}

while flicking the tumbler there's a noticable delay before only the selected number will be scaled,
but I can live with this.