获取动态创建的组件的坐标

问题描述

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

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

放置区域的代码

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
        }
    }
}

解决方法

我只知道一种获取动态创建的对象的方法，该对象尚未附加到任何变量或属性-您需要在其父对象的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
    }

,

我已经使用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,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",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,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)
        }
    }
}