获取动态创建的组件坐标

Question

我有一个主放置区域，加载时会动态创建一个新的矩形组件。新创建的矩形组件可以在拖动区域内拖动。但是，我不知道如何在拖放矩形时获取新矩形组件在拖动区域上的坐标。

编辑 我不知何故需要放置区代码中的新坐标数据

放置区代码

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.3

Page{
    
    id: page1

    // On Dropped
    function onDropAreaDropped(drag){
        console.log(JSON.stringify(drag))
    }

    // On Entered
    function onDropAreaEntered(drag){
        console.log(JSON.stringify(drag))
    }

    // This is the Drop area code
    Rectangle{
        id: dropRectangle
        color: "beige"
        width: parent.width
        height: parent.height

        DropArea {
            id: dropArea
            anchors.fill: parent
            onEntered: onDropAreaEntered(drag)
            onDropped: onDropAreaDropped(drag)
        }

        // This creates the new rectangle component
        Component.onCompleted: {
            var dynamicRectangle2 = Qt.createComponent("Test2.qml");
            dynamicRectangle2.createObject(parent, {x:100, y: 100})
        }
    }
}

Test2.qml 的代码 - 矩形组件

import QtQuick 2.15
import QtQuick.Controls 2.15

Page {
    id : somepageid

    Rectangle{
        id:dragRect

        height: 40
        width: 60
        color: "blue"
      
        // Need this x and y coordinate data in the drop area component
        onXChanged: {
            console.log(dragRect.x)
        }
        onYChanged: {
            console.log(dragRect.y)
        }

        MouseArea{
            id: mArea
            anchors.fill: parent
            drag.target: dragRect
        }
    }
}

Answer 1

我只知道一种获取动态创建对象的方法，该对象尚未附加到任何变量或属性 - 您需要通过名称或已知索引在其父级的 data 属性中找到它。

例如。你的Component.onCreated 会变成这样：

 Component.onCompleted: {
                var dynamicRectangle2 = Qt.createComponent("Test2.qml");
                dynamicRectangle2.createObject(parent, {x:100, y: 100, objectName: "dynamic_rectangle"})

                var index = indexOfObject("dynamic_rectangle", parent)
                if (index == -1)
                    console.debug("couldn't find an object")
                else
                    console.debug("object found at: (" + parent.data[index].x + "," + parent.data[index].y + ")")
            }

函数indexOfObject：

    // Searches for object with objectName inside parent's property 'data'
    // @param objName object name to search for
    // @param parent object where to search
    // @return -1 if not found, index if found
    function indexOfObject(objName, parent) {
        for (var i = 0 ; i < parent.data.length; i++) {
            if (parent.data[i].objectName === objName)
                return i
        }
        return -1
    }

Answer 2

我已经使用signals and slots 解决了这个问题。我使用

将新矩形中鼠标动作发出的信号连接到主要区域中提到的插槽

        // This creates the new rectangle component
        Component.onCompleted: {
            var dynamicRectangle2 = Qt.createComponent("Test2.qml");

            // Assign new variable to the created object
            // Use this variable to connect the signals and slots
            var newRect =  dynamicRectangle2.createObject(root, {x:100, y: 100})
            newRect.dragged.connect(onDropAreaEntered)
            newRect.dropped.connect(onDropAreaDropped)
        }

这里是完整的代码

放置区域

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.3

Page{

    id: root

    // On Dropped
    function onDropAreaDropped(x,y){
        console.log("Dropped" , x, y)
    }

    // On Entered
    function onDropAreaEntered(x,y){
        console.log("Dragging" , x, y)
    }

    // This is the Drop area code
    Rectangle{
        id: dropRectangle
        color: "beige"
        width: parent.width
        height: parent.height

        DropArea {
            id: dropArea
            anchors.fill: parent
            onEntered: onDropAreaEntered(drag)
            onDropped: onDropAreaDropped(drag)
        }

        // This creates the new rectangle component
        Component.onCompleted: {
            var dynamicRectangle2 = Qt.createComponent("Test2.qml");

            // Assign new variable to the created object
            // Use this variable to connect the signals and slots
            var newRect =  dynamicRectangle2.createObject(root, {x:100, y: 100})
            newRect.dragged.connect(onDropAreaEntered)
            newRect.dropped.connect(onDropAreaDropped)
        }
    }

}

Test2.qml 的代码 - 矩形组件

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle{
    id:dragRect

    height: 40
    width: 60
    color: "blue"

    signal dragged(double x, double y);
    signal dropped(double x, double y);

    MouseArea{
        id: mArea
        anchors.fill: parent
        drag.target: dragRect

        onReleased: {
            dragRect.dropped(dragRect.x, dragRect.y)
        }

        onPositionChanged: {
            dragRect.dragged(dragRect.x, dragRect.y)
        }
    }
}