Qtのボタンの色変更やカスタマイズのやり方

Qtアプリケーションのボタンの背景色や枠色などの色変更や文字サイズ、枠の丸みなどのカスタマイズのやり方は、

HTMLで使用するCSS ( Cascading Style Sheets )と同じような記述のQSS ( Qt Style Sheets )で設定することができます。

Qtのスタイルシート記述は、QtCreatorのデザイン画面から記述する方法とソースコード上に直接記述する方法があります。

これら２つの方法で、Qtのボタンの色変更やカスタマイズするやり方を書いていきたいと思います。

ここでは、Qt5とQtCreator4.8.2を使用しています。

Qtのボタンの種類
QtCreatorでスタイルシートを設定するやり方
ソースコードでスタイルシートを設定するやり方
QtCreatorとソースコードで設定するメリット・デメリット
スタイルシート設定のバグ？
最後に

１．Qtのボタンの種類

QtCreatorのデザイン画面でドラッグ＆ドロップで配置できるボタンは、下記があります。

画像	QtCreatorでの名前	クラス名
	Push Button	QPushButton
	Tool Button	QToolButton
	Radio Button	QRadioButton
	Check Box	QCheckBox
	Command Link Button	QCommandLinkButton
	Dialog Button Box	QDialogButtonBox

ここでは、QPushButtonの背景色やボタンの丸みなど代表的な設定のやり方を書いていきたいと思います。

他のボタンについても基本的に同じやり方で設定することができますが、

QPushButton::pressedのようなサブコントロールの詳細については、「Qt Style Sheets Examples」を参照してみてください。

次項から、ボタンはクラス名で記述していきます。

２．QtCreatorでスタイルシートを設定するやり方

まず、QPushButtonのスタイルシートの設定は、ボタンが押されていない時、

ボタン上にマウスカーソルが乗った時、ボタンを押した時の設定をサンプルとして、下記を使用します。

QPushButton {　// ボタンが押されていない時
　　background-color: aquamarine;　// ボタン背景色
　　border: 2px solid #8f8f91;　　 // ボタンの枠色や枠幅
　　border-radius: 10px;　　　　　 // ボタンの角の丸み　　
}
QPushButton:hover {  // ボタンにマウスカーソルが乗った時
　　background-color: orange;
}
QPushButton:pressed {　// ボタンを押した時
　　background-color: yellow;
}

注意としてスタイルシートの記述は、２バイト文字が入るとエラーになりますので、

上記のような日本語のコメントや全角の空白を入れると、設定が反映されません。

上記の例では、説明のためにコメントを入れているだけですので、コピペする場合は、日本語のコメントは消してください。

以上を踏まえて、QtCreatorでQPushButtonのスタイルシートを設定する手順は、下記です。

１.　色変更やカスタマイズしたいボタンウィジェットをクリックして、右下にそのウィジェットのプロパティを表示します。

QPushButtonウィジェットの配置は、左側の「Buttons」にある「Push Button」をドラッグ＆ドロップで行います。

２．ボタン上で右クリックして「スタイルシートを変更」を押します。

もしくは、右側下にあるプロパティのQWidgetのstyleSheetの「...」をクリックします。

３．「スタイルシートの変更」ウィンドウが表示されるので、QSSを記述して、OKボタンを押します。

このタイミングで背景色などすぐにデザイン画面上で反映されて、確認することができます。

さらに上記の赤枠の実行ボタンを押すと、変更を保存するかのウィンドウが出ますので、「Save All」ボタンを押します。

４．ボタン押下後、実行ウィンドウが表示されますので、変更した箇所がイメージ通りになっているか確認します。

スタイルシートの設定の中には、QPushButton::pressedのような実際にアプリを実行してからでないと確認できない設定がありますので、

デザイン画面だけでなく実行してみてイメージ通りの配色や動きになっているかを確認します。

また、スタイルシートの設定のやり方は、ボタンウィジェットだけでなく、

他のウィジェットについても同様のやり方で設定することができます。

３．ソースコードでスタイルシートを設定するやり方

QtCreatorで設定するやり方以外では、ソースコード上で直接スタイルシートを設定することができます。

ソースコード上でスタイルシートを設定した場合、

２項のQtCreatorで設定したスタイルシートの設定が全てなくなり上書きされますので注意してください。

ソースコード上で設定するやり方は、いろいろありますが、

ここでは、ウィジェットに対してsetStyleSheet()を使用します。

例えば、QPushButtonウィジェットのスタイルシート設定は、mainwindow.cppに下記のように記述します。

static QString str_pushButton={
　　"QPushButton { background-color: aquamarine; \
　　　　　　　　　 color: red; \
　　　　　　　　　 border: 2px solid #8f8f91; \
　　　　　　　　　 border-radius: 10px; \
　　　　　　　　 } \
　　 QPushButton:hover { background-color: orange; } \
　　 QPushButton:pressed { background-color: yellow; }"
};

MainWindow::MainWindow(QWidget *parent) :
　　QMainWindow(parent),
　　ui(new Ui::MainWindow)
{
　　・・・
　　ui->pushButton->setStyleSheet( str_pushButton );
}

まず、QString型変数 str_pushButtonに、スタイルシートをそのまま記述します。

変数名は、私の場合は、型名＋ボタン名で付けるようにしていますが、特に自分の好きな変数名で大丈夫です。

改行する時は上記のように￥(バックスラッシュ)を使用します。

そして、「ui->pushButton->setStyleSheet( str_pushButton )」で、対象のボタンウィジェットにスタイルシートを設定しています。

ここで設定しているボタンウィジェット名は、「pushButton」で、

この名前は、QtCreatorでボタンを配置した時に付けられた名前を使用しています。

自分で名前を変更したい場合は、ボタンに付けた名前で「pushButton」の部分を変更します。

QString型変数 strpushButtonの内容は、cppファイルに記述すると微妙なので、

スタイルシート設定用のヘッダファイルを作成してincludeする方が見やすくなります。

４．QtCreatorとソースコードで設定するメリット・デメリット

QtCreatorとソースコードでのスタイルシート設定のやり方をそれぞれ説明しましたが、

やり方としてどちらが良いか迷うかもしれません。

QtCreatorで設定した場合とソースコードで設定した場合で、それぞれメリット・デメリットをまとめてみました。

QtCreatorで設定した場合のメリット	視覚的にウィジェットを指定して、設定できる。
QtCreatorで設定した場合のメリット	静的な設定については、実行しなくてもすぐに反映される。
QtCreatorで設定した場合のデメリット	QtCreatorを使用できることが前提。

ソースコードで設定した場合のメリット	QSSをヘッダファイルに一纏めにすることで、スタイルシート設定が見やすくなり、修正もやりやすくなる。
ソースコードで設定した場合のメリット	QtCreatorが無くても設定できる。
ソースコードで設定した場合のデメリット	少し背景色を変えたいときにでも、わざわざファイルを開いて編集する必要がある。