如何在使用qml单击时将背景图像更改为按钮中的另一个背景图像

时间:2015-04-17 05:36:33

标签: qt qt5.4

我需要在使用qml点击时将按钮的背景图像从一个图像更改为其他图像。

这是我的代码:

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

以上代码仅设置背景图片,但我需要使用qml2.4更改onClicked事件或任何其他事件的背景图片。

1 个答案:

答案 0 :(得分:2)

如果您要查看Button QML类型,您会发现clicked()是您点击按钮时发出的信号。我们可以在qml内的插槽onClicked中捕获此信号,并可以更改按钮的iconSource属性

代码将是这样的:

    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"
            }

}

通过这种方式,您可以将按钮的屏幕背景图像从一个图像更改为另一个图像。

<强>更新 根据您的要求,您可以使用以下代码:

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
        }
    }
}

您可以使用用户定义的属性bImgChange,并可以使用它来检查条件。 您的情况不起作用,因为bu.iconSource将为您提供图像文件存在的完整路径。例如。 /home/user/some/path/q.png并且您将其与if条件中的字符串q.png进行比较。

我希望这会有所帮助。