How to display different sizes for inactive items in Tumbler component

Question

I am trying to build an application and for the time settings i am trying to use Tumbler component for this item. I checked on qml documentation for Tumbler but i couldn't find any size settings for Tumbler. I can change the whole Tumbler font size but what i am looking for is changing the sizes for not current items. If i choose time as 12:24:AM i want to see 11,13,23and 25 on some different font sizes. Here is the example

import QtQuick
import QtQuick.Window
import QtQuick.Controls

Rectangle {
width: frame.implicitWidth + 10
height: frame.implicitHeight + 10

function formatText(count, modelData) {
    var data = count === 12 ? modelData + 1 : modelData;
    return data.toString().length < 2 ? "0" + data : data;
}

FontMetrics {
    id: fontMetrics
}

Component {
    id: delegateComponent

    Label {
        text: formatText(Tumbler.tumbler.count, modelData)
        opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        font.pixelSize: fontMetrics.font.pixelSize * 1.25
    }
}

Frame {
    id: frame
    padding: 0
    anchors.centerIn: parent

    Row {
        id: row

        Tumbler {
            id: hoursTumbler
            model: 12
            delegate: delegateComponent
        }

        Tumbler {
            id: minutesTumbler
            model: 60
            delegate: delegateComponent
        }

        Tumbler {
            id: amPmTumbler
            model: ["AM", "PM"]
            delegate: delegateComponent
        }
    }
  }
}

The line of "font.pixelSize: fontMetrics.font.pixelSize * 1.25" is changing the whole component's font size. How can i change font sizes for upper and lower values on Tumbler?

Answer 1

You can use the Tumbler.displacement property that represents how far away this item is from being the current item.

Tumbler {
    anchors.centerIn: parent
    model: 60
    delegate: Text {
        text: modelData
        font.pixelSize: 16 + Math.abs(Tumbler.displacement) * 10
        horizontalAlignment: Text.AlignHCenter
    }
}

Answer 2

Try setting your font.pixelSize by checking Tumbler.displacement === 0 as follows:

        font.pixelSize: Tumbler.displacement === 0
                            ? fontMetrics.font.pixelSize * 1.25
                            : fontMetrics.font.pixelSize

After looking at @folibis answer, it inspired me to write this variation which causes the font to diminish in value the further it is away from the current item:

        font.pixelSize: fontMetrics.font.pixelSize * 1.25 / ( 1 + Math.abs(Tumbler.displacement))