qt - 无法单击鼠标区域下方的按钮

问题描述

在这里，我有一个矩形，它是父矩形和子矩形。子矩形具有MouseArea允许您滑动子矩形的。现在，我想在父矩形（子矩形和下MouseArea）上有一个按钮，即使子矩形覆盖了按钮，我也想单击该按钮。这是一个例子”

import QtQuick 2.15
import QtQuick.Window 2.0
import QtQuick.Controls 2.15

Window {
  visible: true
  width: 800
  height: 800

  Rectangle {
      id: root
      anchors.fill: parent
      color: "yellow"

      Button {
          id: button1
          x: 314
          y: 182
          text: qsTr("Button")
          onClicked: console.log("Hello")
      }

      Rectangle {
          id: panel
          width: parent.width
          height: parent.height * 0.8
          radius: 20
          color: "orange"
          opacity: 0.2
          MouseArea {
              id: mouseArea
              anchors.fill: parent
              drag.target: panel
              drag.minimumY: 0
              drag.maximumY: 0
              drag.minimumX: -panel.width
              drag.maximumX: 0
              onReleased: {
                  //if the panel is swiped more than 30% it will hide
                  //else it will go back to the original position
                  //this makes a pretty nice effect :)
                  if (panel.x < -panel.width * 0.3) {
                      //we need to make sure that a state change happens to
                      //fire the transition animation
                      root.state = "show"
                      root.state = "hide"
                  }
                  else {
                      root.state = "hide"
                      root.state = "show"
                  }
              }
          }
      }

      Rectangle {
          id: button
          width: 45
          height: width
          radius: 5
          color: "lightblue"
          anchors.bottom: parent.bottom
          anchors.left: parent.left
          MouseArea {
              anchors.fill: parent
              onClicked: {
                  root.state = root.state === "show" ? "hide" : "show"
              }
          }
      }

      state: "show"
      states: [
          State {
              name: "hide"
              PropertyChanges { target: panel; x: -panel.width }
          },
          State {
              name: "show"
              PropertyChanges { target: panel; x: 0 }
          }
      ]

      transitions: Transition {
          NumberAnimation {
              target: panel
              property: "x"
              duration: 1000
              easing.type: Easing.OutCubic
          }
      }
  }
}

如何在不滑动子矩形的情况下单击按钮？

标签： qtqmlqtquick2

首先，您需要在mouseArea中检测拖动是否处于活动状态，如果拖动未处于活动状态，则检测触发鼠标按下事件的点是否也在面板下方的button1内。您可以使用's mapToItem方法来做到这一点。如果是这种情况，那么您可以手动设置button1可视化。Item pressed

然后，当released触发事件时，您会检测您是否仍在button1内并发出特殊信号，例如buttonBelowClicked。该信号需要通过信号链连接到button1信号。 clicked

请注意，您需要始终在mouseArea onReleased中重置button1按下的可视化，因为您可能已经开始从button1顶部拖动面板，并且按钮显示按下的可视化，但随后启用了拖动...

Window {
    visible: true
    width: 800
    height: 800

    Rectangle {
        id: root
        anchors.fill: parent
        color: "yellow"

        Button {
            id: button1
            x: 314
            y: 182
            text: qsTr("Button")
            onClicked: console.log("Hello")
            Component.onCompleted: mouseArea.buttonBelowClicked.connect(clicked)
        }

        Rectangle {
            id: panel
            width: parent.width
            height: parent.height * 0.8
            radius: 20
            color: "orange"
            opacity: 0.2
            MouseArea {
                id: mouseArea
                signal buttonBelowClicked
                anchors.fill: parent
                drag.target: panel
                drag.minimumY: 0
                drag.maximumY: 0
                drag.minimumX: -panel.width
                drag.maximumX: 0
                onPressed: {
                    if (!drag.active) {
                        if (isPointInsideButton1(mouse.x, mouse.y)) {
                            button1.down = true
                        }
                    }
                }
                onReleased: {
                    if (!drag.active) {
                        if (isPointInsideButton1(mouse.x, mouse.y)) {
                            buttonBelowClicked()
                        }
                    } else {
                        if (panel.x < -panel.width * 0.3) {
                            root.state = "show"
                            root.state = "hide"
                        }
                        else {
                            root.state = "hide"
                            root.state = "show"
                        }
                    }
                    button1.down = undefined
                }

                function isPointInsideButton1(x, y) {
                    const mapped = panel.mapToItem(button1, x, y)
                    if (button1.contains(Qt.point(mapped.x, mapped.y))) {
                        return true
                    }
                    return false
                }
            }
        }

        Rectangle {
            id: button
            width: 45
            height: width
            radius: 5
            color: "lightblue"
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    root.state = root.state === "show" ? "hide" : "show"
                }
            }
        }

        state: "show"
        states: [
            State {
                name: "hide"
                PropertyChanges { target: panel; x: -panel.width }
            },
            State {
                name: "show"
                PropertyChanges { target: panel; x: 0 }
            }
        ]

        transitions: Transition {
            NumberAnimation {
                target: panel
                property: "x"
                duration: 1000
                easing.type: Easing.OutCubic
            }
        }
    }
}

qt - 无法单击鼠标区域下方的按钮

问题描述

解决方案

推荐阅读