Свойство QML MouseArea не обрабатывает "цель"

Question

У нас есть проект, в котором есть несколько компонентов, и один из них называется Racket.qml как показано ниже:

import QtQuick 2.9

Rectangle {
    id: root
    width: 15; height: 65
    property int oldY: y
    property bool yUwards: false
    property bool yDwards: false

    onYChanged: {
        if(y > oldY)  yDwards = true
        else if (y < oldY)  yUwards = true
        oldY = y
    }

    Item {
        x: root.x - 50
        y: root.y - 50
        width: 100
        height: 200

        MouseArea {
            anchors.fill: parent
            drag.target: root
            focus: true
            hoverEnabled: true
            pressAndHoldInterval: 0
            drag.axis: Drag.YAxis
            drag.minimumY: table.y
            drag.maximumY: table.height - height - 10
        }
    }
}

Я использовал этот компонент в main.qml сюда:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.1

Window {
    id: window
    title: qsTr("Test")
    color: "gray"

    Rectangle {
        id: table
        width: window.width / 1.15; height: window.height / 1.15
        x: window.x + 100; y: 10;

        Racket {
            id: blackRacket
            anchors.left: table.left
            anchors.leftMargin: width * 2
            y: height
            color: "black"
        }
        Racket {
            id: redRacket
            anchors.right: table.right
            anchors.rightMargin: width * 2
            y: height
            color: "red"
        }
      ...

Моей целью было просто расширить область Ракетки, но теперь, когда я запускаю программу, я не могу перетащить ракетки!

В чем может быть проблема, пожалуйста?

Answer 1

Для отладки добавьте прозрачный Rectangle с цветной каймой к MouseArea,

MouseArea {
    anchors.fill: parent
    drag.target: root
    focus: true
    hoverEnabled: true
    pressAndHoldInterval: 0
    drag.axis: Drag.YAxis
    drag.minimumY: table.y
    drag.maximumY: table.height - height - 10
    Rectangle {
        anchors.fill: parent
        color: 'transparent'
        border.color: 'black'
    }
}

Вы увидите, что MouseArea неправильно размещен. То есть как твой ItemПоложение относительно Rectangle И использует x а также y координаты. Настройка Item"s x а также y прямо к -50 решит это (Строка 17, 18).

Однако этот пункт полностью избыточен и снижает производительность. Вы можете изменить размер и положение MouseArea непосредственно, чтобы уменьшить накладные расходы. Вы также можете сделать это с помощью привязки с отрицательными полями. Что-то вроде:

Rectangle {
    id: root
    width: 15; height: 65
    property int oldY: y
    property bool yUwards: false
    property bool yDwards: false
    color: 'red'

    onYChanged: {
        if(y > oldY)  yDwards = true
        else if (y < oldY)  yUwards = true
        oldY = y
    }


    MouseArea {

        anchors.fill: parent  // I anchor directly to the Rectangle
        anchors.margins: -50  // and extend the area by setting negative margins
                              // You can also modify each margin (top, left, ...) seperatly

        drag.target: root
        focus: true
        hoverEnabled: true
        pressAndHoldInterval: 0
        drag.axis: Drag.YAxis
        drag.minimumY: table.y
        drag.maximumY: table.height - height - 10
        Rectangle {
            anchors.fill: parent
            color: 'transparent'
            border.color: 'black'
        }
    }
}