Create Custom Button

Question

I want to create a custom pushButton without any styling which just displays a .png image.

I have tried creating a pushButton with the setIcon method but this uses the pushButton silver styling I just want to display the image and have it be a button.

Also, I tried using QAction

newAct = new QAction(QIcon(":/new/prefix1/images/appbar.close.png"),

But this does not display anything without a toolbar.

Any ideas how I can get this to work?

Answer 1

maybe this code helps you. Create a QPushButton, Set an icon for it and use this code :

YourQPushButton->setFlat(true);

Update :

MyPushButton.h:

#ifndef MYPUSHBUTTON_H
#define MYPUSHBUTTON_H

#include <QLabel>

class MyPushButton : public QLabel
{
    Q_OBJECT
public:
    explicit MyPushButton(QWidget *parent = 0);

signals:
    void clicked();

protected:
    void mouseReleaseEvent(QMouseEvent *ev);

};

#endif // MYPUSHBUTTON_H

MyPushButton.cpp

void MyPushButton::mouseReleaseEvent(QMouseEvent *ev)
{
    emit clicked();
}

How to use :

MyPushButton btn;
btn.setPixmap(QPixmap(":/rm.png"));
QObject::connect(&btn, SIGNAL(clicked()), qApp, SLOT(quit()));
btn.show();

You can even add this function to MyPushButton class to be more productive :)

void MyPushButton::setIcon(QPixmap px, int w, int h)
{
    setPixmap(px.scaled(w, h));
}

Answer 2

There is 2 solutions:

1. Sub class QLabel to emit clicked() signal and load your image to that subclass
2. You can set your stylesheet to QPushButton something like this How to change QPushButton icon using stylesheets in Qt app

If you are willing to subclass QLabel though - here is a class for that:

Header qspoilerlabel.h:

#ifndef QSPOILERLABEL_H
#define QSPOILERLABEL_H

#include <QLabel>
#include <QEvent>

class QSpoilerLabel : public QLabel
{
    Q_OBJECT
public:
QSpoilerLabel( const QString & text, QWidget * parent = 0 );
QSpoilerLabel(){}

signals:
    void clicked();

public slots:
    void slotClicked();

protected:
    void mouseReleaseEvent ( QMouseEvent * event );
};

#endif // QSPOILERLABEL_H

Source qspoilerlabel.cpp:

#include "qspoilerlabel.h"
QSpoilerLabel::QSpoilerLabel( const QString & text, QWidget * parent )
:QLabel(parent)
{
    connect( this, SIGNAL( clicked() ), this, SLOT( slotClicked() ) );    
}

void QSpoilerLabel::slotClicked()
{
//qDebug()<<"Clicked";
}

void QSpoilerLabel::mouseReleaseEvent ( QMouseEvent * event )
{
    emit clicked();
}

You can load image to label with setPixmap method. It can look something like this:

label->setPixmap((QPixmap::fromImage(QImage(":/new/prefix1/images/appbar.close.png"));

Answer 3

In QtCreator you can try this:

1. You make a label with your png image.
2. On top of the label you put a QPushButton with stylesheet "background:transparent; border: none;"

Works like a button, looks like an image ;)

Answer 4

First of all , add a resource file, create a prefix and add files that you need. In the designer, right click the button and change style sheet.

    background: url(":\filePath");

alternatively, you can do this, add resource (yes it will show that it is an invalid stylesheet, but fear not) : then edit the code by adding the keyword background before the url to make it look like this

    background: url(":\filePath");

where file path is the path to your resource file which is automatically detected when you decide to use the add resource option.