Problems with Open-Source Downloads read https://www.qt.io/blog/problem-with-open-source-downloads and https://forum.qt.io/post/638946

Change button color



  • How to change a button's color when a certain condition is met?

    Like initially the button is it's default color then when the condition is met, the button will turn to color red.


  • Lifetime Qt Champion

    Hi,

    What are you using ? QtWidgets ? QtQuick ?
    What kind of conditions do you have in mind ?


  • Moderators

    @neko-lie
    I would suggest doing this via StyleSheets QWidgets have a varity of substates you can filter for and define a new style for. For Example QPushButtons have (among other things) the checked pressed and disabled state.

    If you want to expand that do other states that you define yourself, you can do that via sublcassing.
    Here is an example of a custom QFrame, that changes a state depending on the user pressing with the mouse on it or not.

    #include <QFrame>
    #include <QStyle>
    #include <QMouseEvent>
    
    class JhFrame : public QFrame
    {
        Q_OBJECT
        Q_PROPERTY(bool state READ isState WRITE changeState)
    
    public:
        explicit JhFrame(QWidget *parent = nullptr) : QFrame(parent){  }
        inline bool isState(){return state;}
    
    public slots:
        void changeState(const bool b){
            if(b != state){
                state = b;
                style()->unpolish(this);
                style()->polish(this);
                repaint();
            }
        }
    
    signals:
        void pressed();
        void clicked();
        void released();
    
    protected:
        void mousePressEvent(QMouseEvent *event)override{
            if(isEnabled()){
                changeState(true);
    
                emit pressed();
            }
            QFrame::mousePressEvent(event);
        }
    
        void mouseReleaseEvent(QMouseEvent *e)override {
            emit released();
            QFrame::mouseReleaseEvent(e);
    
            if(state && isEnabled()) {
                changeState(false);
                emit clicked();
            }
        }
    
        void mouseMoveEvent(QMouseEvent *e)override{
            if(state){
                if(!rect().contains(e->pos())) {
                    changeState(false);
                }
            }
        }
    
        void leaveEvent(QEvent *event) override{
            QFrame::leaveEvent(event);
            changeState(false);
        }
    
        bool state = false;
    };
    

    here a modified stylesheet to filter for state

    QFrame{background-color:white;}
    QFrame[state=true]{background-color:red;}
    


  • If the question is "How to change a button's color?" the answer is probably something like

     myButton->setStyleSheet("background-color: red;");
    

    If the question is how to "How to change the button's color WHEN some conditions" the answer could be

    [Somewhere inside a method]
      if (conditionsMet) {
        Q_EMIT(ChangeButtonColor());
      }
    
    [somewhere in constructor, most likely]
      connect(this, &MyClass::ChangeButtonColor, this, [m_button](){ m_button->setStyleSheet("background-color: red;"); });
    

    This is one way to connect signal/slot to actually change the button's color when some conditions are met. But the condition can be in another class than the one owning the button, the signal can be emitted by another component and not inside a method, and the code that changes the color can be in a method instead of a lambda.

    What might be useful would to copy/paste some code to help you more specifically.

    EDIT:
    @J.Hilk 's solution, tho a bit complicated for a beginner, is much more robust and pro. It depends on how serious your project is and if you have sufficient knowledge in Qt.


Log in to reply