Настройка виджетов Qt с помощью стилей

При использовании стилей каждый виджет рассматривается как прямоугольник с четырьмя концентрическими прямоугольниками: прямоугольник отступа, прямоугольник границы, прямоугольник отступа и прямоугольник содержимого. Модель ящика описывает это более подробно.

Модель ящика

Четыре концентрических прямоугольника концептуально представлены ниже:

• Отступ находится вне границы.
• Граница нарисована между отступом и отступом.
• Отступ находится внутри границы, между границей и самим содержимым.
• Содержимое — это то, что остается от исходного виджета или подэлемента после удаления отступа, границы и отступа.

Свойства margin, border-width и padding по умолчанию равны нулю. В этом случае все четыре прямоугольника (margin, border, padding, и content) точно совпадают.

Вы можете указать фон для виджета, используя свойство background-image. По умолчанию изображение фона рисуется только для области внутри границы. Это можно изменить с помощью свойства background-clip. Вы можете использовать background-repeat и background-origin для управления повторением и положением изображения фона.

Изображение фона не масштабируется вместе с размером виджета. Для обеспечения «кожи» или фона, который масштабируется вместе с размером виджета, необходимо использовать border-image. Поскольку свойство border-image предоставляет альтернативный фон, не обязательно указывать background-image, когда задано border-image. В случае, когда оба свойства заданы, border-image рисуется поверх background-image.

Кроме того, свойство image может использоваться для рисования изображения поверх border-image. Указанное изображение не повторяется и не растягивается, а когда его размер не соответствует размеру виджета, его выравнивание задается с помощью свойства image-position. В отличие от background-image и border-image, в свойстве image можно указать SVG, в этом случае изображение автоматически масштабируется в соответствии с размером виджета.

Шаги рендеринга правила:

• Установить обрезку для всей операции рендеринга (border-radius)
• Отрисовать фон (background-image)
• Отрисовать границу (border-image, border)
• Отрисовать наложение изображения (image)

Подэлементы

Виджет рассматривается как иерархия (дерево) подэлементов, нарисованных друг над другом. Например, QComboBox рисует выпадающий подэлемент, за которым следует стрелка вниз. Таким образом, QComboBox рендерится следующим образом:

• Отрисовать правило QComboBox { }
• Отрисовать правило QComboBox::drop-down { }
• Отрисовать правило QComboBox::down-arrow { }

Подэлементы имеют родительско-потомковые отношения. В случае QComboBox, родителем стрелки вниз является выпадающий список, а родителем выпадающего списка является сам виджет. Подэлементы позиционируются внутри родителя с помощью свойств subcontrol-position и subcontrol-origin.

После позиционирования подэлементы можно стилизовать с помощью модели ящика.

Примечание: Для сложных виджетов, таких как QComboBox и QScrollBar, если один параметр или подэлемент настраивается, все другие параметры или подэлементы также должны быть настроены.