Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to do a color animation of a QLineEdit background



  • Hi, I want to change the background of a QLineEdit in order to provide feedback to the user so, I change it to green if the text introduced is correct and red if it's incorrect but, I don't want the color to persist all the time. I just want to change the color 1 second and then come back to the default color background.

    How can I do it?. I was thinking about using QPropertyAnimation but I read It doesn't accept QString as property for animation.

    Thanks.


  • Qt Champions 2019

    @JesusM said in How to do a color animation of a QLineEdit background:

    but I read It doesn't accept QString as property for animation

    You want to animate color not string, so no problem. You need to anymate background color.


  • Moderators

    QPropertyAnimation is based on QVariantAnimation, which does support QColor: https://doc.qt.io/qt-5/qvariantanimation.html. You can add custom types there as well (including QString), if you want to - check the example in class description.



  • @jsulm oh, I thought what I had to animate was the stylesheet so I needed to introduce a QString. I will try that.

    Thanks



  • @sierdzio ok, the answer I found it's a bit old so now It seems I can use also QString. I will try.
    Thanks!


  • Moderators

    You can set QLineEdit background using setPalette():

    const QColor(Qt::Red);
    QPalette palette(widget->palette());
    palette.setBrush(QPalette::Button, QBrush(color));
    palette.setBrush(QPalette::Base, QBrush(color));
    widget->setPalette(palette);
    

    Stylesheet is an option, too, but in this case seems like an overkill (and will likely be slower).



  • @sierdzio but I need to do it with the QPropertyAnimation so I cant use QPalette as QVariant as it is not supported. I tried this:

    checkIaAnimation = new QPropertyAnimation(ui->IaValue,"palette",this);
        checkIaAnimation->setDuration(1000);
        checkIaAnimation->setStartValue(QColor(Qt::white));
        checkIaAnimation->setEndValue(QColor(Qt::green));
        checkIaAnimation->setDirection(QPropertyAnimation::Forward);
        checkIaAnimation->start();
    

    It doesn't crash but It does nothing, as is logical, because I am not specifying which color of the palette I want to change (background) but I don't know how to specify it.


  • Moderators

    Ah, right, makes sense. QPalette is not even a QObject so it does not have properties.

    So I think that leaves 2 options:

    • write custom interpolator for QPaletter and register it with qRegisterAnimationInterpolator and your current code should start working
    • subclass QLineEdit and add a QColor property that will update the background palette when modified, then animate that property


  • @JesusM

    In that case, QTimer is appropriate, but if you need animation, you can use QTimeLine as well. like this:

        auto    timeLine = new QTimeLine(1000, this);
        timeLine->setFrameRange(0, 255);
        connect(timeLine, &QTimeLine::frameChanged, [=](int frame){
            auto    p = ui->IaValue->palette();
            p.setBrush(QPalette::Base, QBrush(QColor(frame, frame, frame)));
           ui->IaValue->setPalette(p);
        });
        connect(timeLine, &QTimeLine::finished, timeLine, &QTimeLine::deleteLater);
        timeLine->start();
    

  • Moderators

    Yep, that's also a neat idea.

    @Devopia53 said in How to do a color animation of a QLineEdit background:

    connect(timeLine, &QTimeLine::frameChanged, [=](int frame){

    There should be a control object for this labda, so:

     connect(timeLine, &QTimeLine::frameChanged, this, [=](int frame){
    


  • @JesusM May be like that type result ::

    connect(ui->lineEdit,SIGNAL(textChanged(QString)),this,SLOT(ChangeColor(QString)));

    ChangeColor(QString text)
    {
    if(text.size()==0)
    ui->lineEdit->setStyleSheet("background-color:none; color:none;");
    else if(text.size()>10)
    ui->lineEdit->setStyleSheet("background-color:rgb(255,0,0); color:rgb(255,255,255);");
    else
    ui->lineEdit->setStyleSheet("background-color:rgb(0,170,0); color:rgb(255,255,0);");

    }



  • Thanks all of you. Your answers gave me the solution! Now It works fine!


Log in to reply