[Предыдущая: Интеграция с Qt Designer] [Содержание] [Следующая: Руководство по таблицам стилей Qt]
Настройка виджетов Qt с использованием таблиц стилей
При использовании таблиц стилей каждый виджет рассматривается как коробка, окруженная четырьмя вложенными друг в друга прямоугольниками: прямоугольник полей (margin rectangle), прямоугольник границ (border rectangle), прямоугольник заполнения (padding rectangle) и прямоугольник содержимого (content rectangle). Модель "коробки" описывает это более детально.
Модель "коробки" (The Box Model)
Четыре вложенных друг в друга прямоугольника концептуально показаны ниже:
- Поля располагаются за пределами границы.
- Граница отрисовывается между полями и заполнителем (padding).
- Заполнитель располагается внутри границы, между границей и фактическим содержимым.
- Содержимое - это то, что останется от исходного виджета или субэлемента управления если удалить поля, границы и заполнитель.
Свойства margin, border-width и padding по умолчанию равны нулю. В этом случае все четыре прямоугольника (полей, границ, заполнения и содержимого) полностью совпадают.
Для задания фона виджета вы можете использовать свойство background-image. По умолчанию, фоновое изображение (background-image) отрисовывается только для области внутри границ. Это можно изменить используя свойство background-clip. Вы можете использовать свойства background-repeat и background-origin для управления повторяемостью и источником фонового изображения.
Фоновое изображение не масштабируется по размерам виджета. Чтобы предоставить "обложку" (skin) или масштабируемое в соответствии с размерами виджета фоновое изображение нужно использовать свойство border-image. Поскольку свойство border-image предоставляется как альтернатива фоновому изображению, в случае задания border-image задавать background-image не требуется. В том случае, когда заданы они оба, border-image отрисовывается поверх background-image.
В дополнение, свойство image можно использовать для отрисовки изображения поверх border-image. Заданное изображение не повторяется (tile) и не растягивается (stretch), а если его размер не совпадает с размерами виджета его выравнивание определяется свойством image-position. В отличие от background-image и border-image, в свойстве image можно указать изображение SVG, при этом это изображение автоматически масштабируется в соответствии с размерами виджета.
Этапы визуализации правила изложены ниже:
- Устанавливается отсечение (clip) для всей операции визуализации (border-radius)
- Отрисовывается фоновое изображение (background-image)
- Отрисовывается изображение границы (border-image, border)
- Отрисовывется изображение наложения (overlay) (image)
Субэлементы управления
Виджет рассматривается как иерарахия (дерево) субэлементов управления, отрисовываемых по очереди. Например, в QComboBox отрисовывается сначала субэлемент управления выпадающего списка, а затем субэлемент управления кнопки выпадающего списка (down-arrow). Таким образом QComboBox визуализируется как изложено ниже:
- Визуализируется правило QComboBox { }
- Визуализируется правило QComboBox::drop-down { }
- Визуализируется правило QComboBox::down-arrow { }
Субэлементы управления совместно используют взаимоотношения между предками и потомками. В случае QComboBox предком кнопки выпадающего списка является выпадающий список, а предком выпадающего списка - сам виджет. Субэлементы управления располагаются внутри своего родителя используя свойства subcontrol-position и subcontrol-origin.
После расположения к субэлементам управления можно применить стиль используя модель "коробки".
Замечание: В случае сложных виджетов, таких как QComboBox и QScrollBar, если одно свойство или субэлемент управления настраивается, то и все остальные свойства или субэлементы управления также должны настраиваться.
[Предыдущая: Интеграция с Qt Designer] [Содержание] [Следующая: Руководство по таблицам стилей Qt]
Copyright © 2009 Nokia Corporation and/or its subsidiary(-ies) |
Торговые марки |
Qt 4.5.3 |
|