Two colours text in QPushButton

Question

I need a QPushButton with two colors in the text. I found a solution with a html code in QTextDocument and it's working. But I need center align and the html code isn't working.

 QTextDocument Text;
  Text.setHtml("<p align=center><font>Button</font><br/><font color=yellow>1</font></p>");

   QPixmap pixmap(Text.size().width(), Text.size().height());
   pixmap.fill( Qt::transparent );
   QPainter painter(&pixmap);
   Text.drawContents(&painter, pixmap.rect());

   QIcon ButtonIcon(pixmap);
   ui->toolButton->setText("");
   ui->toolButton->setIcon(ButtonIcon);
   ui->toolButton->setIconSize(pixmap.rect().size());

And I get,

The same code HTML is working in a QLabel

ui->label->setText("<p align=center><font>Label</font><br/><font color=yellow>1</font></p>");

Any solution?

Thank very much.

Almost

In QtCreator, go to design mode, go to the properties subview, and scroll down, you can change the alignment somewhere there – Photooffset

Ok, what of try: <p align="center"><font>Button</font></p><p align="center"><font color="yellow">1</font></p> Still same problem? – Gutshall

Thank, But that solution doesn't work either. The same code is working in a QLabel perfectly. :( – Almost

Answer 1

You can derive from QPushButton and draw text yourself via QPainter in paintEvent.

class Button : public QPushButton
{
Q_OBJECT

public:
Button(QWidget *parent = 0)
: QPushButton(parent)
    { }

void paintEvent(QPaintEvent *p)
    {
        QPushButton::paintEvent(p);
        QPainter paint(this);
        paint.drawText(QPoint(10,10),"Hello");
    }
};

Uppermost

Answer 2

As s workaround you can use a label or text document to print the text you want. You should paint it to a pixmap and use the pixmap on your button :

QPushButton *button = new QPushButton(this);
QTextDocument Text;
Text.setHtml("<h2><i>Hello</i> ""<font color=red>Qt!</font></h2>");

QPixmap pixmap(Text.size().width(), Text.size().height());
pixmap.fill( Qt::transparent );
QPainter painter( &pixmap );
Text.drawContents(&painter, pixmap.rect());

QIcon ButtonIcon(pixmap);
button->setIcon(ButtonIcon);
button->setIconSize(pixmap.rect().size());

You can also find a rich text push button implementation here.

An other option is to use QxtPushButton class from libqxt. QxtPushButton widget is an extended QPushButton with rotation and rich text support.

Defeat

Answer 3

There is a bug report about this. When you use QTextDocument::drawContents, it tends to ignore the aligments. To make it work, set the text width using QTextDocument::setTextWidth.

QTextDocument doc;
doc.setHtml("<p align=center><font>Button</font><br/><font color=red>1</font></p>");
doc.setTextWidth(doc.size().width());

QPixmap pixmap(doc.size().width(), doc.size().height());
pixmap.fill( Qt::transparent );
QPainter painter(&pixmap);
doc.drawContents(&painter);

QPushButton button;
button.setIconSize(pixmap.size());
button.setIcon(pixmap);
button.show();

Bk