Qtに関する覚え書き［装飾とスタイル］

装飾とスタイルについて

装飾の基本

全体の設定

個別の設定

個別のウィジェットの色やスタイルを指定します。

※行編集ウィジェットは背景色・文字色・選択色を設定しています。
※ラベルウィジェットは背景色・文字色・境界線・角の丸みを設定しています。

影響範囲について

子要素に対する影響

親のスタイルシートを設定すると、子要素もそれに従います。
スタイルシートにオブジェクト名を指定すれば子要素に影響を与えません。

テスト用のダイアログを作って影響を調べます。

※QWidget(widget)とQLineEdit(editPos)にオブジェクト名を付けます。

QWidgetの境界線１

widgetに境界線(2px・実線・黒)を設定します。

widgetだけではなく、子要素すべてに境界線が付きます。

QWidgetの境界線２

widgetのオブジェクト名を指定して境界線(2px・実線・黒)を設定します。

 widgetだけ境界線が付きます。自分の名前を指定するというのも微妙ですが。  

ダイアログのスタイルシートでクラスとオブジェクト名を指定することもできます。  

※オブジェクト名はユニークな名前なので、クラス名(QWidget)は不要かもしれません。

クラスの一括指定

ダイアログ上のすべてのQLineEditの背景色を黄色にします。
ただし、オブジェクト名がPositionのものは水色にします。

※[閉じる]ボタンはQPushButtonクラスなので背景色が変わりません。

見えないクラス

QWidgetのように表面に現れないクラスを指定すると、予想外の結果になることがあります。

例えば、テスト用ダイアログでQWidgetを指定して境界線(黒・実線・2px)を設定します。

 QWidgetは1つ(widget)しか作ってないので、境界線1と同じ結果になるはずです。
 ところが、全てのウィジェットに境界線が付いてしまいます。  

※見えないけれども、ダイアログ領域のベースにQWidgetがあるということですね。

背景画像スクロール

背景画像スクロール

QTextEditとQListViewの背景に画像を表示します。スクロールすると画像も一緒に動きます。

背景画像を固定表示にするとスクロールしても画像が動きません。

※attachmentを省略するとscrollになります。

no-repeatを省略すると背景画像をタイル表示します。

※この猫画像は写真素材足成様(http://www.ashinari.com/)のフリー素材です。

チェックボックスの装飾

インジケーター変更

インジケーター(チェックを入れる四角い枠)の画像を変更します。
チェックボックスを３択にすると、オフとオンの間に不定(未確定)が入ります。
１回押すごとに、オフ→不定→オン→オフ・・・と順番に切り替わります。

画像は13x13で適当に作ってリソースに登録済みです。
 チェックボックス上にカーソルがある時は青い画像を表示します。  標準では表示は変化しません。
 マウスの左ボタンを押している間は緑の画像を表示します。  

すべてのチェックボックスのインジケーター画像を変更します。

※画像と文字の間隔は5pxで、画像の表示サイズは縦横13pxです。
※ラジオボタンのインジケーターも同じように設定できます。

単独のチェックボックスの場合

コンボボックスの装飾

装飾の基本

 コンボボックスの常に表示されている部分を変更します。
 メニューの部分は、QAbstractItemViewで変更できます。  
例として、すべてのコンボボックスの境界線(1px・実線・灰色・角丸)と  余白と最少幅を設定します。

さらに、文字入力が可能な場合は入力領域の背景色を緑色にします。
メニューを開いている時は、文字の表示位置を少し右下にずらします。

※文字入力不可の場合は背景色が白いままですが、ボタンだけ緑になります。
 ※いずれもメニューの部分は変化しません。
 ※文字入力の許可はsetEditableで切り替えます。  

いろいろな変更

 前述の変更に加えて、グラデーションやリソース画像を使ってコンボボックスの外観を変えます。



横方向のグラデーションで左から右へだんだん暗くします。
 メニューを開いている時は少し白っぽくします。
 ボタンは28pxの幅で左側の境界に赤い実線を入れ、リソース登録済みの画像を指定します。
 画像の右上と右下の角は下のウィジェットに合わせて3pxの角丸を指定しています。
 最後にメニューの境界線(2px・実線・濃灰色)と選択背景色(薄灰色)を指定します。  

※文字入力が可能な場合は右側のボタン部分だけ 横に押し縮めた感じのグラデーションになります。
※メニューを開いた時に画像の位置が１pxだけ右下に移動します。

フレームの装飾

装飾の基本

個別のフレームはオブジェクト名を指定してスタイルシートを設定します。
すべてのQFrameに共通の設定をする場合はクラス名(QFrame)を指定します。

例として、フレームにラベルとエディタを置いて背景色を黄色にします。

さらに、境界線(2px・実線・緑・角丸)を指定して、背景にリソース画像を表示します。

※１行目のオブジェクト名を指定したスタイルシートを省略すると、背景は親の色になります。

グループボックスの装飾

装飾の基本

 単純に背景色だけ変更すると枠線からはみ出した表示になります。
 境界線を指定して余白やマージン、タイトルなどの調整が必要です。
例として、グループボックスにラジオボタンを3つ置いて、背景色に黄色を指定します。  

※背景色が上にはみ出した感じになります。
※境界線や余白なども設定して枠内に収まるように調整する必要があります。

調整の例として、グループボックスとタイトルの背景色にグラデーションを設定します。

 ※グラデーションは縦方向です。下のほうが明るい色になります。
 ※この設定を行うと、すべてのグループボックスがグラデーションになります。  

インジケーターの変更

リストウィジェットの装飾

装飾の基本

選択色とフォーカスを失った時の色と１行おきの背景色が指定できます。
リスト関係のQListView, QTreeView, QTableViewなども同じように指定できると思います、 試していませんが。

例として、リストウィジェットに４つのアイテムを入れ、１行おきの背景色と選択表示を指定します。

 ※setAlternatingRowColorsにtrueを設定すると、1行おきに背景色が変わります。
 ※通常は灰色の背景色がベージュになります。選択時の表示もセル単位になります。  

いろいろな変更

前述の変更に加えて、選択時の境界線と背景色などアイテム関係の指定をします。

 選択中のアイテムは中央がへこんだ感じの背景で、文字色が白になります。
 カーソルがアイテム上にある時は少し薄い色になります。文字色は黒のままです。
 リストウィジェットがフォーカスを失うとホバーの背景色は薄い色になります。  選択中のアイテムは変わりません。  

メニューバーの装飾

装飾の基本

メニューの背景色やメニューを開いた時のスタイルなどが指定できます。

例として、背景色をグラデーションにして、 メニューを開いた時のアイテムの背景色などを指定します。

※selectedとpressedは、チェックボックスの:hoverとコンボボックスの:onの動作に対応します。

左がデフォルトで右が設定後の表示です。

メニューの装飾

装飾の基本

 メニューの背景色・境界線・余白・画像などが指定できます。
 アイコンを持つメニューはアイコンの設定に従い、なければインジケーター画像を表示します。
 インジケーターの指定方法はチェックボックスとほとんど同じです。
例として、4つのアイコン付きアクションを作って、テスト用のメニューにセットします。  

 ※QActionのアイコンの指定を省略するとインジケーター画像を表示します。
 ※アクションはすべてチェック可能にします。  そのうち2つをグループにしてラジオボタンの代用にしています。  


スタイルシートを設定します。黄色い背景色のほうを指定しています。

 ※exclusiveはラジオボタンスタイルで、non-exclusiveはチェックボックススタイルです。
 ※チェックボックスの画像を流用したので、exclusiveはどちらも四角い絵になっています。
 ※itemでtransparentを指定して、item:selectedでalphaに150を設定することで、  下の色が透けて見えるような感じにしています。
 ※チェックがオンになったらアイコンの位置が少し右下に移動します。
 ※アイコンと文字の間隔はitemのpadding-leftで調整します。  

プログレスバーの装飾

装飾の基本

テキスト位置や詰め要素(chunk)が指定できます。位置を省略すると左上になります。
角丸を指定した時は必ず境界線も指定したほうがよさそうです。

例として、標準のプログレスバーと同じように、テキストを右外側に表示して 詰め要素の間にスペースを入れます。

※テキストを外側に出すために右マージンを広く設定しています。

位置をcenterにして右マージンを省略すると中央にテキストを表示します。
centerを指定すると、マージンを含む横幅の中央にテキストを表示します。
角丸を指定しても境界線がないと、100%になった時に角丸がなくなります。

プッシュボタンの装飾

装飾の基本

[閉じる]ボタンの修飾

例として、背景色を赤に変更します。

角を丸めたりいろいろな設定をします。さらにボタンを押している時のスタイルも設定します。

※ボタン上でマウスの左ボタンを押している間は背景色が黒になります。離すと赤に戻ります。

メニューボタンの装飾

テスト用のメニューボタンを作ります。

※スタイルシートは前述のものを詰めて記述しただけです。
※マウスのボタンを離しても背景色は黒のままで、メニューが消えれば赤に戻ります。

メニューボタンのインジケーター画像(▼)を変更し、位置を右側の中央にします。

※画像の位置を左に4px微調整しています。
※画像はリソースに登録済みのmouse01.pngを使っています。

グラデーション

通常のボタンとフラットボタンの背景を縦方向のグラデーションにします。

ボタンを押してない時は上側が明るいグラデーションになります。 押している間は下側が明るくなります。
デフォルトボタンでフォーカスがある時は境界線が紺色になります。
setFlatをtrueにするとフラットボタンになるので境界線がなくなります。

メニュー付きボタンのグラデーション

ボタンの背景をグラデーションにして、インジケーター画像を変更します。

 ボタンにフォーカスが移ると境界線の外側に枠が表示されます。
 メニューを開いた時にインジケーター画像が少し右下に移動します。
 フォーカスが他のウインドウに移った場合、指定が無視されて標準のスタイルになります。
 ただし、インジケーター画像はそのまま残ります。


※pressedとopenの違いがよく分かりません。  

スクロールバーの装飾

装飾の基本

 ハンドルと減量ボタン(sub-line)や増量ボタン(add-line)のスタイルを指定できます。
 ページ単位の減量(sub-page)や増量(add-page)のスタイルも指定できます。
 減量／増量ボタンのスタイルを指定すると、三角矢印の画像が塗りつぶされます。
 その場合はleft-arrowとright-arrowに画像を指定するか境界線で枠を作る必要があります。  
背景色を緑色にして境界線(2px・実線・灰色)を指定します。
 ハンドルを白色にして増減ボタンに縦横3pxの白い四角を描きます。

 ※左右のマージンは増減ボタンの幅です。
 ※左矢印(left-arrow)と右矢印(right-arrow)の指定を省略すると、  増減ボタン内は緑で塗りつぶされます。
 ※増減ボタンと左右矢印のどちらでも画像を指定できますが、  両方指定すると増減ボタンの上に左右矢印が乗った形になります。
 ※ページ増減(sub/add-page)を背景色なしにしているので、  バーの部分をクリックしても色が変化しません。



このサンプルは水平スクロールバーですが、垂直スクロールバーも同様です。
 縦方向の場合はポジションの左右が上下に、最小幅が最小高さになります。  
:horizontal → :vertical
 :left-arrow → :up-arrow
 :right-arrow → :down-arrow  

デフォルトでは増減ボタンが左端と右端にありますが、それを両方とも右端に表示します。  

サイズグリップの装飾

画像の変更

サイズグリップを縦横16pxにしてリソース画像を表示します。

※グリップ領域の大きさに合わせて画像が伸縮することはありません。

スライダーの装飾

装飾の基本

 全体の装飾はgrooveで、左右(上下)に移動するハンドルはhandleで指定します。
 ハンドルの左右の領域はsub-pageとadd-pageで指定します。  
全体を横方向のグラデーションにします。
 ハンドルは角丸実線の境界線にして、左上から右下の方向にグラデーションします。  

ハンドルを上下に飛び出した形にして、左右の領域を紫とオレンジ色にします。

 grooveで背景色を赤にしていますが、左右どちらも色を指定しているので表面に現れません。
 この背景色を省略すると、ハンドルが上下に飛び出さずに左右の領域と同じ高さになります。
 意味がなくても指定する必要があるようです。背景色ではなく境界線を指定しても大丈夫です。  
このサンプルは水平スクロールバーですが、垂直スクロールバーも同様に指定できます。
 縦方向の場合は位置やサイズとマージンの上下・左右を書き換える必要があります。  
:horizontal → :vertical
 height → width
 width → height
 top → left
 bottom → right
 margin → 上下と左右の入れ替え  

スピンボックスの装飾

装飾の基本

全体の装飾と増減ボタンのスタイルが指定できます。
カーソルが上に乗った時やマウスの左ボタンを押した時などの指定ができます。

スピンボックスのサイズに合わせて背景画像がぴったり表示されるようにします。

 ※減少(下)ボタンの上の境界線だけ省略して、増加(上)ボタンの下の境界線で代用しています。
 ※右余白は15pxですが、境界線の幅が3pxなので実際は18pxになり、  ボタン幅は境界線(1)×2を引いた16pxになります。
 ※これはスピンボックスというより、border-imageの使用例です。  


ボタンを押している間は少し暗く、ホバー状態は少し明るい色の画像になります。
 画像を背景(background)として指定しても、ボックスに合わせて全体に広がることはありません。  

ステータスバーの装飾

装飾の基本

 全体の装飾およびステータスバーの子要素のスタイルが指定できます。
全体の背景色を青にして、子要素に境界線(1px・実線・紫・角丸)を付けます。
 さらに子要素のラベルに境界線(3px・実線・白)を付けます。  

子要素は３つともラベルなので、両方の境界線が付きます。
この境界線が付くのはステータスバーにあるラベルだけです。

タブウィジェットの装飾

装飾の基本

 タブウィジェットの索引部と本体の背景色や境界線を指定できます。
 クローズ／スクロールボタンや断裂(tear)マークの画像などが設定できます。  
索引部のタブの背景色をグラデーションにして、ホバー状態の色を指定します。
 本体との間に紫の線を引き、選択中のタブの下側に赤線を入れます。
 さらに選択中のタブは他のタブの上に出るようにマージンを調整します。  

 ※painで本体のスタイル、tab-barで索引部のタブの開始位置を指定しています。
 ※最後の4行でタブが重なるような効果を出しています。  


本体を少し上に広げて索引部の中央に境界線が入るようにし、  索引部のタブの位置を中央ぞろえにします。  

※非選択時の高さ調整はしてないので、選択中も他のタブと同じ高さになります。
※紫色の線と索引部の中央ぞろえ以外は前の例と同じです。

ボタン関連

クローズボタンの付いたタブウィジェットを作り、タブの１つにQPushButtonを置きます。

 ※setTabsClosableでクローズボタンの表示／非表示を切り替えます。
 ※2番目のタブ(Page)に、リソース画像と境界線を設定したプッシュボタンを置きます。

上がデフォルトで下が設定後の表示です。
 左端の紙を破いたような部分が断裂(tear)です。ここでは赤丸の画像に変更します。  


タブのクローズボタンとスクロールボタンに、自分で用意した青い画像を設定します。

 ※クローズボタンは青の×印で、ホバー状態ではピンクの×印になります。
 ※クローズボタンをマウスの左ボタンで押している間は赤の×印になります。
 ※×印の画像はリソースに登録済みの画像です。
 ※クローズボタンのselectedが効かないので、選択時の青い×印の画像は変更できません。  

テーブルビューの装飾

装飾の基本

 全選択ボタンと選択中のセルのスタイルが指定できます。  
選択中のセルの文字色を青にして、背景色をピンクのグラデーションにします。
 左上の全選択ボタンの背景色を赤にして、境界線(2px・隆起・赤)を付けます。
1行おきの行の背景色を黄色にして、グリッド線を黒にします。  

上がデフォルトの単一セル選択と全選択です。下が設定後です。

ツールバーの装飾

装飾の基本

全体の背景色やハンドルのスタイルが指定できます。

背景色を水色にして、ハンドルに赤い線の画像を指定します。

ツールボックスの装飾

装飾の基本

 全体の背景色や境界線とタブのスタイルが指定できます。  
3つのラベルを作り、アイテムとしてツールボックスに入れます。ラベルには画像をセットします。  

上がデフォルトのツールボックスです。下が設定後です。

ツールボックスの背景色を白にして、タブはグラデーションにします。
開いているタブはイタリック体の黒文字にして、閉じているタブは白文字にします。

ツールボタンの装飾

装飾の基本

 背景色や境界線の他にポップアップメニューのスタイルも指定できます。
 背景色を指定すると境界線も塗りつぶされるので自力で立体感を出す必要があります。  
テスト用として、メニューを作ってツールボタンにセットします。  

背景色を上が明るいグラデーションにします。
 マウスの左ボタンを押している間は下が明るいグラデーションになります。
 右の4つのボタンはメニューを持たないツールボタンの例です。  


メニューボタンに境界線を付けて、下矢印のリソース画像を指定します。

 ※MenuButtonPopupモードにするとツールボタンとメニューを開く矢印の部分に分かれます。
 ※InstantPopupモードの時は矢印の画像が変わりません。
 ※menu-buttonとmenu-arrowは、MenuButtonPopupを指定した時だけ有効です。
 ※右余白を20pxにしているので、  境界線(2)×2の4pxを引いた16pxがメニューボタンの横幅になります。
 ※メニューを開いた時に1pxずつ右下に矢印を移動します。閉じたら戻ります。  

■ポップアップモード定義［enum QToolButton::ToolButtonPopupMode］

定義	値	説明
DelayedPopup	0	マウスの左ボタンを押し続けた時にメニューを表示
MenuButtonPopup	1	ツールボタンの右にメニュー表示用の矢印ボタンを表示
InstantPopup	2	ツールボタン全体がメニュー表示機能(connect不可)

ツールチップの装飾

装飾の基本

全体の背景色や境界線と透明度が指定できます。

境界線(2px・実線・濃黄色)を指定し、背景は半透明にします。

※高さの指定が効かないので、max-heightで代用しています。

opacityを100にするともっと透明になり、255にすると透明ではなくなります。

■ボタンスタイル定義［enum Qt::ToolButtonStyle］

定義	値	説明
ToolButtonIconOnly	0	アイコンのみ
ToolButtonTextOnly	1	テキストのみ
ToolButtonTextBesideIcon	2	アイコンの横にテキスト
ToolButtonTextUnderIcon	3	アイコンの下にテキスト
ToolButtonFollowStyle	4	スタイルに従う

ツリービューの装飾

装飾の基本

全体の背景色や境界線とアイテムのスタイルが指定できます。

行の背景色と、マウスの左ボタンを押した時・フォーカス有無・ホバーの状態ごとに 背景色や境界線を設定します。

上がデフォルトで下が設定後です。  


※アイテムに左右の境界線を付けてセルの区切り線にしています。
 ※カーソルを動かすと、下にあるアイテムの背景色が白っぽいグラデーションに変わります。
 ※クリックすると背景色が濃いグラデーションになり、フォーカスを失うと少し濃い色になります。
 ※文字色はデフォルトのままです。  

マークを色で表す

プラス／マイナスや罫線の代わりに色で表します。

 ※has-childrenは子アイテムがある場合で、  has-siblingsは兄弟の一番下のアイテムの場合です。
 ※adjoins-itemは右隣りにアイテムがある場合です。  このアイテムはアイコンから始まる行の部分です。  

マークを画像で表す

プラス／マイナスや罫線の代わりに画像を表示します。

 ※閉じている時(closed)は右向き三角、開いている時(open)は下向き三角の画像を表示します。
 ※三角の画像は境界線なしで表示しています。罫線は境界画像として余白なしで表示しています。  

ドックウィジェットの装飾

装飾の基本

タイトルバーとボタンのスタイルが指定できます。
ドッキングした時の隣接する部分は、メインウインドウのセパレーターで指定します。

テスト用のドックウィジェットを作ってリストをセットします。

一番左がデフォルトのドックウィジェットです。
ウインドウの右端にドッキングした状態になります。

タイトルバーのボタンの画像と動作別スタイルを変更します。

※マウスの左ボタンを押すと画像が少し右下に移動し、離すと元の位置に戻ります。

ボタンを左側に表示し、隣接部分を10pxの黄色にします。

※カーソルが黄色い部分に入ると赤に変わります。

その他

プロパティを使う

リードオンリー

スプリッター

プッシュボタンと画像

ボタンを横に広げた時の比較です。

 左側が元のサイズです。  右側は上から、黒のみ、黒＋赤、黒＋青、黒＋赤＋青を指定した結果です。  

※borderのtransparentを入れると、より自然な感じになるということでしょうか。