QML MouseArea 属性不处理 "target"

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

QML MouseArea 属性不处理 "target"

The QML MouseArea property doesn't handle the "target"

qt

qml

qt-quick

qqmlcomponent

mousearea

QML MouseArea 属性 不处理 "target"

The QML MouseArea property doesn't handle the "target"

qt

qml

qt-quick

qqmlcomponent

mousearea

QML MouseArea 属性不处理 "target"