Qt Quick Controls change background



  • 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?



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

    }
    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.