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.0Rectangle {
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.0ApplicationWindow{
id:winRectangle { 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 } } } }
}
@