如何在QML的ListView中添加全局同步的时间线光标？

核心思路 #

把光标从每个VideoLayer中剥离出来，做成全局共享元素，统一处理点击事件和滚动同步，确保所有层的光标位置一致，且滚动时保持对应时间点的固定视觉位置。

修改步骤及代码示例 #

1. 重构光标为全局元素
   将光标移至ListView内部作为顶层元素，覆盖所有视频层，确保视觉上统一：

Item {
    id: timelineContainer
    anchors.fill: parent

    ListView {
        id: timeline
        width: main.contentWidth
        anchors.fill: parent
        ScrollBar.vertical: ScrollBar {}
        ScrollBar.horizontal: ScrollBar {}
        flickableDirection: Flickable.HorizontalAndVerticalFlick
        boundsBehavior: Flickable.StopAtBounds
        contentWidth: 10000 // 改为实际时间线总宽度，和VideoLayer的width一致
        model: VideoList{}
        delegate: VideoLayer{}

        // 全局光标，覆盖所有行
        Rectangle{
            id: globalCursor
            x: 0
            height: timeline.height
            width: 10
            color: "white"
            z: 10 // 确保在所有视频层上方显示
        }
    }

2. 统一处理点击事件
   在时间线容器上添加顶层MouseArea，捕获所有点击并计算光标在时间线内容中的绝对位置：

// 捕获整个时间线区域的点击
    MouseArea{
        anchors.fill: timeline
        onPressed: (mouse) => {
            // 计算点击位置在时间线内容坐标系中的绝对x值（抵消滚动偏移）
            const absoluteContentX = mouse.x + timeline.contentX;
            globalCursor.x = absoluteContentX;
        }
    }

3. 实现滚动时光标固定
   监听ListView的水平滚动偏移，调整光标显示位置，确保光标始终对应同一时间点：

// 监听滚动偏移变化，同步光标位置
    Connections {
        target: timeline
        function onContentXChanged() {
            // 光标在内容中的绝对位置不变，视觉位置 = 绝对位置 - 当前滚动偏移
            globalCursor.x = globalCursor.x - (timeline.contentX - timeline.contentXOld);
        }
    }
}

4. 清理VideoLayer内部代码
   删除VideoLayer中独立的光标和局部点击逻辑，简化为纯视频层展示：

VideoLayer {
    id : layer

    Rectangle {
        width: 10000
        height: 100
        color: main.bgColor
        border.color: "black"
        border.width: 2

        // 若需要层内点击反馈，可保留MouseArea但不处理光标逻辑
        MouseArea{
            anchors.fill: parent
            // 可添加层选中逻辑，无需处理光标
        }
    }
}

关键说明 #

• 内容坐标系 vs 视觉坐标系：点击时计算absoluteContentX是为了记录光标在时间线内容中的真实位置，滚动时通过减去contentX偏移，让光标视觉上固定在对应的时间点，不会随滚动移动。
• 层级控制：通过z:10确保全局光标显示在所有视频层上方，避免被遮挡。

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