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

Clickable QLabel in a QGridLayout



  • Hello ! I'm working on a project named 4 pictures 1 word. It's a game in which appear 4 images that inspire a unique word the player shoud guess.
    I'd like to know how I should create a clickable QLabel since the SIGNAL clicked() doesn't exist for this class.
    I want my QLabel to change its size on click.

    Here is what I've already done:
    Fenetre.h

    #ifndef FENETRE_H
    #define FENETRE_H
    
    #include <QObject>
    #include <QWidget>
    #include <QLabel>
    #include <QMouseEvent>
    #include <QString>
    #include <QGridLayout>
    
    class Fenetre : public QWidget
    {
        Q_OBJECT
    
    public:
        Fenetre();
        Fenetre(QString, QString, QString, QString);
    
    /*public slots:
        void zoomer(QWidget *w);
    */
    private:
        QLabel *img1, *img2, *img3, *img4;
        QGridLayout *layout;
    /*
    protected:
        void mousePressEvent(QMouseEvent *mouse_event);
    
    signals:
        clicked();
    */
    };
    
    #endif // FENETRE_H
    

    Fenetre.cpp

    #include "Fenetre.h"
    
    /*
    void Fenetre::mousePressEvent (QMouseEvent *mouse_event)
    {
        if(mouse_event->button() == Qt::LeftButton)
            emit clicked();
    }
    
    void Fenetre::zoomer(QWidget *w)
    {
        w->setFixedSize(300, 300);
    }
    */
    Fenetre::Fenetre() : QWidget()
    {
        setFixedSize(400, 435);
        img1 = img2 = img3 = img4 = new QLabel();
        layout = new QGridLayout;
        layout->addWidget(img1, 0, 0);
        layout->addWidget(img2, 0, 1);
        layout->addWidget(img3, 1, 0);
        layout->addWidget(img4, 1, 1);
        this->setLayout(layout);
    
        /*
        QObject::connect(img1, SIGNAL(clicked()), img1, SLOT(zoomer(img1)));
        QObject::connect(img2, SIGNAL(clicked()), img2, SLOT(zoomer(img2)));
        QObject::connect(img3, SIGNAL(clicked()), img3, SLOT(zoomer(img3)));
        QObject::connect(img4, SIGNAL(clicked()), img4, SLOT(zoomer(img4)));
        */
    }
    
    Fenetre::Fenetre(QString lk1, QString lk2, QString lk3, QString lk4) : QWidget()
    {
        img1 = img2 = img3 = img4 = new QLabel();
    
        layout = new QGridLayout;
        img1->setPixmap(QPixmap(lk1));
        img2->setPixmap(QPixmap(lk2));
        img3->setPixmap(QPixmap(lk3));
        /*img4->setPixmap(QPixmap(lk4));*/
    
        layout->addWidget(img1, 0, 0);
        layout->addWidget(img2, 0, 1);
        layout->addWidget(img3, 1, 0);
        layout->addWidget(img4, 1, 1);
        this->setLayout(layout);
    
        /*
        QObject::connect(img1, SIGNAL(clicked()), img1, SLOT(zoomer()));
        QObject::connect(img2, SIGNAL(clicked()), img2, SLOT(zoomer()));
        QObject::connect(img3, SIGNAL(clicked()), img3, SLOT(zoomer()));
        QObject::connect(img4, SIGNAL(clicked()), img4, SLOT(zoomer()));
        */
    }
    

    Main.cpp

    #include "mainwindow.h"
    #include <QApplication>
    #include <QString>
    
    #include "fenetre.h"
    
    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);
    
        QString s1("C:\\Users\\Arsene Awounou\\Documents\\img\\small.jpg");
        QString s2("C:\\Users\\Arsene Awounou\\Documents\\img\\tm-img-02.jpg");
        QString s3("C:\\Users\\Arsene Awounou\\Documents\\img\\psycho.jpg");
        QString s4("C:\\Users\\Arsene Awounou\\Documents\\img\\wireless.JPG");
    
        Fenetre f(s1, s2, s3, s4);
        f.show();
    
        return a.exec();
    }
    

    Help please !



  • @justCode7
    Why have you commented out the mousePressEvent event code you had? You should be applying that to your QLabels (not just to your Fenetre(QWidget), as that is how to do clicks on a QLabel. See e.g. https://wiki.qt.io/Clickable_QLabel, or https://forum.qt.io/topic/32685/qlabel-clicked-event, https://stackoverflow.com/questions/32018941/qt-qlabel-click-event.



  • @JonB thanks for reply ! I've done so bacause it's not working ! And I've already seen this : https://wiki.qt.io/Clickable_QLabel. That wasn't helpful !



  • @justCode7
    Umm, given that others use it it does "work", so try again on a minimal example!

    I don't see why it should not work just because the QLabel is on a QGridLayout, but just in case if you claim it's not working there try the same code on a QLabel outside of a QGridLayout and report back if you claim there is any difference in behaviour?



  • @JonB Let me try it. I'll be back soon ! thanks !



  • I created a new class that inherits QLabel and it works and I used MousePressEvent!

    Then, instead of using QLabel, I just have to use MyQLabel.

    myqlabel.h

    #ifndef MYQLABEL_H
    #define MYQLABEL_H
    
    #include <QObject>
    #include <QWidget>
    #include <QLabel>
    #include <QMouseEvent>
    #include <QString>
    
    class MyQLabel : public QLabel
    {
        Q_OBJECT
    
    private:
        bool click;
    public:
        MyQLabel();
    public slots:
        void cacher();
        /*void afficher();*/
    protected:
      void mousePressEvent(QMouseEvent *mouse_event);
    
    signals:
        clicked_left();
        /*clicked_right();*/
    };
    
    #endif // MYQLABEL_H
    
    

    muqlabel.cpp

    #include "myqlabel.h"
    
    #include <QPushButton>
    #include <QObject>
    
    MyQLabel::MyQLabel()
    {
        QObject::connect(this, SIGNAL(clicked_left()), this, SLOT(cacher()));
        //QObject::connect(this, SIGNAL(clicked_right()), this, SLOT(afficher()));
    }
    
    void MyQLabel::mousePressEvent (QMouseEvent *mouse_event)
    {
        if(mouse_event->button() == Qt::LeftButton)
        {
            emit clicked_left();
        }
        /*else if(mouse_event->button() == Qt::RightButton)
        {
            emit clicked_right();
        }*/
    }
    
    void MyQLabel::cacher()
    {
        this->setHidden(true);
    }
    
    /*void MyQLabel::afficher()
    {
        this->show();
    }*/
    

    main.cpp

    #include "mainwindow.h"
    
    #include <QApplication>
    #include <QGridLayout>
    #include <QWidget>
    #include <QPushButton>
    #include <QMouseEvent>
    #include <QObject>
    
    #include "myqlabel.h"
    
    int main(int argc, char *argv[])
    {
        QApplication app(argc, argv);
    
        QWidget widg;
        widg.setMaximumSize(400, 435);
        //widg.setMinimumSize(400, 435);
    
        MyQLabel *m_image1 = new MyQLabel();
        MyQLabel *m_image2 = new MyQLabel();
        MyQLabel *m_image3 = new MyQLabel();
        MyQLabel *m_image4 = new MyQLabel();
    
        m_image1->setStyleSheet("border-style:outset; border-width:2px; border-radius:10px; border-color:black");
        m_image2->setStyleSheet("border-style:outset; border-width:2px; border-radius:10px; border-color:black");
        m_image3->setStyleSheet("border-style:outset; border-width:2px; border-radius:10px; border-color:black");
        m_image4->setStyleSheet("border-style:outset; border-width:2px; border-radius:10px; border-color:black");
    
        m_image1->setPixmap(QPixmap("C:\\Users\\Arsene Awounou\\Documents\\img\\small.jpg"));
        m_image2->setPixmap(QPixmap("C:\\Users\\Arsene Awounou\\Documents\\img\\tm-img-02.jpg"));
        m_image3->setPixmap(QPixmap("C:\\Users\\Arsene Awounou\\Documents\\img\\wireless.JPG"));
        m_image4->setPixmap(QPixmap("C:\\Users\\Arsene Awounou\\Documents\\img\\psycho.jpg"));
    
        QGridLayout *layout = new QGridLayout;
    
        layout->addWidget(m_image1, 0, 0);
        layout->addWidget(m_image2, 0, 1);
        layout->addWidget(m_image3, 1, 0);
        layout->addWidget(m_image4, 1, 1);
    
        widg.setLayout(layout);
        widg.setStyleSheet("QWidget { background-color: #b7927c}");
    
        widg.show();
    
    
        return app.exec();
    }
    

Log in to reply