Visual feedback (color transition) on TextField? - qml

Question

I have an app with numerous numbers in text fields (in a GridLayout) and would like to visually highlight fields which get changed (something like color changing from the original to red and then back, so something similar).
I am new to animations/transitions and so on, so I would like to ask about what is the correct approach to this.
I was looking at tutorials in Qt Creator but they attach transitions to elements in the QML code already, whereas I would like to get the element by its id and say, now run the highlight transition, without adding something to its code. Is that possible?

Answer 1

You have to implement your own control, derived from Text and add inside all the animation logic you want.
For example:
MyItem.qml
import QtQuick 2.12
Text {
id: txt
property bool hightlight: false
property color textColor: color
property color hightlightColor: "red"
onHightlightChanged: {
if(hightlight)
anim.running = true;
}
SequentialAnimation
{
id: anim
running: false
PropertyAnimation {
target: txt
property: "color"
to: hightlightColor
duration: 500
}
PropertyAnimation {
target: txt
property: "color"
to: textColor
duration: 500
}
ScriptAction {
script: txt.hightlight = false;
}
}
}
Usage:
import QtQuick 2.12
import QtQuick.Controls 2.3
ApplicationWindow {
id: window
title: "Test"
visible: true
height: 250
width: 200
MyItem {
id: item
text: "Hello"
anchors.centerIn: parent
hightlightColor: "red"
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: {
item.hightlight = true;
}
}
}
}