make QML TextField to blinking - qt

Question

I want TextField to blink when button is clicked. It easy to do with QTimer:
void MyLineEdit::buttonClickedSlot{
for(int i=1;i<15;i+=2){
QTimer::singleShot(100*i, this, SLOT(changeBackgroundColor("QLineEdit{background: red;}")));
QTimer::singleShot(100*(i+1), this, SLOT((changeBackgroundColor("QLineEdit{background: white;}")));
}
}
void MyLineEdit::changeBackgroundColor(QString str){
this->setStyleSheet(str)
}
However, I did not find anything like QTimer in QML so I decided to do it via animation. Here QML is code:
Rectangle{
ColumnLayout{
anchors.fill: parent
TextField{
id: txt
text: "hello"
style: TextFieldStyle{
background:Rectangle {
id: rect
radius: 2
implicitWidth: 100
implicitHeight: 24
border.color: "#333"
border.width: 1
color: "white"
}
}
}
ColorAnimation{
id: whiteToRed
target: rect //reference error: rect is not defined
properties: "color"
from: "white"
to: "red"
duration: 300
}
ColorAnimation{
id: redToWhite
target: rect //reference error: rect is not defined
properties: "color"
from: "red"
to: "white"
duration: 300
}
Button{
text: "blink"
onClicked: {
for(var i=0;i<3;i++){
whiteToRed.start()
redToWhite.start()
}
}
}
}
}
The problem here is that there are compile error: rect is not defined. How should I solve that problem?

Answer 1

Try this:
Column{
anchors.fill: parent
TextField{
id: txt
text: "hello"
property string color: "white"
style: TextFieldStyle{
background: Rectangle {
id: rect
radius: 2
implicitWidth: 100
implicitHeight: 24
border.color: "#333"
border.width: 1
color: txt.color
Behavior on color {
SequentialAnimation {
loops: 3
ColorAnimation { from: "white"; to: "red"; duration: 300 }
ColorAnimation { from: "red"; to: "white"; duration: 300 }
}
}
}
}
}
Button{
text: "blink"
onClicked: {
txt.color = "red";
txt.color = "white";
}
}
}