QML Tumbler组件鼠标上下拖动时currentIndex显示不一致如何解决

问题原因 #

向上拖动时currentIndex少1的核心问题，一是你在delegate的Component.onCompleted中打印索引的时机错误——这个时机仅能捕获delegate创建时的初始索引，无法反映拖动过程或结束后的正确值；二是未显式规范Tumbler的可见项数量，导致拖动位移计算逻辑出现偏差。

修复方案 #

1. 监听Tumbler自身的currentIndex变化 #

放弃在delegate创建时打印索引，直接监听Tumbler的currentIndex属性变更，这样能获取拖动结束后的准确选中值：

Tumbler {
    id: hoursTumbler
    model: 12
    delegate: delegateComponent

    onCurrentIndexChanged: {
        console.log("当前选中索引：", currentIndex)
    }
}

2. 拖动过程中获取临时选中索引（可选） #

如果需要在拖动过程中实时获取临时选中项，Qt 5.15+版本可使用currentItemIndex属性，它会随拖动位移实时更新：

Component {
    id: delegateComponent

    Label {
        // ... 原有属性保持不变
        property int tempIndex: Tumbler.tumbler.currentItemIndex
        onTempIndexChanged: {
            console.log("拖动临时索引：", tempIndex)
        }
    }
}

3. 显式设置visibleItemCount #

将visibleItemCount设为奇数（比如3），确保选中项始终处于视觉中间位置，避免位移计算逻辑混乱：

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

完整修正代码 #

import QtQuick 2.15
import QtQuick.Controls 2.15

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

        // 拖动过程实时临时索引
        property int tempIndex: Tumbler.tumbler.currentItemIndex
        onTempIndexChanged: {
            console.log("拖动临时索引：", tempIndex)
        }
    }
}

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

    Row {
        id: row

        Tumbler {
            id: hoursTumbler
            model: 12
            delegate: delegateComponent
            visibleItemCount: 3

            // 最终确认的选中索引
            onCurrentIndexChanged: {
                console.log("最终选中索引：", currentIndex)
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Alireza Rahimi