QML:如何创建由图像制成的 3 状态自定义按钮

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

但它只在过度\out状态下工作...如何让我的按钮有 3 种状态？

Answer 1

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

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

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