QML中如何将PathView环形选中项从左垂直中心移至右垂直中心

我无法将PathView的当前索引位置从左垂直中心改为右垂直中心。我有20个项呈环形排列，当前选中项位于路径的左垂直中心。我希望选中项始终位于路径的右垂直中心，目前已通过代码currentIndex: pathView.count / 2 // invert the 1st to right尝试将首个项移至右侧，相关QML代码如下：

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

Window {
    visible: true
    width: Screen.width
    height: Screen.height
    color: "black"
    
    Rectangle {
        id: wheelposition
        width: parent.width / 2
        height: parent.height
        anchors.left: parent.left
        color: "white"
        
        PathView {
            id: pathView
            width: parent.width
            height: parent.width
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter // Center vertically
            focus: true
            Keys.onUpPressed: decrementCurrentIndex()
            Keys.onDownPressed: incrementCurrentIndex()
            model: 20 // 20 icons
            // currentIndex: pathView.count - 1 // Start from (last index)
            currentIndex: pathView.count / 2  // invert the 1st to right
            
            delegate: Rectangle {
                width: (pathView.width / pathView.count) * 0.8 // Adjust size based on the width of the PathView
                height: 50
                color: index === pathView.currentIndex  ? "red" : "blue" // Change color if item is selected or not
                
                Text {
                    text: index + 1 // Display index as text
                    anchors.centerIn: parent
                    font.pixelSize: 12
                    color: index === pathView.currentIndex ? "white" : "black" // Change text color if item is selected
                }
                
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        // Handle item click
                        console.log("Clicked on item " + (index + 1));
                        pathView.currentIndex = index; // Set the current index to the clicked item
                    }
                }
                
                // x: index === pathView.currentIndex ? 0 : pathView.width - width
                    
                transform: [
                    Rotation {
                        origin.x: width / 2
                        origin.y: height / 2
                        axis { x: 0; y: 0; z: 1 }
                        angle: ((index + pathView.currentIndex) * (360))
                    },
                    Translate {  // moves circle left / right and up / down
                        x: pathView.width / 2 // Offset to center items
                        y: pathView.height / 2 // Offset to center items
                    }
                ]
            }
            
            path: Path {
                startX: 0
                startY: 0
                PathSvg {
                    path: "M " + (pathView.width / 6) + " 0" + " a " + (pathView.width / 2) + " " + (pathView.height / 2) + " 0 1 0 " + pathView.width + " 0" + " a " + (pathView.width / 2) + " " + (pathView.height / 2) + " 0 1 0 -" + pathView.width + " 0"
                }
            }
        }
    }
}

要让选中项始终固定在右垂直中心，需调整路径起始位置和代理项旋转逻辑，修正后的完整代码如下：

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

Window {
    visible: true
    width: Screen.width
    height: Screen.height
    color: "black"
    
    Rectangle {
        id: wheelposition
        width: parent.width / 2
        height: parent.height
        anchors.left: parent.left
        color: "white"
        
        PathView {
            id: pathView
            width: parent.width
            height: parent.width
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            focus: true
            Keys.onUpPressed: decrementCurrentIndex()
            Keys.onDownPressed: incrementCurrentIndex()
            model: 20
            currentIndex: 0
            
            delegate: Rectangle {
                width: (pathView.width / pathView.count) * 0.8
                height: 50
                color: index === pathView.currentIndex ? "red" : "blue"
                
                Text {
                    text: index + 1
                    anchors.centerIn: parent
                    font.pixelSize: 12
                    color: index === pathView.currentIndex ? "white" : "black"
                }
                
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        console.log("Clicked on item " + (index + 1));
                        pathView.currentIndex = index;
                    }
                }
                
                transform: [
                    Rotation {
                        origin.x: pathView.width / 2
                        origin.y: pathView.height / 2
                        axis { x: 0; y: 0; z: 1 }
                        angle: ((index - pathView.currentIndex) * (360 / pathView.count))
                    }
                ]
            }
            
            path: Path {
                startX: pathView.width
                startY: pathView.height / 2
                PathSvg {
                    path: "a " + (pathView.width / 2) + " " + (pathView.height / 2) + " 0 1 0 -" + pathView.width + " 0" + " a " + (pathView.width / 2) + " " + (pathView.height / 2) + " 0 1 0 " + pathView.width + " 0"
                }
            }
        }
    }
}

关键修改说明： #

• 路径起始点调整：将path的startX设为pathView.width、startY设为pathView.height / 2，直接把路径起点定位到PathView的右垂直中心。
• 旋转逻辑修正：代理项旋转角度改为((index - pathView.currentIndex) * (360 / pathView.count))，选中项（index等于currentIndex时角度为0）会固定在路径起点，其他项按环形均匀排列。
• 初始索引重置：将currentIndex改回0，无需通过偏移count/2调整位置，旋转逻辑会自动把选中项锁定在右侧。

内容的提问来源于stack exchange，提问作者RFS Vieira