Визуальная обратная связь (цветовой переход) на TextField?

Question

У меня есть приложение с многочисленными номерами в текстовых полях (в GridLayout), и я хотел бы визуально выделить поля, которые меняются (что-то вроде изменения цвета с оригинала на красный и затем обратно, поэтому что-то похожее).

Я новичок в анимации / переходах и так далее, поэтому я хотел бы спросить о том, каков правильный подход к этому.

Я смотрел учебники в Qt Creator, но они прикрепляют переходы к элементам вкод QML, тогда как я хотел бы получить элемент по его идентификатору и сказать, что теперь запустите переход подсветки, не добавляя что-либо в его код.Это возможно?

Answer 1

Вы должны реализовать свой собственный элемент управления, полученный из Text, и добавить в него всю необходимую логику анимации.Например:

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

Использование:

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