1

スタイルシートを使用して QSlider を再設計および実装しました。

ただし、スライダー自体の前後 (左または右、上または下) に画像を配置する方法が見つかりませんでした。

元：

スライダー：

----00---------------

画像左:

qqqqq

画像右:

ddddd

結果：

qqqqq----00---------------ddddd

私は現在 QHBoxLayout を使用しており、QLabels を使用してこれらの画像を挿入していますが、正しい方法または最良の方法とは思えません。

これらの画像を正しく追加するにはどうすればよいですか?

ありがとう！

4

2 に答える 2

1

スライダーの3つの「ボディパーツ」は、、、grooveおよびadd-pageですsub-page。これらはすべて、実際にはの範囲内にあるため、スタイリングにより、このブログ投稿のQSliderような効果が得られます。スタイルシートを使用すると、次のような効果が得られます。

qqqq00ddddddddddddddd

それ以外の

qqqqq----00---------------ddddd

QHBoxLayoutこれは、戦略に固執するだけで達成できます。

于 2012-12-30T01:53:31.773 に答える
1

実際には、スタイル シートとサブコントロールのborder-imageプロパティだけで実現できgrooveます。

たとえば、次のようなボーダー画像を使用します。

スライダー装飾イメージ

何がどこにあるのかよくわかるように、B は幅 10 ピクセル、スペースは 2、A は幅 12 ピクセルです。

QSlider::groove {      
   border-image: url(:/slider-decoration.png) 0 12 0 10;
   border-left: 10px solid transparent;
   border-right: 12px solid transparent;
}
QSlider::handle {
    width: 8px;
    background-color: green;
}

これにより、期待どおりの結果が得られます。

結果のスライダー

ただし、このソリューションには小さな問題があります。マウスは境界線の存在を無視し、ハンドル位置とマウス位置の間の両端付近にオフセットがあります。したがって、それを避けるために、ハンドルはどちらかの側まで移動する必要がありますが、透明な境界線を追加して、画像の境界線の直前で停止しているように見せます:

QSlider::groove {      
   border-image: url(:/slider-decoration.png) 0 12 0 10;
   border-left: 10px;
   border-right: 12px;
}
QSlider::handle {
    width: 8px;
    /* add borders to the handle that will sit above the groove border */
    border-right: 10px solid transparent;
    border-left: 12px solid transparent;       

    /* negative margins to allow the handle borders 
       to go past the groove borders */
    margin-right: -10px;    
    margin-left: -12px;
    background-color: green;
    /* make the background color fill the content, not the border */
    background-clip: content;
}
于 2012-12-30T16:51:58.620 に答える