QML中如何通过顶点ID访问Repeater代理项实现可拖拽图结构

核心需求 #

通过Repeater创建带vID属性的可拖拽顶点，绘制连接指定vID顶点的边，要求：

• 无需遍历Repeater所有项即可通过vID定位顶点
• 顶点拖拽时边的端点自动跟随更新
• 实现高效的依赖绑定逻辑

最优实现方案 #

1. 维护顶点ID到代理的映射表 #

在顶点Repeater中创建vertexMap对象，在delegate的生命周期事件中自动注册/注销顶点代理，让getVert方法能直接通过vID获取对应代理，避免遍历开销。

2. 优化边的绘制方式 #

放弃全屏Canvas，改用Line组件（或小范围Canvas），仅绘制当前边的区域，减少不必要的重绘，同时利用QML属性绑定自动同步顶点位置。

3. 直接绑定顶点位置属性 #

将边的端点坐标直接绑定到顶点的中心位置属性，无需手动触发重绘，QML会自动处理属性变化后的更新逻辑。

完整实现代码 #

import QtQuick 6

Rectangle {
    id: window
    width: 800
    height: 600
    color: "black"

    Repeater {
        id: vertices
        // 维护vID到顶点代理的快速映射
        property var vertexMap: ({})

        // 通过vID直接获取顶点代理
        function getVert(vID) {
            return vertexMap[vID] || null;
        }

        model: ListModel {
            ListElement { vID: 3; x: 100; y: 200 }
            ListElement { vID: 4; x: 600; y: 500 }
            ListElement { vID: 7; x: 500; y: 300 }
            ListElement { vID: 9; x: 400; y: 200 }
        }

        delegate: Rectangle {
            id: vertex
            x: model.x
            y: model.y
            width: 10
            height: 10
            radius: 5
            color: "white"

            // 用属性存储顶点中心，支持QML绑定
            property point centerPos: Qt.point(x + width/2, y + height/2)

            Drag.active: vertexMouse.drag.active
            MouseArea {
                id: vertexMouse
                anchors.fill: parent
                drag.target: vertex
            }

            // 顶点创建时注册到映射表
            Component.onCompleted: {
                vertices.vertexMap[model.vID] = vertex;
            }

            // 顶点销毁时从映射表移除
            Component.onDestruction: {
                delete vertices.vertexMap[model.vID];
            }
        }
    }

    Repeater {
        id: edges
        model: ListModel {
            ListElement { vID1: 3; vID2: 7 }
            ListElement { vID1: 3; vID2: 4 }
        }

        delegate: Line {
            // 绑定起点到对应顶点中心
            x1: vertices.getVert(model.vID1)?.centerPos.x || 0
            y1: vertices.getVert(model.vID1)?.centerPos.y || 0
            // 绑定终点到对应顶点中心
            x2: vertices.getVert(model.vID2)?.centerPos.x || 0
            y2: vertices.getVert(model.vID2)?.centerPos.y || 0

            color: "white"
            lineWidth: 4
            antialiasing: true
        }
    }
}

关键改进说明 #

• vertexMap实现O(1)时间复杂度的顶点查找，替代低效的Repeater遍历
• 顶点centerPos改为属性而非函数，支持QML自动绑定更新
• 使用Line组件替代全屏Canvas，大幅降低重绘开销，代码更简洁
• 用可选链?.处理顶点未找到的情况，避免运行时错误

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