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表示：

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

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

QML：如何创建由图像制作的3状态自定义按钮？

1 个答案: