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

全体の設定

例として、すべてのQLineEditの背景色を黄色にします。 ※QLineEdit以外はデフォルトの背景色になります。
※アプリケーション(qApp)を指定するとすべてのウインドウが対象になります、多分。

個別の設定

個別のウィジェットの色やスタイルを指定します。 QWidgetのように表面に現れないクラスを指定すると、予想外の結果になることがあります。例えば、テスト用ダイアログでQWidgetを指定して境界線(黒・実線・2px)を設定します。
QWidgetは１つ(widget)しか作ってないので、境界線１と同じ結果になるはずです。
ところが、全てのウィジェットに境界線が付いてしまいます。 ※見えないけれども、ダイアログ領域のベースにQWidgetがあるということですね。

背景画像スクロール

QTextEditとQListViewの背景に画像を表示します。スクロールすると画像も一緒に動きます。背景画像を固定表示にするとスクロールしても画像が動きません。 ※attachmentを省略するとscrollになります。
no-repeatを省略すると背景画像をタイル表示します。 ※この猫画像は写真素材足成様(http://www.ashinari.com/)のフリー素材です。

チェックボックスの装飾

インジケーター変更

インジケーター(チェックを入れる四角い枠)の画像を変更します。
チェックボックスを３択にすると、オフとオンの間に不定(未確定)が入ります。
１回押すごとに、オフ→不定→オン→オフ・・・と順番に切り替わります。
画像は13x13で適当に作ってリソースに登録済みです。
チェックボックス上にカーソルがある時は青い画像を表示します。標準では表示は変化しません。
マウスの左ボタンを押している間は緑の画像を表示します。すべてのチェックボックスのインジケーター画像を変更します。 ※画像と文字の間隔は5pxで、画像の表示サイズは縦横13pxです。
※ラジオボタンのインジケーターも同じように設定できます。

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

cboxのインジケーターだけ画像を変更します。 ※スタイルシートの内容は上と同じですが、QCheckBox:を省略できます。
※setTristateでtrueを指定すると３択になります。指定しないかfalseの場合はオンとオフの切り替えになります。

コンボボックスの装飾

装飾の基本

コンボボックスの常に表示されている部分を変更します。
メニューの部分は、QAbstractItemViewで変更できます。例として、すべてのコンボボックスの境界線(1px・実線・灰色・角丸)と余白と最少幅を設定します。
さらに、文字入力が可能な場合は入力領域の背景色を緑色にします。
メニューを開いている時は、文字の表示位置を少し右下にずらします。横方向のグラデーションで左から右へだんだん暗くします。
メニューを開いている時は少し白っぽくします。
ボタンは28pxの幅で左側の境界に赤い実線を入れ、リソース登録済みの画像を指定します。
画像の右上と右下の角は下のウィジェットに合わせて3pxの角丸を指定しています。
最後にメニューの境界線(2px・実線・濃灰色)と選択背景色(薄灰色)を指定します。 ※文字入力が可能な場合は右側のボタン部分だけ横に押し縮めた感じのグラデーションになります。
※メニューを開いた時に画像の位置が１pxだけ右下に移動します。

フレームの装飾

装飾の基本

個別のフレームはオブジェクト名を指定してスタイルシートを設定します。
すべてのQFrameに共通の設定をする場合はクラス名(QFrame)を指定します。例として、フレームにラベルとエディタを置いて背景色を黄色にします。選択色とフォーカスを失った時の色と１行おきの背景色が指定できます。
リスト関係のQListView, QTreeView, QTableViewなども同じように指定できると思います、試していませんが。
例として、リストウィジェットに４つのアイテムを入れ、１行おきの背景色と選択表示を指定します。 ※setAlternatingRowColorsにtrueを設定すると、１行おきに背景色が変わります。
※通常は灰色の背景色がベージュになります。選択時の表示もセル単位になります。選択中のアイテムは中央がへこんだ感じの背景で、文字色が白になります。
カーソルがアイテム上にある時は少し薄い色になります。文字色は黒のままです。
リストウィジェットがフォーカスを失うとホバーの背景色は薄い色になります。選択中のアイテムは変わりません。メニューの背景色・境界線・余白・画像などが指定できます。
アイコンを持つメニューはアイコンの設定に従い、なければインジケーター画像を表示します。
インジケーターの指定方法はチェックボックスとほとんど同じです。例として、４つのアイコン付きアクションを作って、テスト用のメニューにセットします。 ※QActionのアイコンの指定を省略するとインジケーター画像を表示します。
※アクションはすべてチェック可能にします。そのうち２つをグループにしてラジオボタンの代用にしています。スタイルシートを設定します。黄色い背景色のほうを指定しています。 ※exclusiveはラジオボタンスタイルで、non-exclusiveはチェックボックススタイルです。
※チェックボックスの画像を流用したので、exclusiveはどちらも四角い絵になっています。
※itemでtransparentを指定して、item:selectedでalphaに150を設定することで、下の色が透けて見えるような感じにしています。
※チェックがオンになったらアイコンの位置が少し右下に移動します。
※アイコンと文字の間隔はitemのpadding-leftで調整します。

プログレスバーの装飾

装飾の基本

テキスト位置や詰め要素(chunk)が指定できます。位置を省略すると左上になります。
角丸を指定した時は必ず境界線も指定したほうがよさそうです。例として、標準のプログレスバーと同じように、テキストを右外側に表示して詰め要素の間にスペースを入れます。 ※テキストを外側に出すために右マージンを広く設定しています。
位置をcenterにして右マージンを省略すると中央にテキストを表示します。
centerを指定すると、マージンを含む横幅の中央にテキストを表示します。
角丸を指定しても境界線がないと、100%になった時に角丸がなくなります。ボタンにフォーカスが移ると境界線の外側に枠が表示されます。
メニューを開いた時にインジケーター画像が少し右下に移動します。
フォーカスが他のウインドウに移った場合、指定が無視されて標準のスタイルになります。
ただし、インジケーター画像はそのまま残ります。
※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で背景色を赤にしていますが、左右どちらも色を指定しているので表面に現れません。
この背景色を省略すると、ハンドルが上下に飛び出さずに左右の領域と同じ高さになります。
意味がなくても指定する必要があるようです。背景色ではなく境界線を指定しても大丈夫です。このサンプルは水平スクロールバーですが、垂直スクロールバーも同様に指定できます。
縦方向の場合は位置やサイズとマージンの上下・左右を書き換える必要があります。 :horizontal → :vertical
height → width
width → height
top → left
bottom → right
margin → 上下と左右の入れ替え

スピンボックスの装飾

装飾の基本

全体の装飾と増減ボタンのスタイルが指定できます。
カーソルが上に乗った時やマウスの左ボタンを押した時などの指定ができます。スピンボックスのサイズに合わせて背景画像がぴったり表示されるようにします。 ※減少(下)ボタンの上の境界線だけ省略して、増加(上)ボタンの下の境界線で代用しています。
※右余白は15pxですが、境界線の幅が3pxなので実際は18pxになり、ボタン幅は境界線(1)×2を引いた16pxになります。
※これはスピンボックスというより、border-imageの使用例です。ボタンを押している間は少し暗く、ホバー状態は少し明るい色の画像になります。
画像を背景(background)として指定しても、ボックスに合わせて全体に広がることはありません。

ステータスバーの装飾

装飾の基本

全体の装飾およびステータスバーの子要素のスタイルが指定できます。全体の背景色を青にして、子要素に境界線(1px・実線・紫・角丸)を付けます。
さらに子要素のラベルに境界線(3px・実線・白)を付けます。索引部のタブの背景色をグラデーションにして、ホバー状態の色を指定します。
本体との間に紫の線を引き、選択中のタブの下側に赤線を入れます。
さらに選択中のタブは他のタブの上に出るようにマージンを調整します。 ※painで本体のスタイル、tab-barで索引部のタブの開始位置を指定しています。
※最後の４行でタブが重なるような効果を出しています。本体を少し上に広げて索引部の中央に境界線が入るようにし、索引部のタブの位置を中央ぞろえにします。 ※非選択時の高さ調整はしてないので、選択中も他のタブと同じ高さになります。
※紫色の線と索引部の中央ぞろえ以外は前の例と同じです。

ボタン関連

クローズボタンの付いたタブウィジェットを作り、タブの１つにQPushButtonを置きます。 ※setTabsClosableでクローズボタンの表示／非表示を切り替えます。
※２番目のタブ(Page)に、リソース画像と境界線を設定したプッシュボタンを置きます。
上がデフォルトで下が設定後の表示です。
左端の紙を破いたような部分が断裂(tear)です。ここでは赤丸の画像に変更します。タブのクローズボタンとスクロールボタンに、自分で用意した青い画像を設定します。
※クローズボタンは青の×印で、ホバー状態ではピンクの×印になります。
※クローズボタンをマウスの左ボタンで押している間は赤の×印になります。
※×印の画像はリソースに登録済みの画像です。
※クローズボタンのselectedが効かないので、選択時の青い×印の画像は変更できません。

テーブルビューの装飾

装飾の基本

全選択ボタンと選択中のセルのスタイルが指定できます。選択中のセルの文字色を青にして、背景色をピンクのグラデーションにします。
左上の全選択ボタンの背景色を赤にして、境界線(2px・隆起・赤)を付けます。
１行おきの行の背景色を黄色にして、グリッド線を黒にします。上がデフォルトの単一セル選択と全選択です。下が設定後です。
※MenuButtonPopupモードにするとツールボタンとメニューを開く矢印の部分に分かれます。
※InstantPopupモードの時は矢印の画像が変わりません。
※menu-buttonとmenu-arrowは、MenuButtonPopupを指定した時だけ有効です。
※右余白を20pxにしているので、境界線(2)×2の4pxを引いた16pxがメニューボタンの横幅になります。
※メニューを開いた時に1pxずつ右下に矢印を移動します。閉じたら戻ります。 ■ポップアップモード定義［enum QToolButton::ToolButtonPopupMode］定義値説明 DelayedPopup0 マウスの左ボタンを押し続けた時にメニューを表示 MenuButtonPopup1 ツールボタンの右にメニュー表示用の矢印ボタンを表示 InstantPopup2 ツールボタン全体がメニュー表示機能(connect不可)

ツールチップの装飾

装飾の基本

全体の背景色や境界線と透明度が指定できます。境界線(2px・実線・濃黄色)を指定し、背景は半透明にします。 ※高さの指定が効かないので、max-heightで代用しています。 opacityを100にするともっと透明になり、255にすると透明ではなくなります。 ToolButtonIconOnly0アイコンのみ ToolButtonTextOnly1テキストのみ ToolButtonTextBesideIcon2アイコンの横にテキスト ToolButtonTextUnderIcon3アイコンの下にテキスト ToolButtonFollowStyle4スタイルに従う

ツリービューの装飾

装飾の基本

全体の背景色や境界線とアイテムのスタイルが指定できます。行の背景色と、マウスの左ボタンを押した時・フォーカス有無・ホバーの状態ごとに背景色や境界線を設定します。上がデフォルトで下が設定後です。 ※アイテムに左右の境界線を付けてセルの区切り線にしています。
※カーソルを動かすと、下にあるアイテムの背景色が白っぽいグラデーションに変わります。
※クリックすると背景色が濃いグラデーションになり、フォーカスを失うと少し濃い色になります。
※文字色はデフォルトのままです。

マークを色で表す

プラス／マイナスや罫線の代わりに色で表します。 ※has-childrenは子アイテムがある場合で、 has-siblingsは兄弟の一番下のアイテムの場合です。
※adjoins-itemは右隣りにアイテムがある場合です。このアイテムはアイコンから始まる行の部分です。 QLineEditを作る時、mandatoryFieldプロパティをセットし、後でそれを使います。 ※３つのQLineEditのうち、プロパティにtrueをセットしたedit2だけ背景色が黄色になります。
※プロパティの名前(mandatoryField)は任意の文字列を指定できます。
※setProperty関数はQObjectクラスで、第２引数はQVariantです。

リードオンリー

リードオンリーのQLineEditの背景色を青色にします。

スプリッター

水平・垂直の線の太さは変化しますが、画像に変化はありません。 ※"image:"をpressedに入れなくてもいいのでしょうか。入れても結果は変わりませんが。

プッシュボタンと画像

ボタンを横に広げた時の比較です。左側が元のサイズです。右側は上から、黒のみ、黒＋赤、黒＋青、黒＋赤＋青を指定した結果です。 ※borderのtransparentを入れると、より自然な感じになるということでしょうか。