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