Как добавить изображение по бокам QSlider

Question

Как добавить изображение по бокам QSlider

Я перепроектировал и внедрил QSlider, используя его таблицы стилей.

Я не мог найти, как разместить изображение до и после (слева или справа, сверху или снизу) самого слайдера.

Пример:

Slider:

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

Изображение слева:

qqqqq

Изображение справа:

ddddd

Результат:

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

В настоящее время я использую QHBoxLayout и вставляю эти изображения с помощью QLabels, но это не кажется правильным или лучшим способом.

Как я могу еще добавить эти изображения правильно?

Спасибо!

1

c++qslider qss qt

Решение

Другие решения

Три «части тела» ползунка являются groove, add-page, а также sub-page, Все это на самом деле в пределах QSliderтаким образом, стиль дает вам эффект, как тот в этом сообщении в блоге. Использование таблиц стилей даст вам эффект:

qqqq00ddddddddddddddd

вместо

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

которого вы можете достичь, просто придерживаясь QHBoxLayout стратегия.

1

Источник

Accepted Answer

Вы можете добиться этого только с помощью таблиц стилей и 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;
}

1