How to display different sizes for inactive items in Tumbler component-CodePudding

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?

CodePudding user response：

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
    }
}

CodePudding user response：

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))