Справочник по стилям Qt

Все производные от QAbstractScrollArea, включая QTextEdit и QAbstractItemView (все классы представления элементов), поддерживают прокручиваемые фоны с помощью background-attachment. Установка background-attachment на fixed обеспечивает фоновое изображение, которое не прокручивается вместе с областью просмотра. Установка background-attachment на scroll прокручивает фоновое изображение при перемещении полос прокрутки.

Пример см. в Настройка QAbstractScrollArea.

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

Границу виджета можно стилизовать с помощью свойства border. Подэлемент ::title можно использовать для настройки заголовка. Кнопки закрытия и перевода в плавающее окно позиционируются относительно подэлемента ::title с помощью ::close-button и ::float-button соответственно.

Когда заголовок расположен вертикально, устанавливается псевдокласс :vertical. Кроме того, в зависимости от QDockWidget::DockWidgetFeature, устанавливаются псевдосостояния :closable, :floatable и :movable.

Примечание: Для стилизации ручки изменения размера используйте QMainWindow::separator.

Предупреждение: Стилевые таблицы не действуют, когда QDockWidget отстыкован, так как Qt использует собственные окна верхнего уровня при отстыковке.

Пример см. в Настройка QDockWidget.

Начиная с версии 4.3, установка стилей на QLabel автоматически устанавливает свойство QFrame::frameStyle в значение QFrame::StyledPanel.

Пример см. в Настройка QFrame.

Индикатор сортировки можно стилизовать с помощью подэлементов ::up-arrow и ::down-arrow.

Пример см. в Настройка QHeaderView.

Цвет и фон выделенного элемента стилизуются с помощью selection-color и selection-background-color соответственно.

Символ пароля можно стилизовать с помощью свойства lineedit-password-character.

Задержка маски пароля может быть изменена с помощью свойства lineedit-password-mask-delay.

Пример см. в Настройка QLineEdit.

Индивидуальные элементы стилизуются с помощью подэлемента ::item. Помимо обычно поддерживаемых псевдосостояний, подэлемент ::item поддерживает псевдосостояния :selected, :default, :exclusive и non-exclusive.

Индикатор флажковых элементов меню стилизуется с помощью подэлемента ::indicator.

Разделитель стилизуется с помощью подэлемента ::separator.

Для элементов с подменю значки стрелок стилизуются с помощью правой стрелки и левой стрелки.

Ползунок стилизуется с помощью ::scroller.

Отрывной элемент стилизуется с помощью ::tearoff.

См. Настройка QMenu для примера.

Начиная с версии 5.15, свойство icon может быть установлено для переопределения значка кнопки.

Для QPushButton с меню, индикатор меню стилизуется с помощью подэлемента ::menu-indicator. Внешний вид флажковых кнопок может быть настроен с помощью псевдосостояний :open и :closed.

Предупреждение: Если вы установите только цвет фона для QPushButton, фон может не отобразиться, если вы не зададите значение свойства border. Это происходит потому, что по умолчанию QPushButton рисует системную границу, которая полностью перекрывает цвет фона. Например,

QPushButton { background-color: red; border: none; }

См. Настройка QPushButton для примера.

Ползунок можно стилизовать с помощью подэлемента ::handle. Установка свойств min-width или min-height задаёт ограничения размера ползунка в зависимости от ориентации.

Подэлемент ::add-line может быть использован для стилизации кнопки добавления строки. По умолчанию подэлемент размещён в правом верхнем углу области рамки виджета. В зависимости от ориентации, используется ::right-arrow или ::down-arrow. По умолчанию стрелки размещаются по центру области содержимого подэлемента.

Подэлемент ::sub-line может быть использован для стилизации кнопки удаления строки. По умолчанию подэлемент размещён в правом нижнем углу области рамки виджета. В зависимости от ориентации, используется ::left-arrow или ::up-arrow. По умолчанию стрелки размещаются по центру области содержимого подэлемента.

Подэлемент ::sub-page может быть использован для стилизации области ползунка, удаляющей страницу. Подэлемент ::add-page может быть использован для стилизации области ползунка, добавляющей страницу.

См. Настройка QScrollBar для примера.

Желоб ползунка стилизуется с помощью ::groove. По умолчанию, желоб расположен в области содержимого виджета. Ползунок стилизуется с помощью подэлемента ::handle. Подэлемент перемещается в области содержимого подэлемента желоба.

См. Настройка QSlider для примера.

См. Настройка QSplitter для примера.

Псевдосостояния :top, :left, :right, :bottom в зависимости от ориентации вкладок.

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

Индикатор разрыва QTabBar стилизуется с помощью подконтроли ::tear.

QTabBar использует две QToolButton для своих полос прокрутки, которые можно стилизовать с помощью селектора QTabBar QToolButton. Для указания ширины кнопки прокрутки используйте подконтроли ::scroller.

Выравнивание вкладок внутри QTabBar стилизуется свойством alignment.

Предупреждение:

Для изменения положения QTabBar внутри QTabWidget используйте подконтроли tab-bar (и установите subcontrol-position).

См. Настройка QTabBar для примера.

Цвет и фон выделенного элемента стилизуются с помощью selection-color и selection-background-color соответственно.

Виджет угла в QTableView реализован как QAbstractButton и может быть стилизован с помощью селектора "QTableView QTableCornerButton::section".

Предупреждение: Если вы установите только background-color на QTableCornerButton, фон может не отобразиться, если вы не установите свойство border на какое-либо значение. Это потому, что по умолчанию QTableCornerButton рисует нативную границу, которая полностью перекрывает background-color.

Цвет сетки можно указать с помощью свойства gridline-color.

См. QAbsractScrollArea для стилизации фонов прокрутки.

См. Настройка QTableView для примера.

Цвет и фон выделенного текста стилизуются с помощью selection-color и selection-background-color соответственно.

См. QAbsractScrollArea для стилизации фонов прокрутки.

Псевдосостояния :top, :left, :right, :bottom в зависимости от области, в которой расположена панель инструментов.

Псевдосостояния :first, :last, :middle, :only-one указывают положение панели инструментов в группе строк (см. QStyleOptionToolBar::positionWithinLine).

Разделитель QToolBar стилизуется с помощью подконтроли ::separator.

Ручка (для перемещения панели инструментов) стилизуется с помощью подконтроли ::handle.

См. Настройка QToolBar для примера.

Индивидуальные вкладки можно стилизовать с помощью подконтроли ::tab. Вкладки поддерживают псевдосостояния :only-one, :first, :last, :middle, :previous-selected, :next-selected, :selected.

Цвет и фон выделенного элемента стилизуются с помощью selection-color и selection-background-color соответственно.

Поведение выделения контролируется свойством show-decoration-selected.

Ветви дерева можно стилизовать с помощью подконтроли ::branch. Подконтроли ::branch поддерживает псевдосостояния :open, :closed, :has-sibling и :has-children.

Используйте подконтроли ::item для более тонкого управления элементами в QTreeView.

См. QAbsractScrollArea для стилизации фонов прокрутки.

См. Настройка QTreeView для примера стилизации ветвей.

Если вы наследуете от QWidget, вам необходимо предоставить paintEvent для вашего пользовательского QWidget, как показано ниже:

void CustomWidget::paintEvent(QPaintEvent *)
{
    QStyleOption opt;
    opt.init(this);
    QPainter p(this);
    style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
}

Вышеприведенный код не выполняет никаких действий, если нет заданного стиля.

Предупреждение: Убедитесь, что вы определили макрос Q_OBJECT для вашего пользовательского виджета.

Если это свойство не задано, используется значение свойства AlternateBase палитры.

Пример:

QTreeView {
    alternate-background-color: blue;
    background: yellow;
}

См. также background и selection-background-color.

Примеры:

QLabel { background-color: yellow }
QLineEdit { background-color: rgb(255, 0, 0) }

Если это свойство не указано, изображение фона повторяется по обоим направлениям (repeat).

Пример:

QFrame {
    background: white url(:/images/ring.png);
    background-repeat: repeat-y;
    background-position: left;
}

Пример:

QTextEdit {
    background-image: url("leaves.png");
    background-attachment: fixed;
}

См. также background

Это свойство поддерживается подклассами QAbstractItemView, QAbstractSpinBox, QCheckBox, QComboBox, QDialog, QFrame, QGroupBox, QLabel, QPushButton, QRadioButton, QSplitter, QTextEdit, QToolTip и обычными QWidget.

Если это свойство не задано, используется значение по умолчанию padding.

Пример:

QFrame {
    background-image: url(:/images/header.png);
    background-position: top left;
    background-origin: content;
}

См. также background и Модель области.

Это свойство поддерживается подклассами QAbstractItemView, QAbstractSpinBox, QCheckBox, QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit, QToolTip и обычными QWidget.

Если это свойство не задано, оно по умолчанию равно свойству color (т.е., цвет переднего плана виджета).

Пример:

QLineEdit {
    border-width: 1px;
    border-style: solid;
    border-color: white;
}

См. также border-style, border-width, border-image и Модель области.

Радиус границы обрезает фон элемента.

Этот параметр поддерживается подклассами QAbstractItemView, подклассами QAbstractSpinBox, QCheckBox, QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit и QToolTip.

Если этот параметр не указан, он по умолчанию равен 0.

Пример:

QLineEdit {
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
}

См. также ширину границы и Модель области.

Этот параметр поддерживается подклассами QAbstractItemView, подклассами QAbstractSpinBox, QCheckBox, QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit и QToolTip.

Пример:

QLineEdit {
    border-width: 2px;
    border-style: solid;
    border-color: darkblue;
}

См. также цвет границы, радиус границы, стиль границы, изображение границы и Модель области.

Если этот параметр не указан, он по умолчанию соответствует значению, указанному в текущем стиле для стилистического подсказки SH_DialogButtonLayout.

Пример:

* { button-layout: 2 }

Если этот параметр равен 1, кнопки QDialogButtonBox отображают иконки; если 0, иконки не отображаются.

См. раздел Список иконок для получения информации о настройке иконок.

QDialogButtonBox { dialogbuttonbox-buttons-have-icons: 1; }

Примечание: Стили, определяющие этот параметр, должны применяться до создания QDialogButtonBox; это означает, что вы должны применить стиль к родительскому виджету или к самому приложению.

Пример:

QCheckBox { font-family: "New Century Schoolbook" }

Пример:

QTextEdit { font-style: italic }

Если этот параметр не указан, он по умолчанию принимает значение, заданное текущим стилем для стилевого подсказки SH_Table_GridLineColor.

Пример:

* { gridline-color: gray }

В настоящее время этот параметр поддерживается только виджетом QPushButton.

Примечание: Присвоение иконки кнопке (с использованием API QAbstractButton) является обязанностью приложения, а не стиля. Поэтому будьте осторожны при его установке, если ваш стиль ориентирован на конкретное приложение.

Доступно начиная с версии 5.15.

Параметр image принимает список Url или svg. Фактическое изображение, которое отображается, определяется с помощью того же алгоритма, что и QIcon (т. е.) изображение никогда не увеличивается в масштабе, а всегда уменьшается при необходимости. Если указан svg, изображение масштабируется до размера области содержимого.

Установка параметра image для подэлементов подразумевает установку ширины и высоты подэлемента (если изображение не в формате SVG).

В Qt 4.3 и более поздних версиях выравнивание изображения в прямоугольнике можно указать с помощью image-position.

Этот параметр предназначен только для подэлементов — для других элементов он не поддерживается.

Предупреждение: Для рендеринга изображений SVG необходим плагин SVG QIcon.

Пример:

// implicitly sets the size of down-button to the
// size of spindown.png
QSpinBox::down-button { image: url(:/images/spindown.png) }

Если position равно absolute, свойство left задаёт левую границу подэлемента относительно левой границы родителя (см. также subcontrol-origin).

Если этот параметр не указан, он по умолчанию равен 0.

Пример:

QSpinBox::down-button { left: 2px }

См. также right, top и bottom.

Если этот параметр не указан, он по умолчанию принимает значение, заданное текущим стилем для стилевого подсказки SH_LineEdit_PasswordMaskDelay.

Этот параметр был добавлен в Qt 5.4.

Пример:

* { lineedit-password-mask-delay: 1000 }

Этот параметр поддерживается подклассами QAbstractItemView, подклассами QAbstractSpinBox, QCheckBox, QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QRadioButton, QSizeGrip, QSpinBox, QSplitter, QStatusBar, QTextEdit и QToolTip.

Значение относится к области содержимого в модели бокса.

Пример:

QSpinBox { max-height: 24px }

См. также max-width.

Если этот параметр не указан, он по умолчанию принимает значение, заданное текущим стилем для стилевого подсказки SH_MessageBox_TextInteractionFlags.

Пример:

QMessageBox { messagebox-text-interaction-flags: 5 }

Этот параметр поддерживается подклассами QAbstractItemView, подклассами QAbstractSpinBox, QCheckBox, QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QRadioButton, QSizeGrip, QSpinBox, QSplitter, QStatusBar, QTextEdit и QToolTip.

Если этот параметр не задан, минимальная ширина определяется на основе содержимого виджета и стиля.

Значение относится к прямоугольнику содержимого в модели области.

Пример:

QComboBox { min-width: 72px }

См. также min-height.

Если position равен absolute, свойство right определяет правую границу подэлемента относительно правой границы родительского элемента (см. также subcontrol-origin).

Пример:

QSpinBox::down-button { right: 2px }

См. также left, top и bottom.

Этот параметр поддерживается всеми виджетами, которые учитывают QWidget::palette и которые отображают выделенный текст.

Если этот параметр не задан, значение по умолчанию — то, что установлено для роли HighlightedText палитры.

Пример:

QTextEdit { selection-color: white }

См. также selection-background-color и цвет.

Этот параметр поддерживается QCheckBox, проверяемыми QGroupBox, QMenuBar и QRadioButton.

Если этот параметр не задан, значение по умолчанию зависит от виджета и текущего стиля.

Пример:

QMenuBar { spacing: 10 }

См. также padding и margin.

Если это свойство не указано, оно по умолчанию принимает значение, зависящее от подэлемента.

Пример:

QSpinBox::down-button {
    image: url(:/images/spindown.png);
    subcontrol-origin: padding;
    subcontrol-position: right bottom;
}

См. также subcontrol-origin.

Если это свойство не указано, оно по умолчанию принимает значение, указанное в текущем стиле для подсказки стиля SH_Widget_Animation_Duration.

Это свойство было добавлено в Qt 5.10.

Пример:

* { widget-animation-duration: 100 }

Если это свойство не указано, оно по умолчанию принимает значение, зависящее от подэлемента/виджета и текущего стиля.

Предупреждение: Если не указано иное, это свойство не влияет на виджеты. Если вам нужен виджет с фиксированной шириной, установите min-width и max-width в одинаковое значение.

Пример:

QSpinBox::up-button { width: 12px }

См. также height.

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

Пример:

QTextEdit { background-position: bottom center }

Примеры:

QLabel { border-width: 1px }                    /* 1px 1px 1px 1px */
QLabel { border-width: 1px 2px }                /* 1px 2px 1px 2px */
QLabel { border-width: 1px 2px 3px }            /* 1px 2px 3px 2px */
QLabel { border-width: 1px 2px 3px 4px }        /* 1px 2px 3px 4px */

Примеры:

QLabel { border-color: red }                      /* opaque red */
QLabel { border-color: #FF0000 }                  /* opaque red */
QLabel { border-color: rgba(255, 0, 0, 75%) }     /* 75% opaque red */
QLabel { border-color: rgb(255, 0, 0) }           /* opaque red */
QLabel { border-color: rgb(100%, 0%, 0%) }        /* opaque red */
QLabel { border-color: hsv(60, 100%, 100%) }      /* opaque yellow */
QLabel { border-color: hsva(240, 255, 255, 75%) } /* 75% blue */
QLabel { border-color: hsl(60, 100%, 50%) }       /* opaque yellow */
QLabel { border-color: hsla(240, 255, 50%, 75%) } /* 75% blue */

Примечание: Разрешенные цвета RGB такие же, как и в CSS 2.1, перечисленные здесь.

Пример:

* {
    file-icon: url(file.png),
               url(file_selected.png) selected;
  }

QMessageBox {
    dialogbuttonbox-buttons-have-icons: true;
    dialog-ok-icon: url(ok.svg);
    dialog-cancel-icon: url(cancel.png),
                        url(grayed_cancel.png) disabled;
}

Например,

QPushButton { color: palette(dark); }

• repeat-x: Повторять по горизонтали.
• repeat-y: Повторять по вертикали.
• repeat: Повторять по горизонтали и вертикали.
• no-repeat: Не повторять.