Qt Quick Controls change background

[Lucijan]

Hello, I've been playing with Qt Quick Controls and I'm trying to make a custom style for a button but I'm having problems animating them when hovering.

Here's what I've come up with:

@import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0

Rectangle {

Button {
    id: btn1
    text: "A button"
    style: ButtonStyle {
        background: Rectangle {
            id: btnBackground
            implicitWidth: 100
            implicitHeight: 25
            border.width: control.activeFocus ? 2 : 1
            border.color: "white"
            color: "red"
            radius: 4
        }
        label: Text {
            id: btnText
            text: btn1.text
            color: "white"
            horizontalAlignment: Text.AlignHCenter

        }
    }

    states: [
        State {
            id: btnHoveredState
            name: "btnHovered"
            when: btn1.hovered == true
            PropertyChanges {
                target: btnText
                color: "red"
            }
            PropertyChanges {
                target: btnBackground
                color: "white"
            }
            PropertyChanges {
                target: btnBackground
                border.color: "red"
            }
        }
    ]

    transitions: [
        Transition {
            id: btnToHoverTransition
            from: ""
            to: "btnHovered"
            ColorAnimation {
                duration: 400
                easing.type: Easing.InOutQuad
            }
        }
    ]
}

}
@

Unfortunately, when I hover over the button, I get the message:

bq. ReferenceError: btnText is not defined

and the same for btnBackground. The question is simple: how do I get around this problem?

[Jens]

button and label are defined as components and not items. In practice it means that you cannot "see" them in the same scope like you are assuming here.

A simple solution is to animate this without using state:

@
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0

ApplicationWindow{
id:win

Rectangle {
    Button {
        id: btn1
        text: "A button"
        style: ButtonStyle {
            background: Rectangle {
                id: btnBackground
                implicitWidth: 100
                implicitHeight: 25
                border.width: control.activeFocus ? 2 : 1
                border.color: control.hovered? "red" : "white"
                color: control.hovered? "white" : "red"
                Behavior on border.color {
                    ColorAnimation{ 
                        duration: 400
                        easing.type: Easing.InOutQuad
                    }
                }
                Behavior on color {
                    ColorAnimation {
                        duration: 400
                        easing.type:Easing.InOutQuad
                    }
                }
                radius: 4
            }
            label: Text {
                id: btnText
                text: btn1.text
                color: control.hovered? "red" : "white"
                Behavior on color {
                    ColorAnimation{ 
                        duration: 400
                        easing.type: Easing.InOutQuad
                    }
                }
                horizontalAlignment: Text.AlignHCenter
            }
        }
    }
}

}
@