qt - QML:如何创建一个由图像制成的三态自定义按钮？

Question

所以我尝试:

   Rectangle {
       x: 617
       y: 450
   Image {
      id: rect
      source:  "buttons/GO/GO!-norm.png"
      smooth: true
      opacity: 1
      MouseArea {
          id: mouseArea
          anchors.fill: parent
          hoverEnabled: true         //this line will enable mouseArea.containsMouse
          onClicked: Qt.quit()
      }

      states:  [
           State {
               name: "mouse-over"; when: mouseArea.containsMouse
               PropertyChanges { target: rect; scale: 0.95; opacity: 0; }
               PropertyChanges { target: rect2; scale: 0.95; opacity: 1}
               PropertyChanges { target: rect3; scale: 0.95; opacity: 0}
           },

            State {
               name: "mouse-down"; when: mouseArea.pressedButtons
               PropertyChanges { target: rect; scale: 0.95; opacity: 0; }
               PropertyChanges { target: rect2; scale: 0.95; opacity: 0}
               PropertyChanges { target: rect3; scale: 0.95; opacity: 1}
           }
       ]

       transitions: Transition {
           NumberAnimation { properties: "scale, opacity"; easing.type: Easing.InOutQuad; duration: 500  }
       }
   }

   Image {
      id: rect2
      source:  "buttons/GO/GO!-over.png"
      smooth: true
      opacity: 0
      anchors.fill: rect

     }

   Image {
      id: rect3
      source:  "buttons/GO/GO!-down.png"
      smooth: true
      opacity: 0
      anchors.fill: rect

     }
   }

但它只适用于 over\out 状态...如何让我的按钮有 3 个状态？

Answer 1

我不完全确定是否会发生这种情况，但这是可能的:当您将鼠标悬停在图像上时，它的不透明度会设置为 0。 documentation说:

1. 更改不透明度也会影响该项目的子项目。
2. 如果项目的不透明度设置为 0，则该项目将不再接收鼠标事件。

因此，当您鼠标悬停时，rect.opacity 设置为 0，mouseArea 停止接收鼠标事件和 mouseArea.pressedButtons 条件永远不会实现。您可以通过使 mouseArea 成为 Image 的同级而不是其子项来避免这种情况。使用 Item 或 Rectangle 作为父项。