Qt Style Sheets – QSS の理解を深めよう Subcontrol編 ②

2021-07-16QSS,Tips,StyleSheet,PySide,PySide2,Python,Qt,MayaSubcontrol

初めに、この記事は Qt Style Sheets – QSS の理解を深めよう Subcontrol編 ① の続きになります QSSやSubControlについて全く分からない方はぜひひとつ前の記事から読んでみてください

今回はQSSの理解を深めよう Subcontrol編２回目の記事となりますこの記事のひとつ前に公開しましたコピペで実装できる QSpinBox QSS スタイルレシピ 4種を基にSubcontrolを具体的に説明していきましょう

QSpinBox Subcontrol

QSpinBoxのサブコントロールは４種類になります

QSpinBox Subcontrol	説明
::up-button	subcontrol-originはQSpinBoxに相対的です
::down-button	subcontrol-originはQSpinBoxに相対的です
::up-arrow	::up-arrowは::up-buttonに表示され、subcontrol-originは::up-buttonからの相対的です
::down-arrown	::down-arrowは::down-buttonに表示され、subcontrol-originは::down-buttonからの相対的です

共有できるウィジェット

QDateEdit、QTimeEdit、QDateTimeEditのサブコントロールはQSpinBoxと同じで、QSpinBoxをQDateEdit、QTimeEdit、QDateTimeEditに置き換えるだけで使用できます

QSSの解説

上の画像のテンプレートを基に解説していきます

QSSは「Cascading　連鎖的に伝わる」という風に上流で定義されたものが下流へ引き継がれてウィジェットに適用されますつまりテンプレートも同じなため上から順を追って解説していきます

QSpinBox#spinBox {
    color: lightgray;
    background: #242424;
    height: 25px;
}

fontの色、背景の色、高さの指定を行っていますこれはQSpinBoxとそのサブクラスのインスタンスにマッチします

QSpinBox#spinBox {
/*略*/
}
QSpinBox::down-button#spinBox,
QSpinBox::up-button#spinBox {
    subcontrol-origin: border;
    background: #40dcda;
    width: 20px;
    height: 25px;
}

::down-buttonと::up-buttonに対してQSSの設定を行っています背景食と横幅、高さの指定にsubcontrol-originをborderに指定していますつまりborderの領域に::down-buttonと::up-buttonを描画することを指定していますこの設定ですとheightが::down-buttonと::up-buttonともに同じ大きさ且つ、描画の場所を指定していないため::down-buttonと::up-buttonが重なって表示されています height: 6pxにすると下の画像のような見た目になります height: 25pxに指定している理由はSpinBoxの高さと同じにしたいためです

QSpinBox#spinBox {
/*略*/
}
QSpinBox::down-button#spinBox,
QSpinBox::up-button#spinBox {
/*略*/
}
QSpinBox::down-button#spinBox {
    subcontrol-position: center left;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}
QSpinBox::up-button#spinBox {
    subcontrol-position: center right;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}

上のコードではsubcontrol-positionを指定しています

::down-buttonはcenter left、::up-buttonはcenter rightに配置するようにsubcontrol-positionで指定していますまた外側を丸くしたいため、それぞれのボタンの外側の角を丸くしています内側はまっすぐしたいため角はそのままにしています

QSpinBox#spinBox {
/*略*/
}
QSpinBox::down-button#spinBox,
QSpinBox::up-button#spinBox {
/*略*/
}
QSpinBox::down-button#spinBox {
/*略*/
}
QSpinBox::up-button#spinBox {
/*略*/
}
QSpinBox::up-button:hover#spinBox,
QSpinBox::down-button:hover#spinBox {
    background: #788787;
}
QSpinBox::up-button:pressed#spinBox,
QSpinBox::down-button:pressed#spinBox {
    background: #40dcda;
}

:hoverで::up-buttonと::down-buttonにダイナミック疑似クラスを設定しています :hoverの名の通りhoverすると機能するQSSになります :pressedも同じく名の通りpressedしている間の状態を設定するQSSです疑似クラスを指定する際に注意するべきことがあります

QSpinBox::up-button:pressed#spinBox,
QSpinBox::down-button:pressed#spinBox {
    background: #40dcda;
}
QSpinBox::up-button:hover#spinBox,
QSpinBox::down-button:hover#spinBox {
    background: #788787;
}

例えば先ほど指定した:hoverと:pressedをひっくり返し:pressedを上流に:hoverを下流に持っていきますすると:hoverは機能していますがpressedが機能しなくなりますこれはどちらのセレクタも同じ個別性を持っているのでボタンがpressedになっている間にマウスがボタンがとhoverした場合、2番目のルール、つまりhoverが優先されてしまうために起きてしまう現象です

自分もよく間違えることがあるのでもし設定したQSSがうまくいかないときはセレクターの個別性が高いものを確認する必要があります

QSpinBox#spinBox {
/*略*/
}
QSpinBox::down-button#spinBox,
QSpinBox::up-button#spinBox {
/*略*/
}
QSpinBox::down-button#spinBox {
/*略*/
}
QSpinBox::up-button#spinBox {
/*略*/
}
QSpinBox::up-button:hover#spinBox,
QSpinBox::down-button:hover#spinBox {
/*略*/
}
QSpinBox::up-button:pressed#spinBox,
QSpinBox::down-button:pressed#spinBox {
/*略*/
}
QSpinBox::up-arrow#spinBox,
QSpinBox::down-arrow#spinBox {
    subcontrol-origin: content;
    width: 12px;
    height: 12px;
}

QSpinBox::up-arrow#spinBox{
    image: url(:/icons/QSpinBox/plus-fill_hover.png);
}

QSpinBox::down-arrow#spinBox{
    image: url(:/icons/QSpinBox/minus-fill_hover.png);
}

上流ではQSpinBox::up-arrowとQSpinBox::down-arrowの描画領域をどこにするか指定していますまたサイズの指定を行うことで大きな画像でも縮尺して表示できるようにしています下流ではそれぞれどのimageを使用するかしています subcontrol-origin: content;