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

}
@