![]() |
Главная · Все классы · Основные классы · Классы по группам · Модули · Функции | ![]() |
[Предыдущая: Руководство по таблицам стилей Qt] [Содержание]
Рассмотрим несколько примеров как начать работать с таблицами стилей Qt.
Начнем с того, что установим желтый цвет в качестве фона во всех объектах QLineEdit приложения. Этого можно достичь следующим образом:
qApp->setStyleSheet("QLineEdit { background-color: yellow }");
Если мы хотим применить свойство только к объектам QLineEdit, которые являются потомками (или потоками потомков или потомками потомков потомков) заданного диалога, будет лучше сделать это так:
myDialog->setStyleSheet("QLineEdit { background-color: yellow }");
Если мы хотим применить свойство только к одному заданному QLineEdit, мы можем передать его имя используя QObject::setObjectName() и использовать селектор идентификатора (ID) чтобы сослаться на него:
myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");
В качестве альтернативы, мы можем установить свойство background-color непосредственно на QLineEdit, пропустив селектор:
nameEdit->setStyleSheet("background-color: yellow");
Чтобы обеспечить приятный контраст мы также установим подходящий цвет для текста:
nameEdit->setStyleSheet("color: blue; background-color: yellow");
Также хорошей идеей будет поменять цвет, используемый для выделенного текста:
nameEdit->setStyleSheet("color: blue;" "background-color: yellow;" "selection-color: yellow;" "selection-background-color: blue;");
Имеется множество ситуаций, в которых нам необходима форма с обязательными (mandatory) полями. Чтобы показать пользователю что поле является обязательным одним из эффективных решений (хотя и эстетически сомнительным) является использование в качестве фона таких полей желтого цвета. Оказывается, это очень легко реализовать используя таблицы стилей Qt. Прежде всего, мы будем использовать следующую таблицу стилей приложения:
*[mandatoryField="true"] { background-color: yellow }
Это означает, что каждый виджет, у которого свойство Qt mandatoryField равно true, будет иметь желтый цвет фона.
Далее, для каждого обязательного поля виджета мы просто создаём "на лету" свойство mandatoryField и устанавливаем его равным true. Например:
QLineEdit *nameEdit = new QLineEdit(this); nameEdit->setProperty("mandatoryField", true); QLineEdit *emailEdit = new QLineEdit(this); emailEdit->setProperty("mandatoryField", true); QSpinBox *ageSpinBox = new QSpinBox(this); ageSpinBox->setProperty("mandatoryField", true);
А сейчас мы покажем как создать кнопку QPushButton красного цвета. Эта кнопка QPushButton будет, предположительно, соединена с очень разрушительным участком кода.
Сначала мы склонялись к использованию следующей таблицы стилей:
QPushButton#evilButton { background-color: red }
Однако результат удручает - плоская кнопка без рамки:
А происходит вот что:
Давайте исправим ситуацию, установив рамку:
QPushButton#evilButton { background-color: red; border-style: outset; border-width: 2px; border-color: beige; }
Так гораздо лучше. Но кнопка выглядит немного сплющенной. Установим небольшой интервал между рамкой и текстом используя заполнение. Кроме того, принудительно установим минимальную ширину, закругление углов и зададим более крупный шрифт, чтобы кнопка выглядела получше:
QPushButton#evilButton { background-color: red; border-style: outset; border-width: 2px; border-radius: 10px; border-color: beige; font: bold 14px; min-width: 10em; padding: 6px; }
Единственной проблемой остается отсутствие реакции кнопки при нажатии на нее. Исправим это, указав слегка другой цвет фона и использование другого стиля рамки.
QPushButton#evilButton { background-color: red; border-style: outset; border-width: 2px; border-radius: 10px; border-color: beige; font: bold 14px; min-width: 10em; padding: 6px; } QPushButton#evilButton:pressed { background-color: rgb(224, 0, 0); border-style: inset; }
Субэлементы управления предоставляют доступ к субэлементам виджета. Например, связанная с меню кнопка QPushButton (используя QPushButton::setMenu()) обладает индикатором меню. Настроим индикатор меню для кнопки красного цвета:
QPushButton#evilButton::menu-indicator { image: url(myindicator.png); }
По умолчанию, индикатор меню располагается в верхнем правом углу прямоугольника заполнения (padding rectangle). Мы можем изменить расположение, указав свойства subcontrol-position и subcontrol-origin для якоря (anchor) индикатора. Также можно использовать свойства top и left чтобы сместить индикатор на несколько пикселов. Например:
QPushButton::menu-indicator { image: url(myindicator.png); subcontrol-position: right center; subcontrol-origin: padding; left: -2px; }
При этом изображение myindicator.png располагается в кнопке QPushButton справа по центру прямоугольника заполнения (для получения дополнительной информации смотрите subcontrol-origin).
Так как нашим предпочтительным цветом похоже стал красный, сделаем текст в QLineEdit красного цвета с помощью установки следующей таблицы стилей приложения:
QLineEdit { color: red }
Однако мы хотим получить визуальный признак того, что QLineEdit только для чтения, сделав его серым:
QLineEdit { color: red } QLineEdit[readOnly="true"] { color: gray }
В какой-то момент наша команда проектирования пришла к необходимости, чтобы все объекты QLineEdit в регистрационной форме (с именем объекта registrationDialog) были коричневого цвета:
QLineEdit { color: red } QLineEdit[readOnly="true"] { color: gray } #registrationDialog QLineEdit { color: brown }
Спустя несколько встреч проектировщиков пользовательского интерфейса мы решили, что все наши объекты QDialog должны иметь объекты QLineEdit окрашенные в коричневый цвет:
QLineEdit { color: red } QLineEdit[readOnly="true"] { color: gray } QDialog QLineEdit { color: brown }
Контрольный вопрос: Что произойдет если у нас есть поле редактирования QLineEdit только для чтения в QDialog? [Подсказка: В вышеприведенном разделе Разрешения конфликтов разъясняется, что происходит в подобных случаях.]
Данный раздел предоставляет примеры настройки специфичных виджетов с использованием таблиц стилей.
Фон любого объекта QAbstractScrollArea (Представления элементов, QTextEdit и QTextBrowser) может быть установлен используя свойства фона. Например, чтобы установить фоновое изображение (background-image), прокручиваемое одновременно с полосой прокрутки:
QTextEdit, QListView { background-color: white; background-image: url(draft.png); background-attachment: scroll; }
Если фоновое изображение ограничено окном просмотра:
QTextEdit, QListView { background-color: white; background-image: url(draft.png); background-attachment: fixed; }
Стилизовать QCheckBox почти так же как и QRadioButton. Основная разница заключается в том, что QCheckBox с тремя состояниями имеет неопределенное состояние.
QCheckBox { spacing: 5px; } QCheckBox::indicator { width: 13px; height: 13px; } QCheckBox::indicator:unchecked { image: url(:/images/checkbox_unchecked.png); } QCheckBox::indicator:unchecked:hover { image: url(:/images/checkbox_unchecked_hover.png); } QCheckBox::indicator:unchecked:pressed { image: url(:/images/checkbox_unchecked_pressed.png); } QCheckBox::indicator:checked { image: url(:/images/checkbox_checked.png); } QCheckBox::indicator:checked:hover { image: url(:/images/checkbox_checked_hover.png); } QCheckBox::indicator:checked:pressed { image: url(:/images/checkbox_checked_pressed.png); } QCheckBox::indicator:indeterminate:hover { image: url(:/images/checkbox_indeterminate_hover.png); } QCheckBox::indicator:indeterminate:pressed { image: url(:/images/checkbox_indeterminate_pressed.png); }
Рассмотрим пример, когда кнопка выпадающего списка QComboBox появляется "объединенной" (merged) с рамкой комбинированного списка выбора.
QComboBox { border: 1px solid gray; border-radius: 3px; padding: 1px 18px 1px 3px; min-width: 6em; } QComboBox:editable { background: white; } QComboBox:!editable, QComboBox::drop-down:editable { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3); } /* QComboBox получает состояние "on" когда выпадающий список раскрыт */ QComboBox:!editable:on, QComboBox::drop-down:editable:on { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #D3D3D3, stop: 0.4 #D8D8D8, stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1); } QComboBox:on { /* сдвиг текста когда выпадающий список раскрывается */ padding-top: 3px; padding-left: 4px; } QComboBox::drop-down { subcontrol-origin: padding; subcontrol-position: top right; width: 15px; border-left-width: 1px; border-left-color: darkgray; border-left-style: solid; /* только одна линия */ border-top-right-radius: 3px; /* тот же радиус закругления что и у QComboBox */ border-bottom-right-radius: 3px; } QComboBox::down-arrow { image: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png); } QComboBox::down-arrow:on { /* сдвиг стрелки когда выпадающий список раскрывается */ top: 1px; left: 1px; }
Выпадающий список в QComboBox - это QAbstractItemView и стиль к нему применяется с использованием селектора потомка (descendant selector):
QComboBox QAbstractItemView { border: 2px solid darkgray; selection-background-color: lightgray; }
QSpinBox можно полностью настроить как изложено ниже (таблица стилей имеет однострочные комментарии):
QSpinBox { padding-right: 15px; /* создаем место для стрелок */ border-image: url(:/images/frame.png) 4; border-width: 3; } QSpinBox::up-button { subcontrol-origin: border; subcontrol-position: top right; /* позиция - в верхнем правом углу */ width: 16px; /* 16 + 2*1px border-width = 15px заполнителя + 3px границы родителя */ border-image: url(:/images/spinup.png) 1; border-width: 1px; } QSpinBox::up-button:hover { border-image: url(:/images/spinup_hover.png) 1; } QSpinBox::up-button:pressed { border-image: url(:/images/spinup_pressed.png) 1; } QSpinBox::up-arrow { image: url(:/images/up_arrow.png); width: 7px; height: 7px; } QSpinBox::up-arrow:disabled, QSpinBox::up-arrow:off { /* выключенное состояние когда достигнуто максимально значение */ image: url(:/images/up_arrow_disabled.png); } QSpinBox::down-button { subcontrol-origin: border; subcontrol-position: bottom right; /* позиция - в нижнем правом углу */ width: 16px; border-image: url(:/images/spindown.png) 1; border-width: 1px; border-top-width: 0; } QSpinBox::down-button:hover { border-image: url(:/images/spindown_hover.png) 1; } QSpinBox::down-button:pressed { border-image: url(:/images/spindown_pressed.png) 1; } QSpinBox::down-arrow { image: url(:/images/down_arrow.png); width: 7px; height: 7px; } QSpinBox::down-arrow:disabled, QSpinBox::down-arrow:off { /* выключенное состояние когда достигнуто минимальное значение */ image: url(:/images/down_arrow_disabled.png); }
Стиль к QFrame'у применяется с использованием Модели "коробки".
QFrame, QLabel, QToolTip { border: 2px solid green; border-radius: 4px; padding: 2px; background-image: url(images/welcome.png); }
Взглянем на пример, в котором заголовок QGroupBox'а смещается в центр.
QGroupBox { background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E0E0E0, stop: 1 #FFFFFF); border: 2px solid gray; border-radius: 5px; margin-top: 1ex; /* оставляем пространство вверху для заголовка */ } QGroupBox::title { subcontrol-origin: margin; subcontrol-position: top center; /* помещаем вверху по центру */ padding: 0 3px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FFOECE, stop: 1 #FFFFFF); }
Для QGroupBox, который можно отмечать, используйте субэлемент управления {#indicator-sub}{::indicator} и применяйте стиль к нему в точности как и для QCheckBox (т.е.)
QGroupBox::indicator {
width: 13px;
height: 13px;
}
QGroupBox::indicator:unchecked {
image: url(:/images/checkbox_unchecked.png);
}
/* продолжение такое же как и для применения стиля к QCheckBox */
QHeaderView настраивается следующим образом:
QHeaderView::section {
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
stop:0 #616161, stop: 0.5 #505050,
stop: 0.6 #434343, stop:1 #656565);
color: white;
padding-left: 4px;
border: 1px solid #6c6c6c;
}
/* стиль индикатора сортировки */
QHeaderView::down-arrow {
image: url(down_arrow.png);
}
QHeaderView::up-arrow {
image: url(up_arrow.png);
}
Стиль к рамке поля редактирования QLineEdit применяется с использованием Модели "коробки". Для создания однострочного поля редактирования с закругленными углами мы можем установить:
QLineEdit { border: 2px solid gray; border-radius: 10px; padding: 0 8px; background: yellow; selection-background-color: darkgray; }
Символ для ввода пароля в однострочных полях редактирования у которых имеется QLineEdit::Password режим "эха" можно установить:
QLineEdit[echoMode="2"] { lineedit-password-character: 9679; }
Фон для поля редактирования QLineEdit только для чтения можно изменить следующим образом:
QLineEdit:read-only { background: lightblue;
Стиль применяется к отдельным пунктам меню QMenu используя субэлемент управления 'item' следующим образом:
QMenu { background-color: #ABABAB; /* устанавливаем фон меню */ border: 1px solid black; } QMenu::item { /* устанавливаем фон пункта меню. установите его во что-нибудь непрозрачное если вы хотите чтобы цвет меню отличался от цвета пункта меню */ background-color: transparent; } QMenu::item:selected { /* когда пользователь выбирает пункт с помощью мыши или клавиатуры */ background-color: #654321; }
Для более глубокой настройки используйте таблицу стилей как изложено ниже:
QMenu { background-color: white; margin: 2px; /* немного пространства вокруг меню */ } QMenu::item { padding: 2px 25px 2px 20px; border: 1px solid transparent; /* резерв пространства для границы выделения */ } QMenu::item:selected { border-color: darkblue; background: rgba(100, 100, 100, 150); } QMenu::icon:checked { /* внешний вид пиктограммы 'отмечено' */ background: gray; border: 1px inset gray; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; } QMenu::separator { height: 2px; background: lightblue; margin-left: 10px; margin-right: 5px; } QMenu::indicator { width: 13px; height: 13px; } /* невзаимоисключающий индикатор = индикатор стиля флажка (смотрите QActionGroup::setExclusive) */ QMenu::indicator:non-exclusive:unchecked { image: url(:/images/checkbox_unchecked.png); } QMenu::indicator:non-exclusive:unchecked:selected { image: url(:/images/checkbox_unchecked_hover.png); } QMenu::indicator:non-exclusive:checked { image: url(:/images/checkbox_checked.png); } QMenu::indicator:non-exclusive:checked:selected { image: url(:/images/checkbox_checked_hover.png); } /* взаимоисключающий индикатор = индикатор стиля радиокнопки (смотрите QActionGroup::setExclusive) */ QMenu::indicator:exclusive:unchecked { image: url(:/images/radiobutton_unchecked.png); } QMenu::indicator:exclusive:unchecked:selected { image: url(:/images/radiobutton_unchecked_hover.png); } QMenu::indicator:exclusive:checked { image: url(:/images/radiobutton_checked.png); } QMenu::indicator:exclusive:checked:selected { image: url(:/images/radiobutton_checked_hover.png); }
Стиль к QMenuBar применяется как изложено ниже:
QMenuBar { background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 lightgray, stop:1 darkgray); } QMenuBar::item { spacing: 3px; /* интервал между пунктами меню */ padding: 1px 4px; background: transparent; border-radius: 4px; } QMenuBar::item:selected { /* когда выделено с помощью мыши или клавиатуры */ background: #a8a8a8; } QMenuBar::item:pressed { background: #888888; }
Используя таблицы стилей можно настроить субэлементы управления QProgressBar'а border, chunk и text-align. Однако, если одно свойство или субэлемент управления настраивается, все остальные свойства или субэлементы управления также должны настраиваться.
Например, изменим цвет border на серый, а chunk - на лазурный.
QProgressBar { border: 2px solid grey; border-radius: 5px; } QProgressBar::chunk { background-color: #05B8CC; width: 20px; }
Остался text-align, который мы настроим расположив текст по центру индикатора выполнения.
QProgressBar { border: 2px solid grey; border-radius: 5px; text-align: center; }
Можно включить свойство margin чтобы получить более видимые чанки (chunks).
На вышеприведенном снимке экрана мы используем margin равный 0.5 пикселя.
QProgressBar::chunk { background-color: #CD96CD; width: 10px; margin: 0.5px; }
Стиль к QPushButton применяется как указано ниже:
QPushButton { border: 2px solid #8f8f91; border-radius: 6px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f6f7fa, stop: 1 #dadbde); min-width: 80px; } QPushButton:pressed { background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #dadbde, stop: 1 #f6f7fa); } QPushButton:flat { border: none; /* для плоской кнопки границы нет */ } QPushButton:default { border-color: navy; /* делаем кнопку по умолчанию выпуклой */ }
Для кнопки QPushButton с меню используйте субэлемент управления ::menu-indicator.
QPushButton:open { /* когда собственное меню кнопки раскрыто */ background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #dadbde, stop: 1 #f6f7fa); } QPushButton::menu-indicator { image: url(menu_indicator.png); subcontrol-origin: padding; subcontrol-position: bottom right; } QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open { position: relative; top: 2px; left: 2px; /* сдвигаем стрелку на 2 px */ }
У кнопки QPushButton, которую можно отметить, установлено псевдо-состояние :checked.
Индикатор радиокнопки QRadioButton можно изменить используя:
QRadioButton::indicator { width: 13px; height: 13px; } QRadioButton::indicator::unchecked { image: url(:/images/radiobutton_unchecked.png); } QRadioButton::indicator:unchecked:hover { image: url(:/images/radiobutton_unchecked_hover.png); } QRadioButton::indicator:unchecked:pressed { image: url(:/images/radiobutton_unchecked_pressed.png); } QRadioButton::indicator::checked { image: url(:/images/radiobutton_checked.png); } QRadioButton::indicator:checked:hover { image: url(:/images/radiobutton_checked_hover.png); } QRadioButton::indicator:checked:pressed { image: url(:/images/radiobutton_checked_pressed.png); }
Применить стиль к QScrollBar можно используя его субэлементы управления, например, handle, add-line, sub-line и так далее. Обратите внимание на то, что если одно свойство или субэлемент управления настраивается, то все остальные свойства или субэлементы управления также должны настраиваться.
К приведенной выше полосе прокрутки был применен стиль аквамаринового цвета со сплошной серой границей.
QScrollBar:horizontal { border: 2px solid grey; background: #32CC99; height: 15px; margin: 0px 20px 0 20px; }
QScrollBar::handle:horizontal { background: white; min-width: 20px; }
QScrollBar::add-line:horizontal { border: 2px solid grey; background: #32CC99; width: 20px; subcontrol-position: right; subcontrol-origin: margin; } QScrollBar::sub-line:horizontal { border: 2px solid grey; background: #32CC99; width: 20px; subcontrol-position: left; subcontrol-origin: margin; }
Кнопки left-arrow и right-arrow имеют сплошную границу серого цвета с белым фоном. В качестве альтернативы, вы можете также встроить в стрелки изображение.
QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal { border: 2px solid grey; width: 3px; height: 3px; background: white; } QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal { background: none; }
Если вы хотите расположить рядом друг с другом кнопки прокрутки на полосе прокрутки (вместо расположения их по краям) как в Mac OS X, вы можете использовать следующую таблицу стилей:
QScrollBar:horizontal { border: 2px solid green; background: cyan; height: 15px; margin: 0px 40px 0 0px; } QScrollBar::handle:horizontal { background: gray; min-width: 20px; } QScrollBar::add-line:horizontal { background: blue; width: 16px; subcontrol-position: right; subcontrol-origin: margin; border: 2px solid black; } QScrollBar::sub-line:horizontal { background: magenta; width: 16px; subcontrol-position: top right; subcontrol-origin: margin; border: 2px solid black; position: absolute; right: 20px; } QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal { width: 3px; height: 3px; background: pink; } QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal { background: none; }
Полоса прокрутки, использующая приведенную выше таблицу стилей, выглядит примерно так:
Обычно применение стиля к QSizeGrip заключается только в установке изображения.
QSizeGrip { image: url(:/images/sizegrip.png); width: 16px; height: 16px; }
Вы можете применить стиль к горизонтальному ползунку как изложено ниже:
QSlider::groove:horizontal { border: 1px solid #999999; height: 8px; /* по умолчанию бороздка расширяется до размеров ползунка. задав высоту она принимает фиксированный размер */ background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4); margin: 2px 0; } QSlider::handle:horizontal { background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f); border: 1px solid #5c5c5c; width: 18px; margin: -2px 0; /* рукоятка располагается по умолчанию в прямоугольнике содержимого бороздки. Расширяется наружу от бороздки */ border-radius: 3px; }
Если вы хотите изменить цвет частей ползунка до и после рукоятки, можете использовать субэлементы управления add-page и sub-page. Например, для вертикального ползунка:
QSlider::groove:vertical { background: red; position: absolute; /* абсолютная позиция в 4px слева и справа от виджета. установка полей виджета также будет работать... */ left: 4px; right: 4px; } QSlider::handle:vertical { height: 10px; background: green; margin: 0 -4px; /* расширяется наружу от бороздки */ } QSlider::add-page:vertical { background: white; } QSlider::sub-page:vertical { background: pink; }
QSplitter получен от QFrame и поэтому к нему можно применить стиль также, как к QFrame. Метку-манипулятор или рукоятку можно настроить используя субэлемент управления ::handle.
QSplitter::handle { image: url(images/splitter.png); } QSplitter::handle:horizontal { height: 2px; } QSplitter::handle:vertical { width: 2px; }
Мы можем предоставить фон для строки состояния и границу для элементов внутри нее как изложено ниже:
QStatusBar { background: brown; } QStatusBar::item { border: 1px solid red; border-radius: 3px; }
Обратите внимание на то, что применять стиль к виджетам, которые добавляются в QStatusBar, можно используя декларацию потомка (т.е.)
QStatusBar QLabel { border: 3px solid white; }
Для снимка экрана выше необходима таблица стилей как изложено ниже:
QTabWidget::pane { /* Рамка виджета со вкладками */ border-top: 2px solid #C2C7CB; } QTabWidget::tab-bar { left: 5px; /* сдвигаем вправо на 5px */ } /* Применяем стиль ко вкладке используя субэлемент управления tab. Обратите внимание на то, что оно читается как QTabBar, а _не_ QTabWidget */ QTabBar::tab { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3); border: 2px solid #C4C4C3; border-bottom-color: #C2C7CB; /* такой же цвет как у панели */ border-top-left-radius: 4px; border-top-right-radius: 4px; min-width: 8ex; padding: 2px; } QTabBar::tab:selected, QTabBar::tab:hover { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #fafafa, stop: 0.4 #f4f4f4, stop: 0.5 #e7e7e7, stop: 1.0 #fafafa); } QTabBar::tab:selected { border-color: #9B9B9B; border-bottom-color: #C2C7CB; /* такой же цвет как у панели */ } QTabBar::tab:!selected { margin-top: 2px; /* делаем невыбранные вкладки меньше */ }
Часто необходимо, чтобы вкладки перекрывались как показано ниже:
Для вышеприведенного виджета со вкладками мы воспользовались отрицательными полями. Результирующая таблица стилей выглядит так:
QTabWidget::pane { /* Рамка виджета со вкладками */ border-top: 2px solid #C2C7CB; } QTabWidget::tab-bar { left: 5px; /* сдвигаем вправо на 5px */ } /* Применяем стиль ко вкладке используя субэлемент управления tab. Обратите внимание на то, что оно читается как QTabBar, а _не_ QTabWidget */ QTabBar::tab { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3); border: 2px solid #C4C4C3; border-bottom-color: #C2C7CB; /* такой же цвет как у панели */ border-top-left-radius: 4px; border-top-right-radius: 4px; min-width: 8ex; padding: 2px; } QTabBar::tab:selected, QTabBar::tab:hover { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #fafafa, stop: 0.4 #f4f4f4, stop: 0.5 #e7e7e7, stop: 1.0 #fafafa); } QTabBar::tab:selected { border-color: #9B9B9B; border-bottom-color: #C2C7CB; /* такой же цвет как у панели */ } QTabBar::tab:!selected { margin-top: 2px; /* делаем невыбранные вкладки меньше */ } /* воспользуемся отрицательными полями для перекрывания вкладок */ QTabBar::tab:selected { /* расширение/перекрытие слева и справа по 4px */ margin-left: -4px; margin-right: -4px; } QTabBar::tab:first:selected { margin-left: 0; /* первая выбранная вкладка ничего не перекрывает слева от себя */ } QTabBar::tab:last:selected { margin-right: 0; /* последняя выбранная вкладка ничего не перекрывает справа от себя */ } QTabBar::tab:only-one { margin: 0; /* если имеется только одна вкладка, перекрывающиеся поля не нужны */ }
Чтобы переместить панель вкладок в середину (как показано ниже), необходима следующая таблица стилей:
QTabWidget::pane { /* Рамка виджета со вкладками */ border-top: 2px solid #C2C7CB; position: absolute; top: -0.5em; } QTabWidget::tab-bar { alignment: center; } /* Применяем стиль ко вкладке используя субэлемент управления tab. Обратите внимание на то, что оно читается как QTabBar, а _не_ QTabWidget */ QTabBar::tab { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3); border: 2px solid #C4C4C3; border-bottom-color: #C2C7CB; /* такой же цвет как у панели */ border-top-left-radius: 4px; border-top-right-radius: 4px; min-width: 8ex; padding: 2px; } QTabBar::tab:selected, QTabBar::tab:hover { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #fafafa, stop: 0.4 #f4f4f4, stop: 0.5 #e7e7e7, stop: 1.0 #fafafa); } QTabBar::tab:selected { border-color: #9B9B9B; border-bottom-color: #C2C7CB; /* такой же цвет как у панели */ }
Индикатор разрыва (tear) и кнопки прокрутки могут быть в дальнейшем настроены как изложено ниже:
QTabBar::tear { image: url(tear_indicator.png); } QTabBar::scroller { /* ширина кнопок прокрутки */ width: 20px; } QTabBar QToolButton { /* кнопки прокрутки - инструментальные кнопки */ border-image: url(scrollbutton.png) 2; border-width: 2px; } QTabBar QToolButton::right-arrow { /* значок стрелки в инструментальной кнопке */ image: url(rightarrow.png); } QTabBar QToolButton::left-arrow { image: url(leftarrow.png); }
Допустим, нам понравится если выбранные элементы в QTableWidget будут иметь фоновым изображением пузырьки, чей цвет постепенно меняется от розового к белому.
Это возможно с помощью свойства selection-background-color и необходимого синтаксиса:
QTableWidget { selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0.5, stop: 0 #FF92BB, stop: 1 white); }
Угловой виджет может быть настроен используя следующую таблицу стилей:
QTableWidget QTableCornerButton::section { background: red; border: 2px outset red; }
Фон и рукоятка QToolBar настраивается как изложено ниже:
QToolBar {
background: red;
spacing: 3px; /* интервал между элементами в панели инструментов */
}
QToolBar::handle {
image: url(handle.png);
}
Вкладки в QToolBox настраиваются используя субэлемент управления 'tab'.
QToolBox::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border-radius: 5px;
color: darkgray;
}
QToolBox::tab:selected { /* выбранные вкладки выделяются курсивом */
font: italic;
color: white;
}
Имеются три типа инструментальных кнопок QToolButton.
QToolButton { /* все типы инструментальных кнопок */ border: 2px solid #8f8f91; border-radius: 6px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f6f7fa, stop: 1 #dadbde); } QToolButton[popupMode="1"] { /* только для MenuButtonPopup */ padding-right: 20px; /* выделяем место для кнопки выпадающего списка */ } QToolButton:pressed { background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #dadbde, stop: 1 #f6f7fa); } /* нижеприведенные субэлементы управления используются только в режиме MenuButtonPopup */ QToolButton::menu-button { border: 2px solid gray; border-top-right-radius: 6px; border-bottom-right-radius: 6px; /* 16px ширины + 4px для границы = 20px распределено выше */ width: 16px; } QToolButton::menu-arrow { image: url(downarrow.png); } QToolButton::menu-arrow:open { top: 1px; left: 1px; /* слегка сдвинем */ }
QToolTip настраивается точно также как QLabel. Кроме того, для платформ поддерживающих это, для настройки прозрачности можно использовать свойство opacity.
Например,
QToolTip { border: 2px solid darkkhaki; padding: 5px; border-radius: 3px; opacity: 200; }
Стиль к ветвям QTreeView применяется с использованием субэлемента управления ::branch. Следующая таблица стилей кодирует цветами различные состояния при отрисовке ветви.
QTreeView::branch { background: palette(base); } QTreeView::branch:has-siblings:!adjoins-item { background: cyan; } QTreeView::branch:has-siblings:adjoins-item { background: red; } QTreeView::branch:!has-children:!has-siblings:adjoins-item { background: blue; } QTreeView::branch:closed:has-children:has-siblings { background: pink; } QTreeView::branch:has-children:!has-siblings:closed { background: gray; } QTreeView::branch:open:has-children:has-siblings { background: magenta; } QTreeView::branch:open:has-children:!has-siblings { background: green; }
Красочно, однако более полезный пример можно сделать используя следующие изображения:
![]() | ![]() | ![]() | ![]() | ![]() |
vline.png | branch-more.png | branch-end.png | branch-closed.png | branch-open.png |
QTreeView::branch:has-siblings:!adjoins-item { border-image: url(vline.png) 0; } QTreeView::branch:has-siblings:adjoins-item { border-image: url(branch-more.png) 0; } QTreeView::branch:!has-children:!has-siblings:adjoins-item { border-image: url(branch-end.png) 0; } QTreeView::branch:has-children:!has-siblings:closed, QTreeView::branch:closed:has-children:has-siblings { border-image: none; image: url(branch-closed.png); } QTreeView::branch:open:has-children:!has-siblings, QTreeView::branch:open:has-children:has-siblings { border-image: none; image: url(branch-open.png); }
Результирующее представление дерева выглядит так:
Смотрите также Пример таблицы стилей, Поддерживаемое подмножество HTML и QStyle.
[Предыдущая: Руководство по таблицам стилей Qt] [Содержание]
Copyright © 2008 Trolltech | Торговые марки | Qt 4.3.5 |