3

所以我尝试：

   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

     }
   }

但它只适用于过度\输出状态...如何让我的按钮有 3 个状态？

4

1 回答 1

2

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

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

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

于 2012-04-19T13:23:39.467 回答