のスタイリング手法Qt Widgets

Qt Widgets では、ウィジェットの外観を変更する3つの方法が用意されています：

• style はすべてのウィジェットを描画します。プラットフォームのスタイルを調整するにはQProxyStyle をサブクラス化し、完全にカスタマイズされた外観を実装するにはQCommonStyle をサブクラス化します。これはQt独自のスタイルが使用する仕組みであり、本番アプリケーションで採用すべき方法です。
• StyleKitは、QMLでデザインを宣言的に記述し、QStyle の実装であるQStyleKitStyle を通じてウィジェットに適用します。同じスタイルファイルは、Qt Quick のコントロールにもスタイルを適用します。
• スタイルシートは、CSSのようなルールを使用して個々の視覚的プロパティを上書きします。これらはプロトタイピングや、小規模で局所的な調整を行うためのツールであり、アプリケーションの本格的な外観を決定するためのものではありません。

このページでは、各アプローチのコストと、いつそれを選択すべきかについて説明します。

アプローチの選択

次の表は、スタイル設定の目標と、それに適した仕組みを対応付けています。

本番用アプリケーション向けのスタイルを実装する

QStyle のサブクラスは、各ウィジェットがスタイルに渡すQStyleOption 内の情報を使用して、QPainter でウィジェットを直接描画します。 スタイルは、ボタンのベベルからツリービューのブランチに至るまで、あらゆる要素を完全に制御することができ、その制御は通常のペイント操作と同じコストで行われます。つまり、一致させるルールも、ウィジェットごとに再計算すべき状態もありません。

変更したい範囲に応じて基底クラスを選択してください：

• QProxyStyle 別のスタイル（デフォルトではプラットフォームスタイル）をラップし、drawPrimitive()、pixelMetric()、styleHint() などの特定の関数をオーバーライドできます。オーバーライドしない部分はすべて、ネイティブな外観と動作を維持します。プラットフォームスタイルを調整する際に使用します。
• QCommonStyle Qtのすべてのスタイルに共通する動作を実装し、描画はユーザーに委ねます。完全なカスタム外観のベースとして使用してください。「スタイルとスタイル対応ウィジェット」では、スタイルの要素を順を追って解説し、各ウィジェットがどのように描画されるかを示しています。

アプリケーションがウィンドウを作成する前に、スタイルを一度設定してください:

#include <QtWidgets>

#include "customstyle.h"

int main(int argc, char *argv[])
{
    QApplication::setStyle(new CustomStyle);
    QApplication app(argc, argv);
    QSpinBox spinBox;
    spinBox.show();
    return app.exec();
}

ハードコーディングされた色ではなく、スタイルオプションの「QPalette 」に指定された色を使用して描画します。これにより、スタイルを切り替えることなく、2つのパレットからデザインのライト版とダーク版を生成できます。QtのFusionスタイルはこの方式で動作します。

ユーザーがコマンドラインで `-style ` オプションを使用してスタイルを選択できるようにしたり、アプリケーション間でスタイルを共有したりするには、スタイルをプラグインとして構築します。『QStylePlugin 』および『How to Create Qt Plugins』を参照してください。

StyleKit を使用して QML でデザインを記述する

StyleKitは宣言型のスタイリングシステムです。スタイルとは、ルートオブジェクトがStyle であるQMLファイルのことで、各コントロールタイプごとに色、サイズ、半径、境界線、および状態に応じたバリエーションを設定します。プロパティはコントロール階層を通じて伝播するため、abstractButton で一度設定された値はあらゆる種類のボタンに適用され、スタイルでは複数の名前付きテーマを定義できます。

QStyleKitStyle は、そのようなスタイルを読み込み、QPainter を使用してウィジェットを描画するQStyle の実装です。Qt Quick はレンダリングには関与しません。同じStyle ファイルはQt Quick コントロールにもスタイルを適用するため、両方のツールキットを使用するアプリケーションでは、1つのデザイン定義を維持できます。スタイルで定義されたテーマは、setThemeName() を使用して選択されます。

auto *style = new QStyleKitStyle(QStringLiteral(":/styles/MyStyle.qml"));
QApplication::setStyle(style);

QStyleKitStyle は Qt 6.12 以降で利用可能です。StyleKit は Qt Labs モジュールであり、その API は Qt のリリースごとに変更される可能性があります。「StyleKit Widgets Example」では、いくつかの StyleKit スタイルとテーマを使用したウィジェットアプリケーションが示されています。

プロトタイピングにはスタイルシートを使用する

Qtスタイルシートは、C++を記述することなく、CSSのような構文のルールを通じてウィジェットの外観を変更します。デザインを試すのに便利です。.qss ファイルを編集してアプリケーションを再起動するか、-stylesheet コマンドラインオプションでファイルを指定すると、 Qt Widgets Designer 同じルールをプレビューできます。また、必須フィールドを黄色の背景色で強調するなど、単一のウィジェットをマークアップする最も手っ取り早い方法でもあります。

スタイルシートには、本番アプリケーションのスタイリングメカニズムとしては不向きなコストが伴います：

• 影響を受けるすべてのウィジェットは、スタイルシートエンジンを介して描画されます。スタイルシートが設定されると、QWidget::style() は、基になるstyle をラップするスタイルシートスタイルを返します。各ウィジェットについて、セレクタをそのウィジェットのクラス、オブジェクト名、プロパティ、および状態と照合し、レンダリングルールを計算して、ウィジェットごとにキャッシュします。 メモリと処理コストは、ウィジェット数およびルールの数に比例して増加します。
• スタイルシートを変更すると、その適用対象となるすべての要素が再描画されます。 QApplication::setStyleSheet() が呼び出されるたびにキャッシュが破棄され、アプリケーション内のすべてのウィジェットが再描画されます。これにより、フォント、パレット、ジオメトリ、サイズヒントが再計算され、画面がちらつくことがあります。テーマの切り替えをスタイルシートに依存させないでください。
• 部分的なルールはネイティブの外観を無効にします。ルールが、QPushButton の背景色など、ネイティブスタイルでは対応できないものを要求した場合、スタイルシートエンジンはネイティブの装飾を適用せずに要素全体を自ら描画します。その結果、境界線、パディング、およびすべての状態を自分で指定する必要が生じ、わずかな調整でも外観の完全な記述へと膨れ上がってしまいます。 「スタイルシートを使用したQt Widgets のカスタマイズ」を参照してください。
• セレクタは、デザインと実装の詳細を結びつけます。ルールは、クラス名、オブジェクト名、およびプロパティ値と照合されます。オブジェクトの名前を変更したり、ウィジェットクラスを置き換えたりすると、ルールが照合されなくなることがあります。ルールは、スタイルを使用せずに描画されるカスタムウィジェットには影響しません。
• スタイルシートは、プログラムによる設定よりも優れています。スタイルシートは、QWidget::setFont() やQTreeWidgetItem::setBackground() などの関数で設定されたフォント、パレット、項目の色を上書きするため、ウィジェットのスタイル設定はもはや一箇所で確認できなくなります。

スタイルシートとQStyle のサブクラスの比較については、KDABの記事「Say No to Qt Style Sheets」を参照してください。

どうしてもスタイルシートを使用する場合

プロトタイプの場合や、本番アプリケーションに必要なごくわずかな局所的な調整の場合は、スタイルシートを管理しやすい状態に保ってください:

• ルールを.qss ファイルにまとめ、Qtリソースシステムに組み込んでください。最初のウィンドウが表示される前に、QApplication::setStyleSheet()でアプリケーションに対して一度設定し、そのままにしておきます。QWidget::setStyleSheet()は、1つのウィジェットとその子ウィジェットに限定された、真に局所的な調整のために留保してください。
• C++の文字列からスタイルシートを組み立てないでください。ウィジェットに設定されたスタイルシートは、文字列ごとに1回ずつではなく、そのスタイルシートが設定されたウィジェットごとに1回解析されます。また、QWidget::setStyleSheet()が呼び出されるたびに、たとえ文字列が変更されていなくても、そのウィジェットとそのすべての子ウィジェットが再描画されます。 無効な値に対する赤い境界線など、データを反映するためにQString::arg() で生成された文字列は、更新のたびにウィジェットを再描画します。代わりに、1つのスタイルシート内でオブジェクト名やQtプロパティのセレクタを使用して差異を表現し、「動的プロパティを使用したカスタマイズ」で説明されているように再評価してください。
• 色をハードコーディングしないでください。 #ffffff のようなリテラルな色は、1つのテーマにしか適合しません。palette(window) 、palette(text) 、およびその他のパレットロールを使用して、暗い配色を含め、スタイルシートがアプリケーションのパレットに従うようにしてください。
• すべてのサイズをピクセル単位で指定しないでください。 px のような値は、ディスプレイのサイズに合わせて拡大縮小されますが、ユーザーのフォントサイズには対応しません。フォントサイズに合わせて変更されるべきパディング、マージン、サイズにはem およびex の長さ単位を使用し、フォントサイズにはpt を使用してください。

スタイルシートからスタイルへの移行

プロトタイプが製品となる際には、デザインをスタイルに移行してください。スタイルシートの構文のほとんどには、直接対応するスタイルがあります：