currentIndex show the same value when moving the mouse up and down in Tumbler QML

I am using Tumbler QML for a component. When I move the mouse up, the value of currentIndex shows one unit less, while I move the mouse down, this value is correct.Is there a way to make the value of currentIndex show the same value when moving the mouse up and down?

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
        
        Component.onCompleted: {
            console.log("log ", Tumbler.tumbler.currentIndex)
        }
        
    }
}

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

    Row {
        id: row

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

currentIndex from Tumbler Qml

>Solution :

You are using onCompleted().Hence you should use onCurrentIndexChanged().
full example shown below:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.12

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    function formatText(c,t){
        return t;
    }

    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 
//            Component.onCompleted: {
//                console.log("log ", Tumbler.tumbler.currentIndex)
//            }

        }
    }

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

        Row {
            id: row

            Tumbler {
                id: hoursTumbler
                model: 3
                delegate: delegateComponent
                onCurrentIndexChanged: {
                    if(currentIndex !== undefined) console.log("log ", currentIndex)
                }
            }
        }
    }

}