QT QPushButton with an icon and overlaid centered text

buttoncenteringimageqt

I recently took to Qt Programming and want to port my app to Qt.

I'm fiddling with QPushButtons and I've managed to display an image into the button and to set some text to the button but, whatever I do, with or without the designer,
I have the same problem, the text is aligned right to the icon instead of being overlaid over the icon.

addButton = new QPushButton();
addButton->setIcon(QIcon(":/AddButton.png"));
addButton->setText(tr("+"));
addButton->setFlat(true);
addButton->setIconSize(QSize(100,90));

What am I missing ?

I know there is the toolButton but it doesn't seem to have the "flat" property.

Any idea please ?

Thanks a lot,

Mike

Best Answer

If you are trying to use your image as a background image, you can use a style sheet:

addButton->setStyleSheet("background-image: url(:/AddButton.png);"
                         "background-repeat: no-repeat;"
                         "background-position: center center");

You'll just have to make sure the size of your button is at least as big as the image.

Related Solutions

Qt QPushbutton Icon above Text

If you're able to, the easiest thing to do is use a QToolButton instead:

QToolButton* button = new QToolButton(this);
button->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
button->setIcon(myIcon);
button->setText("Sample text");

If that's not an option you could consider creating your own button widget, possibly derived from QPushButton or QAbstractButton. In this case you'll probably (I haven't tried it myself) want to focus most of your efforts on reimplementing paintEvent().

[Edit: read the comments for alternatives which are probably way simpler than this]

C++ – Qt – QPushButton text formatting

You really don't need to subclass to change the formatting of your button, rather use stylesheets e.g.

QPushButton {
    font-size: 18pt;
    font-weight: bold;
    color: #ff0000;
}

Applying this to the button that you want to change will make the buttons text 18pt, bold and red. You can apply via widget->setStyleSheet()

Applying this to a widget in the hierarchy above will style all the buttons underneath, the QT stylesheet mechanism is very flexible and fairly well documented.

You can set stylesheets in the designer too, this will style the widget that you are editing immediately

Best Answer

Related Solutions

Qt QPushbutton Icon above Text

C++ – Qt – QPushButton text formatting

Related Topic