QML使动态创建的对象可拖动

Question

我正在使用QML中的JS创建对象，并使用以下脚本：

     var component;
var gauge;

function createVerticalGauge(setWidth) {
    component = Qt.createComponent("VerticalBarGauge.qml");
    if (component.status == Component.Ready)
        finishCreation(setWidth);
    else
        component.statusChanged.connect(finishCreation);
}

function finishCreation(setWidth) {
    if (component.status == Component.Ready) {
        gauge = component.createObject(root, {"x": 100, "y": 100});
        gauge.width = setWidth;
        if (gauge == null) {
            // Error Handling
            console.log("Error creating object");
        }
    } else if (component.status == Component.Error) {
        // Error Handling
        console.log("Error loading component:", component.errorString());
    }
}

这是使用饼图菜单执行脚本的QML页面。

import QtQuick.Extras 1.4
import QtQuick.Controls 1.4
import QtQuick 2.8
import "CreateVerticalGauge.js" as CreateVerticalGaugeScript

Rectangle {
    width: parent.width
    height: parent.height
    color: "black"

    id: dashboard
    anchors.fill: parent

    DropArea {
        width: parent.width
        height: parent.height
    }

    MouseArea {
        id: touchArea
        anchors.fill: parent


        onClicked: pieMenu.popup(mouseX, mouseY), console.log("clicked")
       }

    PieMenu {
        id: pieMenu

        MenuItem {
            text: "Add vertial bar"
            onTriggered: CreateVerticalGaugeScript.createVerticalGauge(300);
        }
        MenuItem {
            text: "Add horizontal bar"
            onTriggered: print("Action 2")
        }
        MenuItem {
            text: "Add dial gauge"
            onTriggered: print("Action 3")
        }
        MenuItem {
            text: "Remove"
            onTriggered: print("Action 4")
        }

    }



}

这是脚本创建的对象：

import QtQuick 2.8
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4



    Rectangle {
        id: rev
        width: 100
        height: 80
        color: "transparent"
        antialiasing: false
        anchors.left: parent.left
        anchors.top: parent.top

        Drag.active: parent.touchArea.drag.active

        Gauge {
            id: revgauge
            anchors.fill: parent
            anchors.margins: 10
            orientation : Qt.Horizontal
            minorTickmarkCount: 4
            tickmarkStepSize : 5000
            //labelStepSize: 50
            minimumValue: 0
            maximumValue: 10000

            //value: Dashboard.revs
            Behavior on value {
                NumberAnimation {
                    duration: 5
                }
            }
            Text {
                //text:"RPM " + Dashboard.revs
                font.pixelSize: (parent.height / 3)
                anchors.top : parent.top
                // anchors.top : parent.top
                font.bold: true
                font.family: "Eurostile"
                color: "white"
                anchors.horizontalCenter: parent.horizontalCenter
            }
              style: GaugeStyle {
                valueBar: Rectangle {
                   implicitWidth:  rev.height /3
                    color: Qt.rgba(revgauge.value / revgauge.maximumValue, 0, 1 - revgauge.value / revgauge.maximumValue, 1)
                }
            }
      }
    }

创建正常，对象在QML页面上创建。

如何在QML页面上拖动动态创建的对象？ 在我的屏幕上创建对象后，如何使其可拖动。

Answer 1

使用什么创建方法并不重要。最简单的方法是让创建的项目可以开始拖动。您应该在每个区域中放置一个鼠标区域并将其设置为拖动该特定项目。

只有一个鼠标区域的解决方案会涉及某种逻辑，以便在拖动开始位置找到项目（如果有），并将其设置为拖动目标（如果找到）。这有点复杂，所以我建议先前实现。

  Item {
    anchors.fill: parent
    Repeater {
      model: 20
      delegate: Rectangle {
        width: main.width
        height: 2
        color: "black"
        y: Math.round(Math.random() * (main.height - 10))
        MouseArea {
          width: parent.width
          height: parent.height + 10 // easier to get
          anchors.centerIn: parent
          drag.target: parent
          drag.axis: Drag.YAxis
        }
      }
    }
  }