Настройка виджетов 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, родителем down-arrow является drop-down, а родителем drop-down является сам виджет. Подэлементы позиционируются внутри своего родителя с помощью свойств subcontrol-position и subcontrol-origin.

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

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