Qt Stylesheets - Граница с пробелом сверху и снизу - PullRequest
Новая
       23

Qt Stylesheets - Граница с пробелом сверху и снизу

0 голосов
/ 11 июня 2019

В PyQt5 я работал над таблицами стилей. Для моей таблицы стилей вкладок я хотел бы использовать атрибут border-right, чтобы установить границу между вкладками, но я хотел бы иметь зазор в нижней и верхней части границы, чтобы граница не совпадала с верхней или нижней границей. панели вкладок, вот так:

enter image description here

Я бродил, если есть способ установить высоту границы в таблице стилей, или, возможно, установить стиль границы на пунктир, а затем установить длину штрихов и пробелов? Любой метод, который достигает границы с пробелами, приветствуется, предпочтительно с использованием таблиц стилей. Спасибо.

EDIT:

Вот таблица стилей, которая у меня есть для QTabWidget: 

QTabBar:Tab {height: 27px; width: 220px; border-top-right-radius: 14px; border-top-left-radius: 14px; padding: 2px;}
QTabBar:Tab:Selected {background-color: white;}
QTabBar:Tab:!Selected {background-color: rgb(0,155,255); border-right: 1px solid black}
QTabBar:Tab:Hover:!Selected {background-color: rgb(240,240,240,92);}
QTabBar:Tab:First:Selected {margin-left: 0; margin-right: 0px;}
QTabBar:Tab:Last:Selected {margin-right: 0; margin-left: 0px;}
QTabBar:Tab:Only-One {margin: 0;}
QTabWidget:Tab-Bar: {left: 5px;}
QTabWidget:Pane {background-color: white; border: 1px solid white;

1 Ответ

0 голосов
/ 11 июня 2019

Да, вы можете использовать border-image.

Этот ответ относится только к CSS, но реализация Qt очень хорошо соответствует спецификациям CSS: https://stackoverflow.com/a/26858151

Короче говоря, вы создаетемаленькое квадратное png-изображение с намеченными границами (в вашем случае вам нужно будет создать только правильную пунктирную часть, размер зависит от нужного вам штрихового шаблона.

К сожалению, при использовании закругленных углов Qt "обрезает «половину ширины границы, так что вы увидите небольшой разрыв за пределами границы между двумя соседними вкладками.

Я создал небольшой пример изображения, которое будет иметь шаблон 6 пикселей черного цветаи 5 прозрачных (я забыл стереть верхние 2 пикселя, они вам не понадобятся):

border-image source example

Так выглядит при увеличенииредактор изображений:

border-image source zoomed

После этого вам понадобится в качестве основы для вашей таблицы стилей: 

        QTabBar:Tab {
            border-top-right-radius: 14px; 
            border-top-left-radius: 14px; 
            border-image: url(border.png) 2 repeat;
            padding: 2px;
        }
        QTabBar:Tab:!Selected {
            border-right: 2px;
        }

"2" в объявлении изображения границы является шириной границы в пределах Для изображения Qt требуется, чтобы сказать Qt, что шаблон границы должен быть повторен, а не растянут.Кроме того, не забудьте также задать ширину границы, иначе изображение не будет отображаться.

И вот результат:

border-image result

Как видите, размер рамки составляет всего 1 пиксель, при этом еще один пиксель остается за пределами вкладки.Поскольку проблема возникает из-за использования закругленных углов, я боюсь, что единственным решением будет создание изображения с полными границами, которое включает закругленные углы.Я пытался поиграть с отрицательными полями и позицией CSS, думаю, что это не сработает, как ожидалось, и может даже создать проблемы с различными платформами и версиями Qt.

...