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

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

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

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

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

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

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

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

• В самом QtDesigner

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

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

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

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

На данном скриншоте показан список файлов со стилями 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 можно задавать стили в зависимости от его состояния.

QScrollBar.

И под конец, в качестве примера возьмем 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

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