Hello! 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 do not 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 to forward MouseArea , but then I can't use styles to replace the image. All day long dig through with it, and now I ask for your help.

This is the standard button (btn_state) This standard button

This is the pushed button (btn_pressed) enter image description here

    1 answer 1

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

     style: ButtonStyle { background: Image { fillMode: Image.PreserveAspectFit source: control.pressed ? "btn_pressed.png" : (control.hovered ? "btn_hovered.png" : "btn_state.png") } }
    • Fine! Works. Thank you very much. I understand that the animation here is not screwed? Just the essence of this button is this: there is a standard button: btn_state, when you hover the button (btn_hovered) smoothly redraws into another image, when pressed changes, also smoothly, to a completely different (btn_pressed) - razorqhex
    • Yes, anything can be screwed, there would be a desire. True, I do not really understand how you are going to animate images smoothly - just changing them is enough to imitate a button. If the answer suits you, then please tick it (next to the answer) - ixSci
    • Animation - the usual redrawing. Is it not? - razorqhex
    • @razorqhex, and what are you going to animate? For example, when animating width we smoothly change values, say, from 0 to 100, what will change here? You have 3 images, between which there is a change - just change them and that's it. - ixSci
    • Well, look: there is a button. On hover drawn new image. When the mouse is behind the button zone, the induced button disappears, and in its place is the same steel button. Is it so impossible? - razorqhex