How can I substitute an image depending on the state of the button?

Question

How can I substitute an image depending on the state of the button?

Hello everyone How to put an image on a button - I did this:

Button {
    id: btn
    width: 250
    height: 100
    anchors.centerIn: parent
    text: "A button"
    style: ButtonStyle {
        background: Image {
            fillMode: Image.PreserveAspectFit
            source: "btn_state.png"
        }
      }
    }

I just don't know how to make it so that when you click on the button, the image changes and is restored to the original image again. I tried throwing MouseArea, but then I can't use styles to replace the image. I've been digging around with this all day, and now I'm asking for your help.

This is a standard button (btn_state)

This is the pressed button (btn_pressed)

1

qt qt5 qml

Author: ixSci, 2016-10-25

Source

1 answers

score 1 · Accepted Answer

Everything is simple, in the style, the control is available, to which the style is applied. It remains only to use the pressed property of it:

style: ButtonStyle {
        background: Image {
            fillMode: Image.PreserveAspectFit
            source: control.pressed ? "btn_pressed.png" :
                 (control.hovered ? "btn_hovered.png" : "btn_state.png") 
        }
      }