CODEWITHSUNDEEP
qtqml
myWallJSON
myWallJSON

Reputation: 9512

QML: How to create a 3 state custom button made from images?

So I try:

   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

     }
   }

but it works only in over\out states... How to make my button have 3 states?

Upvotes: 3

Views: 4715

Answers (1)

teukkam
teukkam

Reputation: 4317

I'm not entirely sure if this is what happens but it's possible: When you mouseover the image, its opacity gets set to 0. The documentation says that:

  1. Changing opacity affects also the child items of the Item.
  2. If an item's opacity is set to 0, the item will no longer receive mouse events.

Thus, when you mouseover, the rect.opacity is set to 0, mouseArea stops receiving mouse events and the mouseArea.pressedButtons condition is never fulfilled. You can probably avoid this by making mouseArea a sibling of the Image and not its child item. Use an Item or Rectangle as the parent item.

Upvotes: 2

Related Questions