QLabel subclass and stylesheet Qtcreator



  • in qt cr4eator I have these stylesheet:

    QLabel{color: black; border: 3px solid #5E749C;text-align: top;padding: -4px;border-radius: 7px; border-bottom-left-radius: 7px;background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );width: 15px; }
    QLabel:checked{color: black; border: 5px solid #00ff00;text-align: top;padding: -4px;border-radius: 7px; border-bottom-left-radius: 7px;background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );width: 15px; }
    

    and I have subclass QLabel in these way:

    #ifndef QTOGGLEABLEQLABEL_H
    #define QTOGGLEABLEQLABEL_H
    
    #include <QLabel>
    #include <QGraphicsScene>
    #include <QGraphicsView>
    #include <QGraphicsItem>
    #include <QGraphicsPolygonItem>
    #include <QDesktopWidget>
    #include <QDialog>
    #include <QWidget>
    #include <QWidgetAction>
    #include <QWidgetData>
    #include <QWidgetItem>
    #include <QPixmap>
    
    
    class QToggleableQLabel : public QLabel
    {
    Q_OBJECT
    public:
        explicit QToggleableQLabel(QWidget* parent=0 );
        ~QToggleableQLabel();
    
    public slots:
        void checked(bool checked);
    
    signals:
        void clicked(bool);
    protected slots:
    
        virtual void enterEvent ( QEvent * event );
        virtual void leaveEvent ( QEvent * event );
        virtual void mouseMoveEvent ( QMouseEvent * event );
        virtual void mousePressEvent ( QMouseEvent * event );
        virtual void mouseReleaseEvent ( QMouseEvent * event );
    };
    
    #endif // QTOGGLEABLEQLABEL_H
    
    

    cpp

    #include "qtoggleableqlabel.h"
    #include <QDebug>
    
    bool ToggledQLabel = false;
    
    QToggleableQLabel::QToggleableQLabel(QWidget* parent)
        : QLabel(parent)
    {
        connect(this, SIGNAL(clicked(bool)), this, SLOT(checked(bool)));
    
    }
    
    QToggleableQLabel::~QToggleableQLabel()
    {
    }
    
    void QToggleableQLabel::checked(bool checked)
    {
       qDebug() << "result:   " << checked;
    }
    
    void QToggleableQLabel::mousePressEvent(QMouseEvent * event)
    {
        if(!ToggledQLabel)
        {
            emit clicked(true);
            ToggledQLabel = true;
        }
        else
        {
            emit clicked(false);
            ToggledQLabel = false;
        }
    
    }
    
    void QToggleableQLabel::enterEvent ( QEvent * event )
    {
    }
    
    void QToggleableQLabel::leaveEvent ( QEvent * event )
    {
    }
    
    void QToggleableQLabel::mouseMoveEvent ( QMouseEvent * event )
    {
    }
    
    
    void QToggleableQLabel::mouseReleaseEvent ( QMouseEvent * event )
    {
    }
    

    Into Qt creator I have promoted to QToggleableQLabel 2 QLabel but:

    1)the label not change border color when touch it ... but qDebug show correct result

    1. promoted QToggleableQLabel1 and QToggleableQLabel2 have the same result at the same time .... if press over QToggleableQLabel1 it become true .... but if press over QToggleableQLabel2 it become false and vice-versa ... never see QToggleableQLabel1 = true and QToggleableQLabel2 = true at the same time !!!

    same result if in stylesheet changhe :

    QToggleableQLabell{color: black; border: 3px solid #5E749C;text-align: top;padding: -4px;border-radius: 7px; border-bottom-left-radius: 7px;background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );width: 15px; }
    QToggleableQLabel:checked{color: black; border: 5px solid #00ff00;text-align: top;padding: -4px;border-radius: 7px; border-bottom-left-radius: 7px;background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );width: 15px; }
    
    

    Where is the error??

    regards
    Giorgio


  • Lifetime Qt Champion

    Hi,

    The error is that you're using a static variable for a class internal state. Make ToggledQLabel a class member.



  • @SGaist Re:

    #ifndef QTOGGLEABLEQLABEL_H
    #define QTOGGLEABLEQLABEL_H
    
    #include <QLabel>
    #include <QGraphicsScene>
    #include <QGraphicsView>
    #include <QGraphicsItem>
    #include <QGraphicsPolygonItem>
    #include <QDesktopWidget>
    #include <QDialog>
    #include <QWidget>
    #include <QWidgetAction>
    #include <QWidgetData>
    #include <QWidgetItem>
    #include <QPixmap>
    
    
    class QToggleableQLabel : public QLabel
    {
    Q_OBJECT
    public:
        explicit QToggleableQLabel(QWidget* parent=0);
        ~QToggleableQLabel();
    
    
    public slots:
        void setchecked(bool checked);
    
    signals:
        void clicked(bool);
    protected slots:
        virtual void enterEvent ( QEvent * event );
        virtual void leaveEvent ( QEvent * event );
        virtual void mouseMoveEvent ( QMouseEvent * event );
        virtual void mousePressEvent ( QMouseEvent * event );
        virtual void mouseReleaseEvent ( QMouseEvent * event );
    private:
        bool ToggledQLabel;
    
    };
    
    #endif // QTOGGLEABLEQLABEL_H
    

    The right code .... but Qt Designer stylesheed not change style at QToggleableQLabel:checked !!! why?

    Regards
    Giorgio



  • Hi @gfxx

    There is something that intrigues me in your code qt stylesheet,

    QLabel:checked{color: black; border: 5px solid #00ff00;text-align: top;padding: -4px;border-radius: 7px; border-bottom-left-radius: 7px;background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );width: 15px; }
    

    you have QLabel:checked

    are you sure that checked property are available with QLabel?? I do not think so.

    on Qt stylesheet list of properties

    http://doc.qt.io/qt-4.8/stylesheet-reference.html#list-of-properties

    it is marked that checked property is for QAbstractButton (and then child)

    and in QLabel doc ,i do not find any checked , member

    http://doc.qt.io/qt-4.8/qlabel-members.html

    Maybe i am wrong , but for me this the problem , this line is not ok :

    QLabel:checked{color: black; border: 5px solid #00ff00;text-align: top;padding: -4px;border-radius: 7px; border-bottom-left-radius: 7px;background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #fff, stop: 1 #eee,stop: 0.5 #ddd,stop: 1 #eee );width: 15px; }
    


  • @mostefa Thank for your answer .... but I subclass the Qlabel for obtain cheched state or isOn state for use it on stylesheet .... for sure something of wrong there is ... for you is because there are not these property support for QLabel? SO I can subclass for obtain custom slot/signal but not for change stylesheet??

    #ifndef QTOGGLEABLEQLABEL_H
    #define QTOGGLEABLEQLABEL_H
    
    #include <QLabel>
    #include <QGraphicsScene>
    #include <QGraphicsView>
    #include <QGraphicsItem>
    #include <QGraphicsPolygonItem>
    #include <QDesktopWidget>
    #include <QDialog>
    #include <QWidget>
    #include <QWidgetAction>
    #include <QWidgetData>
    #include <QWidgetItem>
    #include <QPixmap>
    
    
    class QToggleableQLabel : public QLabel
    {
    Q_OBJECT
    public:
        explicit QToggleableQLabel(QWidget* parent=0);
        ~QToggleableQLabel();
    
    
    public slots:
        void setchecked(bool checked);
    
    signals:
        void clicked(bool);
    protected slots:
        virtual void enterEvent ( QEvent * event );
        virtual void leaveEvent ( QEvent * event );
        virtual void mouseMoveEvent ( QMouseEvent * event );
        virtual void mousePressEvent ( QMouseEvent * event );
        virtual void mouseReleaseEvent ( QMouseEvent * event );
    private:
        bool ToggledQLabel;
    
    };
    
    #endif // QTOGGLEABLEQLABEL_H
    

    Regards
    giorgio



  • @gfxx

    I'm not sure, if you can create your own subclass for QSytlesheet, at least I haven't done that jet.

    But you can work around that problem, for example:
    In class QToggleableQLabel add

    public:
    void setStyleToggeled(QString s1){ sStyle1 = s1;}
    void setStyleUnToggeled(QString s2){ sStyle2 = s2;}
    
    private:
    QString sStyle1, sStyle2;
    
    void QToggleableQLabel::mousePressEvent(QMouseEvent * event)
    {
        if(!ToggledQLabel)
        {
            emit clicked(true);
            ToggledQLabel = true;
            this->setStyleSheet(sStyle1);
        }
        else
        {
            emit clicked(false);
            ToggledQLabel = false;
            this->setStyleSheet(sStyle2);
        }
    }
    

    it now changes on clicking the style between sSytle1 and sStyle2



  • @J.Hilk said in QLabel subclass and stylesheet Qtcreator:

    @gfxx

    I'm not sure, if you can create your own subclass for QSytlesheet, at least I haven't done that jet.

    But you can work around that problem, for example:
    In class QToggleableQLabel add

    public:
    void setStyleToggeled(QString s1){ sStyle1 = s1;}
    void setStyleUnToggeled(QString s2){ sStyle2 = s2;}
    
    private:
    QString sStyle1, sStyle2;
    
    void QToggleableQLabel::mousePressEvent(QMouseEvent * event)
    {
        if(!ToggledQLabel)
        {
            emit clicked(true);
            ToggledQLabel = true;
            this->setStyleSheet(sStyle1);
        }
        else
        {
            emit clicked(false);
            ToggledQLabel = false;
            this->setStyleSheet(sStyle2);
        }
    }
    

    it now changes on clicking the style between sSytle1 and sStyle2

    I do not think that you are using a good approach, you have to use dynamic stylesheet properties,

    Using Dynamic properties with stylesheet

    You can add custom properties : you have to do things like that :

    void QToggleableQLabel::mousePressEvent(QMouseEvent * event)
    {
    if(!ToggledQLabel)
    {
    emit clicked(true);
    ToggledQLabel = true;
    /*** here you tell to your stylesheet that you have dynamic properties called checked, and it's enabled (=true)/
    this->setProperty("checked", true);
    this->style()->unpolish(this);
    this->style()->polish(this);
    /
    **********************************************************************************************************************/

    }
    else
    {
        emit clicked(false);
        /*** here you tell to your stylesheet that you have dynamic properties called checked, and it's enabled (=true)***/
        ToggledQLabel = false;
         this->setProperty("checked", false);
        this->style()->unpolish(this);
        this->style()->polish(this);
        /*************************************************************************************************************************/
    
    }
    

    }

    And you have to change your stylesheet as follows :

    QToggleableQLabel[checked=false]
    {
    	color: red;// you can add custom stylesheet as you want
    }
    
    QToggleableQLabel[checked=true] {
      color: blue;//you can add custom stylesheet as you want
    }
    

    With this example , everything should be ok.

    Reading the doc is very important , i advise you to read to following links:

    Qt stylesheet syntax

    Qt Stylesheet-Reference

    Hope this can help ,

    Best regards !



  • @mostefa

    a much better approach! Thanks for sharing.
    I'll most defenitly will look into it myself more.



  • @mostefa Very Thanks ... I was just studying precisely these things right now ... so has simplified my life.

    Thank you owe two beers ... (assuming they are your favorite beverage .... otherwise one).



  • @gfxx

    Haha =) , you are welcome !



  • @J.Hilk Your method is fine if you do not use QT Creator for style ... the best thing is to use it in GuiThread ... with these subclass I have a ToggledQLabel var ... so in mainwindow:

    if(ToggledQLabel){
    ui->myToggledQLabel1->setstylesheet("ToggledQLabel{..............};");}
    else{
    ui->myToggledQLabel1->setstylesheet("ToggledQLabel{......other style........};");}
    

    but I try to have

    I do not think that you are using a good approach, you have to use dynamic stylesheet properties,
    Using Dynamic properties with stylesheet
    You can add custom properties : you have to do things like that :

    simply I did not know it existed or their name .... the link on my abstracbutton addressed.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.