qt.labs.controls - customizing Tumbler - Material


  • Qt Champions 2016

    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


  • Qt Champions 2016

    @ekkescorner any ideas or hints ? - thx



  • 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.


  • Qt Champions 2016

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


  • Qt Champions 2016

    @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.



Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.