如何在 qml 中的列表视图顶部显示显示光标或图像

Question

我正在尝试将矩形项目放置在 qml 中的列表视图中。我需要在列表视图中的两个项目之间显示一个类似于光标的光标或图像。光标应该能够在列表视图中不同项目的空间之间切换位置。

请帮助我提出实现这一目标的想法。谢谢你。

Answer 1

不漂亮，可以改进，尤其是在获取委托项的中心并计算鼠标是更靠近委托的左侧还是右侧时，但它显示了如何显示这样的光标。

import QtQuick

Window {
    id: root
    width: 640
    height: 240
    visible: true

    ListView {
        id: listView
        x: 40
        y: 40
        width: 400
        height: 50
        spacing: 10
        orientation: ListView.Horizontal

        model: ["Item 0", "Item 1", "Item 2", "Item 3"]
        delegate: Rectangle {
            width: 100
            height: 50
            border.width: 1

            Text {
                anchors.centerIn: parent
                text: modelData
            }
        }

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onPositionChanged: function(mouse) {
                let item = listView.itemAt(mouse.x, mouse.y)
                if (item)
                    cursor.x = item.x - listView.spacing
            }
        }

        Rectangle {
            id: cursor
            width: listView.spacing
            height: listView.height
            color: "red"
        }
    }
}