auto-scroll flickable to selected item

NekoTina

I'm trying to auto scroll a qml flickable to selected item in a list view, I have implemented a logic for calcluating the position of the item and set the contentY property of flickable to scroll to the postion, it doesn't work correctly, always scroll below the selected Item,
Here is the flickable code:

//this is my selected item index I get this from my model and it is the valid index

property var selectedServerIndex: ServersModel.getDefaultServerIndex()

Flickable {
            id: serversContainer

            anchors.top: serversMenuHeader.bottom
            anchors.right: parent.right
            anchors.left: parent.left
            anchors.topMargin: 16

            contentHeight: col.height + col.anchors.bottomMargin
            implicitHeight: parent.height - serversMenuHeader.implicitHeight
            clip: true

            function autoScroll() {
                const eachListitemHeight = serversMenuContent.contentItem.height / serversMenuContent.count
                const totalItemsHeight = selectedServerIndex * eachListitemHeight
                contentY = totalItemsHeight - (implicitHeight / 2)
                console.log(eachListitemHeight)
                console.log(totalItemsHeight)
                console.log(implicitHeight)
                console.log(contentY)
            }
            Component.onCompleted: autoScroll()

            ScrollBar.vertical: ScrollBar {
                id: scrollBar
                policy: serversContainer.height >= serversContainer.contentHeight ? ScrollBar.AlwaysOff : ScrollBar.AlwaysOn
            }

the list view code:

Column {
                id: col
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottomMargin: 32

                spacing: 16

                ButtonGroup {
                    id: serversRadioButtonGroup
                }

                ListView {
                    id: serversMenuContent
                    width: parent.width
                    height: serversMenuContent.contentItem.height

                    model: ServersModel
                    currentIndex: ServersModel.defaultIndex

                    Connections {
                        target: ServersModel
                        function onDefaultServerIndexChanged(serverIndex) {
                            serversMenuContent.currentIndex = serverIndex
                        }
                    }

                    clip: true
                    interactive: true

                    delegate: Item {
                        id: menuContentDelegate

                        property variant delegateData: model

                        implicitWidth: serversMenuContent.width
                        implicitHeight: serverRadioButtonContent.implicitHeight

                        ColumnLayout {
                            id: serverRadioButtonContent

                            anchors.fill: parent
                            anchors.rightMargin: 16
                            anchors.leftMargin: 16

                            spacing: 0

I have tried this:

function autoScroll() {
                const eachListitemHeight = serversMenuContent.contentItem.height / serversMenuContent.count
                const totalItemsHeight = selectedServerIndex * eachListitemHeight
                contentY = totalItemsHeight - (implicitHeight / 2)
                console.log(eachListitemHeight)
                console.log(totalItemsHeight)
                console.log(implicitHeight)
                console.log(contentY)
            }
            Component.onCompleted: autoScroll()

it doesn't scroll to the selected item, always scroll to a wrong position

1- the first variable is the height of each item in the list view

2- second variable is the total height of the items above the selected item

3- the third variable is the center position of the selected item

the console log results are:

qml: 100 // the implicit height of the delegate of the listview is 109

qml: 1900 // correct because the selected item is the 20th item of the 40 items in the list

qml: 335.20000000000005 // the implicit height of the flickable

qml: 1732.4 // contentY is set to 1732.4