3

При использовании QDockWidget в ОС Linux, таких, как Manjaro KDE, Fedora Gnome, с версией Qt5.15, не применяется пользовательская таблица стилей qss для границы закрепленых QDockWidget, а так же для границы QFrame, помещенных в QDockWidget. Вместо этого отображается системный декоратор для границы QDockWidget, который не удаётся отключить с помощью таблицы стилей. Существует ли способ отключить системный декоратор?

Пример

А так выглядит правильное оформление (в ОС Windows 8)

Пример

Вот упрощенный вариант таблицы стилей, которую я применяю:

QMainWindow {
    background: #2C2C34;
}
QMainWindow::separator {
    width: 1px;
    height: 1px;
    background: #2C2C34;
}

QFrame {
    border-left: 1px solid #32363F;
    border-bottom: 1px solid #32363F;
    border-right: 1px solid #32363F;
    border-top: none;
    background-color: #292930;
}

QDockWidget {
    border: none;
    font-size: 8pt;
    color: #A0A5AA;
}
QDockWidget::title {
    padding-left: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center left;
    border-left: 1px solid #32363F;
    border-top: 1px solid #32363F;
    border-right: 1px solid #32363F;
    background: #25272C;
}
QDockWidget::close-button,
QDockWidget::float-button {
    icon-size: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
    border: none;
    background: #25272C;
}
QDockWidget::close-button:hover,
QDockWidget::float-button:hover {
    background: rgb(52, 59, 72);
}
QDockWidget::close-button:pressed,
QDockWidget::float-button:pressed {
    background-color: rgb(85, 170, 255);
}
QDockWidget::close-button {
    min-width: 20px;
    min-height: 20px;
    width: 20px;
    height: 20px;
    top: 1px; bottom: 0px; right: 1px;
    subcontrol-position: center right;
    subcontrol-origin: margin;
    position: absolute;

}
QDockWidget::float-button {
    min-width: 20px;
    min-height: 20px;
    width: 20px;
    height: 20px;
    top: 1px; bottom: 0px; right: 24px;
    subcontrol-position: center right;
    subcontrol-origin: margin;
    position: absolute;

}

В упрощенном варианте получается вот это:

введите сюда описание изображения

А ожидалось получить такой результат (здесь изображение без верхней рамки, т.к. я его скопировал из QT Designer):

введите сюда описание изображения

Настройки background для QDockWidget

Настройки background для QDockWidget

Вариант с отступами 0px (заметно смещение QDockWidget::title и вторая темная граница с закругленными углами вокруг док виджетов)

Вариант с отступами 0px

Вариант с отступами 2px (появились белые границы)

Вариант с отступами 0px

1
  • проведите код. как по картинкам то гадать? 21 июн 2021 в 2:34

3 ответа 3

2
+25

Из приведённого кода на KDE Plasma получилось сделать такое:

здесь могла быть ваша реклама

QDockWidget {
   ...
   background-color: #292930;
}

И компоновщикам у доков, в которых фрейм, выставил параметры layout[Left|Top|Right|Bottom]Margin и layoutSpacing в 2.

Для Федоры - можно отключить границу, выставив альфа-канал в 0 (четвёртый параметр):

QDockWidget {
   ...
   background-color: rgba(0,0,0,0);
}
5
  • Открываем UI в дизайн режиме, справа в дереве графически объектов выбираем компоновщик (layout), который был применён к доку, и ниже в параметрах ищем эти свойства. Можете попробовать выставить в 0, а не 2.
    – magrif
    2 июл 2021 в 11:19
  • @Helg1980 Добавьте скрин с федоры приведённого кода.
    – magrif
    2 июл 2021 в 12:42
  • @Helg1980 а если фрейму margin: -2px допустим поставить?
    – magrif
    2 июл 2021 в 19:00
  • @Helg1980 еще идею подкинул в ответе
    – magrif
    10 июл 2021 в 15:15
  • Да, это действительно сработало, граница исчезла. Спасибо! Единственное отступ не понятно как уменьшить между виджетами, у меня 1px выставлен для разделителя, а там образовался отступ в 5 px;
    – Helg1980
    10 июл 2021 в 17:55
0

Под рукой нет KDE/Gnome для проверки, но судя по документации не хватает резета бордера у самого док виджета.

...
QFrame {
    border-left: 1px solid #32363F;
    border-bottom: 1px solid #32363F;
    border-right: 1px solid #32363F;
    border-top: none;
    background-color: #292930;
}

QDockWidget {
    border: none; /** <--- reset border style **/
    font-size: 8pt;
    color: #A0A5AA;
}

QDockWidget::title {
...
0
0

Решение:

app.setStyle(QStyleFactory::create("Fusion"));

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.