CODEWITHSUNDEEP
qtqt5.4
Bala Kumaran
Bala Kumaran

Reputation: 131

How to change a background image to another background image in button while clicking using qml

I need to change the background image of button from one image to other image while clicking using qml.

Here is my code :

Button{
    id:bu
    x: 121
    y: 40
    iconSource: "q.png"
    activeFocusOnPress: false
    opacity: 1
    checkable: true
    checked: true
    Layout.minimumWidth: 100
    Layout.minimumHeight: 100
}

The above code only sets the background image but, I need to change my background image on onClicked event or any other event using qml2.4.

Upvotes: 0

Views: 1358

Answers (1)

Ankit
Ankit

Reputation: 1418

If you will look at Button QML Type, you will find clicked() is the signal which is emitted when you will click the button. We can catch this signal in slot onClicked inside the qml and can change the iconSource property of the button

The code will be something like this:

    Button {
    id: bu
    x: 121
    y: 40
    iconSource: "q.png"
    activeFocusOnPress: false
    opacity: 1
    checkable: true
    checked: true
    Layout.minimumWidth: 100
    Layout.minimumHeight: 100

    onClicked: {
                bu.iconSource = "index.png"
            }

}

In this way you can change the screen background image of your button from one image to another.

Update: For your requirement, you can use the below code:

property bool bImgChange: true

Button {
id: bu
x: 121
y: 40
iconSource: "q.png"
activeFocusOnPress: false
opacity: 1
checkable: true
checked: true
Layout.minimumWidth: 100
Layout.minimumHeight: 100

    onClicked: {
        if ( bImgChange == true )
        {
            bu.iconSource = "index.png"
            bImgChange = false
        }
        else
        {
            bu.iconSource = "q.png"
            bImgChange = true
        }
    }
}

You can use a user defined property bImgChange and can use it for checking the condition. Your condition will not work because bu.iconSource will give you the complete path where your image file exists. eg. /home/user/some/path/q.png and you are comparing this with the string q.png in your if condition.

I hope this will help.

Upvotes: 2

Related Questions