Мини-гайд по стилям в Qt (PySide6)

Здравствуйте, уважаемые Хабрчане и гости!

Так как моя первая статья была опубликована и получила хоть какой-то положительный отклик, решил сделать еще одну статью, которую давно хотел написать.

В данной статье пойдет речь о стилях в Qt, конкретно я буду использовать для примера PySide6.

Опять же, статья не претендует на звание супер-туториала, а скорее носит характер некого «небольшого справочника» или «мини-гайда» для тех, кто хочет приукрасить свое приложение на Qt. Тем более я не pro в CSS, и делаю на пробу, эксперементрую.

В качестве примера возьму несколько виджетов, и постараюсь схематично наглядно показать, как некоторые строки из QSS (CSS для Qt) могут преобразить виджет.

В документации по Qt приводятся некоторые примеры, но я решил немного прочитать и в других источниках, и сделать наглядный пример.

Есть несколько способов, как можно применить стили к своему приложению (которые я знаю):

• В самом QtDesigner

Контекстное меню для вызова редактора QSS

Редактор QSS

• В коде приложения, вызвав соответствующие методы у объекта виджета (setStyleSheet).

self.ui.export_notes_button.setStyleSheet('''
  QPushButton {
    border: 3px;
    border-color: blue;
  }
''')

• Либо написав все в файл с расширением *.qss и потом добавить его в ресурсы *.qrc и конвертировать в файл (в моем случае на PySide6), чтобы можно было обращаться к нему в коде.

Файл со стилем QSS

На скриншоте выше, у меня находится код для одного из стилей к моему приложений.

Список файлов со стилями QSS

На данном скриншоте показан список файлов со стилями QSS, которые пользователь моей программы может менять в настройках приложения.

Данные файлы необходимо указать в файле ресурсов:

<RCC>
  <qresource>
    <file>style/kilimanjaro.qss</file>
    <file>style/morningstar.qss</file>
    <file>style/default)white.qss</file>
  </qresource>
</RCC>

Затем, нам нужно конвертировать файл ресурсов в понятный для Python формат:

pyside6-rcc styles.qrc -o styles_rc.py

В итоге у нас получилось следующее:

Файлы ресурсов

Далее, можно обратиться к ресурсам через импорт файла:

from Notessa.resource import styles_rc

И установить стиль:

    if not settings.value('StylePath'):
        style_file = QFile(':/styles/kilimanjaro.qss')
    else:
        style_file = QFile(settings.value('StylePath'))
    style_file.open(QFile.OpenModeFlag.ReadOnly)
    convert = style_file.readAll().toStdString()
    app.setStyleSheet(convert)

Стоить пояснить, что в своем примере из нескольких стилей у меня в коде используется один по умолчанию. Выбранный стиль открывается как файл, с него считываются все строки, преобразуются в строковый формат и затем устанавливаются.

Более подробно пример моего приложения, над которым с перерывами работаю несколько лет, можно изучить по ссылке

Ссылка на релиз моего проекта, откуда взят пример

https://github.com/Eixini/Notessa/releases/tag/2.1.0

Итоговый вид приложения

Немного по составляющим стилей виджетов

В качестве примера для разбора будут представлены QComboBox, QScrollBar и QSpinBox.

Начнем с QComboBox. Для QComboBox можно задавать стили в зависимости от его состояния.

QComboBox краткий разбор составляющих по стилям

QScrollBar.

Основные значения для вертикального QScrollBar

Составляющие QScrollBar

Стили для ползунка QScrollBar

И под конец, в качестве примера возьмем QSpinBox.

Краткий разбор QSpinBox

У QSpinBox можно поменять расположение кнопок (вместо стандартного размещения справа). Например, сделать их по разные стороны. Так же, для них можно задать картинки (стрелочки, значок минуса/плюса и т.д):

QDoubleSpinBox::up-arrow {
  image: url(:/icons/forward.png)
}

QDoubleSpinBox::down-arrow {
  image: url(:/icons/back.png)
}

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

Статья подошла к концу. Хочется порекомендовать, что не бойтесь экспериментировать, как это делал я в QtDesigner, где сразу можно увидеть результат. Еще больше примеров виджетов можно посмотреть в документации (и при желании сделать для себя шпаргалку, как сделал я)

Источник информации от Qt

https://doc.qt.io/qt-6/stylesheet-examples.html

Спасибо за внимание!