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

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

Модель коробки

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

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

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

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

Изображение фона не масштабируется с размером виджета. Для обеспечения "кожи" или фона, который масштабируется вместе с размером виджета, необходимо использовать border-image. Поскольку свойство border-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, если настраивается одно свойство или подэлемент, все остальные свойства или подэлементы также должны быть настроены.