Русская Википедия:QSS
QSS (Шаблон:Lang-en — таблицы стилей Qt) — это механизм, позволяющий настраивать внешний вид виджетов библиотеки Qt.
Описание
QSS в значительной части был вдохновлён каскадными таблицами стилей CSS для HTML, вследствие чего имеет похожий синтаксис. В частности, как и в CSS, в QSS можно изменять форму, цвета, прозрачность элемента, а также визуальную реакцию на события (такие, как нажатие кнопки). Стили можно присоединять как к отдельному компоненту так и к ко всему приложению, с помощью метода ::setStyleSheet(), имеющегося как у отдельных виджетов, так и у объекта QApplication.
Qt Designer предоставляет возможность интеграции QSS-стилей, что упрощает их тестирование и разработку. Также, при запуске приложения на Qt, можно применить к нему таблицу стилей, воспользовавшись синтаксисом командной строки вида:
MyApp -stylesheet MyStyle.qss
Поддержка QSS появилась в Qt начиная с версии 4.3[1], однако до версии 4.5 этот механизм не работал на платформе Mac OS X
Механизм QSS позволяет полностью отделить визуальный дизайн от разработки приложения и привлечь к стилизации приложения веб-дизайнеров. Наряду с подсистемами QtScript и QML — это один из шагов по сближению Qt-программирования с web-разработкой.
Особенности QSS
В качестве селекторов QSS используются прежде всего имена классов виджетов Qt. Можно также конкретизировать их именем конкретного экземпляра виджета, например QPushButton#okButton а также значениями тех или иных атрибутов (QPushButton[x="0"][y="0"]). Как и в CSS можно искать элемент ( в случае QSS — виджет), вложенный в виджет указанного типа, например QFrame > QDial (прямой потомок) или QFrame QDial (допустимы промежуточные уровни вложенности).
Примеры кода на QSS
Устанавливает радиус границы для классов QPlainTextEdit,QSpinBox,QTimeEdit,QLineEdit:
QPlainTextEdit,QSpinBox,QTimeEdit,QLineEdit { border-radius: 5;}
Проверяет значение свойства editable класса QComboBox, если условие выполняется то устанавливает изображение из файла ресурсов, и ширину границы:
QComboBox[editable="true"]{
border-image: url(:/Components/pictures/frame.png) 4;
border-width: 3;
}
Примечания
Литература
Ссылки
- Qt 5.7: Qt Style Sheets ReferenceШаблон:Ref-en — официальная документация
- Qt 4.6: Таблицы стилей QtШаблон:Ref-ru — перевод оф. документации
- Custom Looks using Qt 4.2 Style Sheets, Qt Quarterly, Issue 20 · Q4 2006
- Qt Stylesheets TutorialШаблон:Ref-en, Qt Stylesheets Button Bar TutorialШаблон:Ref-en, Qt Stylesheet Sidebar TutorialШаблон:Ref-en Dave Smith’s Blog
Шаблон:Qt Шаблон:Языки таблиц стилей
- ↑ Qt 4.3 and Style Sheets Шаблон:WebarchiveШаблон:Ref-en, Qt Labs — Developer Blogs
