动态创建QML Rectangle的drag.target属性设置报错排查

在Canvas上动态创建了若干QML Rectangle，希望通过MouseArea的drag.target属性切换矩形的可拖拽状态：可拖拽时设为parent，不可拖拽时设为undefined。但访问drag.target时出现「TypeError: Value is undefined and could not be converted to an object」错误。尝试多种属性访问路径和赋值内容均未解决，但使用相同语法设置矩形color属性正常。

报错函数 #

function setVertsDraggable(verts, draggable) {
    for (var i=0; i<verts.length; i++) {
        if (draggable) {
            verts[i].drag.target = "parent";
        }
        else {
            verts[i].drag.target = "undefined";
        }
    }
}

正常颜色设置函数 #

function setVertsColor(verts, color) {
    for (var i=0;i<verts.length; i++) {
        verts[i].color = color;
    }
}

动态创建代码 #

var component = Qt.createComponent("Vertex.qml");
var vertex = component.createObject(parent, {x: xPos, y: yPos, width: size, color:"yellow"});

Vertex.qml内容 #

import QtQuick

Rectangle {
    width: 8
    height: 8
    color: yellow
    property string tag: ""
    MouseArea {
        anchors.fill: parent
        drag.target: undefined
        drag.smoothed: false
        onReleased: {
            polyCanvas.requestPaint()
        }
    }
}

1. 赋值类型错误：drag.target需要的是QML对象引用，你却赋值了字符串"parent"和"undefined"，字符串无法转换为目标对象，直接触发类型错误。
2. 属性访问路径错误：verts[i]是Rectangle实例，但drag属性属于其内部的MouseArea，Rectangle本身没有drag属性，直接通过verts[i].drag无法访问到目标对象。

方法1：暴露MouseArea的Drag接口（推荐） #

修改Vertex.qml，给MouseArea设置id，并在Rectangle中添加属性直接暴露drag对象：

import QtQuick

Rectangle {
    width: 8
    height: 8
    color: "yellow" // 修复原代码的color赋值错误，需用字符串
    property string tag: ""
    // 新增属性暴露drag对象，方便外部访问
    property var dragHandler: mouseArea.drag

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        drag.target: undefined
        drag.smoothed: false
        onReleased: {
            polyCanvas.requestPaint()
        }
    }
}

然后修改拖拽控制函数，直接赋值对象引用：

function setVertsDraggable(verts, draggable) {
    for (var i=0; i<verts.length; i++) {
        if (draggable) {
            // 直接赋值当前Rectangle实例（即MouseArea的parent）
            verts[i].dragHandler.target = verts[i];
        }
        else {
            // 赋值undefined，注意不要加引号
            verts[i].dragHandler.target = undefined;
        }
    }
}

方法2：通过子元素访问MouseArea #

如果不想修改Vertex.qml，可以通过Rectangle的children数组定位MouseArea：

function setVertsDraggable(verts, draggable) {
    for (var i=0; i<verts.length; i++) {
        // 假设MouseArea是Rectangle的第一个子元素
        var mouseArea = verts[i].children[0];
        if (mouseArea && mouseArea.drag) {
            mouseArea.drag.target = draggable ? verts[i] : undefined;
        }
    }
}

额外修复 #

原Vertex.qml中color: yellow会触发错误，因为yellow不是预定义标识符，需改为字符串"yellow"或标准颜色值（如Qt.yellow）。

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