ボタンを自前で描画する必要があります。
QProxyStyle
クラスを継承したMyStyle
クラスを作ります。
#ifndef MYSTYLE_H
#define MYSTYLE_H
#include <QPainter>
#include <QProxyStyle>
#include <QStyleOption>
class MyStyle : public QProxyStyle {
public:
void drawControl(ControlElement element, const QStyleOption *opt, QPainter *p, const QWidget *w) const
{
if (element == CE_PushButton) {
drawControl(CE_PushButtonBevel, opt, p, w);
drawControl(CE_PushButtonLabel, opt, p, w);
return;
}
QProxyStyle::drawControl(element, opt, p, w);
}
};
#endif // MYSTYLE_H
このインスタンスを親ウィンドウ(MainWindow
等)に持たせます。
private:
MyStyle style_;
親ウィンドウのコンストラクタで、ボタンに対してスタイルを設定します。
ui->pushButton->setStyle(&style_);
これで、ボタンの描画を自由にカスタマイズすることができるようになりました。
自前スタイルクラスのdrawControl
関数の中で好きなように描画できます。drawControl(CE_PushButtonBevel, ...)
でボタンの枠を描画し、drawControl(CE_PushButtonLabel, ...)
でテキストを描画します。このうち後者を書き換えればテキストを自由に描画できます。
次のようにすると、テキストの代わりに、円が描画されます。
if (element == CE_PushButton) {
drawControl(CE_PushButtonBevel, opt, p, w);
p->drawEllipse(opt->rect);
return;
}
同じことを次のようにも書けます。
if (element == CE_PushButton) {
drawControl(CE_PushButtonBevel, opt, p, w);
drawControl(CE_PushButtonLabel, opt, p, w);
return;
}
if (element == CE_PushButtonLabel) {
p->drawEllipse(opt->rect);
return;
}
描画の仕組みは以上のとおりですが、円ではなく、装飾テキストを描画したいので、drawEllipse
の代わりにdrawText
にします。
if (element == CE_PushButtonLabel) {
QTextOption textopt;
textopt.setAlignment(Qt::AlignCenter | Qt::AlignVCenter);
p->drawText(opt->rect, "Hello,\n world", textopt);
return;
}
上記の例では、説明のために"Hello,\n world"
と直書きしてしまいましたので、これしか描画されませんから、本来のボタンに設定されているテキストを取得する必要があります。
QStyleOption *
をQStyleOptionButton *
にキャストします。
if (auto const *o = qstyleoption_cast<QStyleOptionButton const *>(opt)) {
こうすると、o->text
で描画すべきテキストを取得できるようになります。
変更の結果、drawControl
関数は次のようになります。
void drawControl(ControlElement element, const QStyleOption *opt, QPainter *p, const QWidget *w) const
{
if (element == CE_PushButton) {
drawControl(CE_PushButtonBevel, opt, p, w);
drawControl(CE_PushButtonLabel, opt, p, w);
return;
}
if (element == CE_PushButtonLabel) {
if (auto const *o = qstyleoption_cast<QStyleOptionButton const *>(opt)) {
QTextOption textopt;
textopt.setAlignment(Qt::AlignCenter | Qt::AlignVCenter);
p->drawText(opt->rect, o->text, textopt);
}
}
QProxyStyle::drawControl(element, opt, p, w);
}
親ウィンドウ(MainWindow
等)で、ボタンのテキストを設定します。
ui->pushButton->setText("Push\nButton");
おまけ。
リッチテキスト(簡易HTML)を描画することもできます。
if (element == CE_PushButtonLabel) {
if (auto const *o = qstyleoption_cast<QStyleOptionButton const *>(opt)) {
QTextDocument td;
td.setHtml(o->text);
td.drawContents(p);
return;
}
}
こうすると、次のようなことができます。
ui->pushButton->setText("<i>Push</i><br><b>Button</b>");
ただし、このやり方だと、縦方向の描画サイズの計算と、描画座標の設定が面倒です。縦中央揃えなどを実現するには、さらにたくさんのコードを書かないといけません。大掛かりになるので割愛します。