スタイルシートを使用したQt Widgets のカスタマイズ

スタイルシートを使用する場合、すべてのウィジェットは、マージン矩形、ボーダー矩形、パディング矩形、コンテンツ矩形の4つの同心円状の矩形からなるボックスとして扱われます。ボックスモデルでは、これについてさらに詳しく説明しています。

ボックスモデル

これら4つの同心円状の長方形は、概念的には以下のようになります：

• マージンはボーダーの外側に位置します。
• ボーダーは、マージンとパディングの間に描かれます。
• パディングはボーダーの内側、つまりボーダーと実際のコンテンツの間に位置します。
• コンテンツとは、マージン、ボーダー、パディングを除いた、元のウィジェットまたはサブコントロールの残りの部分のことです。

margin、border-width、paddingの各プロパティは、すべてデフォルトで 0 に設定されています。その場合、4つの矩形（margin 、border 、padding 、およびcontent ）はすべて完全に重なります。

background-imageプロパティを使用して、ウィジェットの背景を指定できます。デフォルトでは、background-image はボーダーの内側の領域にのみ描画されます。これはbackground-clipプロパティを使用して変更できます。background-repeatおよびbackground-originを使用すると、背景画像の繰り返し方法と原点を制御できます。

background-imageは、ウィジェットのサイズに合わせて拡大縮小されません。ウィジェットのサイズに合わせて拡大縮小される「スキン」や背景を設定するには、border-imageを使用する必要があります。border-imageプロパティは代替の背景を提供するため、border-imageが指定されている場合はbackground-imageを指定する必要はありません。 両方が指定された場合、`border-image` が `background-image` の上に描画されます。

さらに、imageプロパティを使用すると、border-image の上に画像を描画することができます。 指定された画像はタイル状に繰り返されたり伸縮したりせず、そのサイズがウィジェットのサイズと一致しない場合は、image-positionプロパティを使用して配置を指定します。background-image や border-image とは異なり、image プロパティには SVG を指定することができ、その場合はウィジェットのサイズに応じて画像が自動的に拡大縮小されます。

ルールをレンダリングする手順は以下の通りです：

• レンダリング操作全体に対してクリップを設定する（border-radius）
• 背景を描画する（background-image）
• 境界線を描画する（border-image、border）
• オーバーレイ画像を描画する（image）

サブコントロール

ウィジェットは、互いに重なり合って描画されるサブコントロールの階層（ツリー）として扱われます。たとえば、QComboBox は、ドロップダウン・サブコントロールに続いて下向き矢印のサブコントロールを描画します。したがって、QComboBox は次のようにレンダリングされます：

• QComboBox { } ルールをレンダリングする
• QComboBox::drop-down { } ルールをレンダリング
• QComboBox::down-arrow { } ルールをレンダリングする

サブコントロールは親子関係を共有します。QComboBox の場合、下矢印の親はドロップダウンであり、ドロップダウンの親はウィジェット自体です。サブコントロールは、subcontrol-positionおよびsubcontrol-originプロパティを使用して、親コントロール内で位置決めされます。

配置が完了すると、サブコントロールはボックスモデルを使用してスタイルを設定できます。