QML 鼠标区域属性不处理"目标"

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