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:
ReferenceError: btnText is not defined
and the same for btnBackground. The question is simple: how do I get around this problem?
↧