Универсальный стиль
Универсальный стиль основан на Руководстве по универсальному дизайну Microsoft. Подробнее...
| Оператор импорта: | import QtQuick.Controls.Universal 2.4 |
| С момента: | Qt 5.7 |
Прикреплённые свойства
- accent : цвет
- background : цвет
- foreground : цвет
- theme : перечисление
Прикреплённые методы
- цвет color(предварительно определённое перечисление)
Подробное описание
Универсальный стиль — это независимый от устройства стиль, основанный на Руководстве по универсальному дизайну Microsoft. Универсальный стиль разработан для хорошего отображения на всех устройствах, от телефонов и планшетов до ПК.
|
Универсальный стиль в светлой теме |
Универсальный стиль в тёмной теме |
Чтобы запустить приложение с универсальным стилем, см. Использование стилей в Qt Quick Controls 2.
Примечание: Универсальный стиль — это не собственный стиль Windows 10. Универсальный стиль — это реализация стиля Qt Quick Controls 2, на 100% кроссплатформенная, которая следует Руководству по универсальному дизайну Microsoft. Стиль работает на любой платформе и выглядит более или менее одинаково везде. Незначительные различия могут возникать из-за различий в доступных системных шрифтах и движках рендеринга шрифтов.
Настройка
Универсальный стиль позволяет настраивать четыре атрибута: theme, accent, foreground и background.
Оба атрибута можно указать для любого окна или элемента, и они автоматически передаются дочерним элементам аналогично шрифтам. В следующем примере окно и все три радиокнопки отображаются в тёмной теме с фиолетовым акцентным цветом:
import QtQuick 2.0
import QtQuick.Controls 2.1
import QtQuick.Controls.Universal 2.1
ApplicationWindow {
visible: true
Universal.theme: Universal.Dark
Universal.accent: Universal.Violet
Column {
anchors.centerIn: parent
RadioButton { text: qsTr("Small") }
RadioButton { text: qsTr("Medium"); checked: true }
RadioButton { text: qsTr("Large") }
}
} |
Помимо указания атрибутов в QML, их также можно указать через переменные среды или в файле конфигурации. Атрибуты, указанные в QML, имеют приоритет над всеми другими методами.
Файл конфигурации
| Переменная | Описание |
|---|---|
Theme |
Указывает значение по умолчанию темы Universal. Значение может быть одним из доступных тем, например "Dark". |
Accent |
Указывает цвет акцента по умолчанию Universal. Значение может быть любым цветом, но рекомендуется использовать один из предварительно определённых цветов Universal, например "Violet". |
Foreground |
Указывает цвет фона по умолчанию Universal. Значение может быть любым цветом или одним из предварительно определённых цветов Universal, например "Brown". |
Background |
Указывает цвет фона по умолчанию Universal. Значение может быть любым цветом или одним из предварительно определённых цветов Universal, например "Steel". |
Дополнительные сведения о файле конфигурации см. в Файле конфигурации Qt Quick Controls 2.
Переменные среды
| Переменная | Описание |
|---|---|
QT_QUICK_CONTROLS_UNIVERSAL_THEME |
Указывает значение по умолчанию темы Universal. Значение может быть одним из доступных тем, например "Dark". |
QT_QUICK_CONTROLS_UNIVERSAL_ACCENT |
Указывает цвет акцента по умолчанию Universal. Значение может быть любым цветом, но рекомендуется использовать один из предварительно определённых цветов Universal, например "Violet". |
QT_QUICK_CONTROLS_UNIVERSAL_FOREGROUND |
Указывает цвет фона по умолчанию Universal. Значение может быть любым цветом или одним из предварительно определённых цветов Universal, например "Brown". |
QT_QUICK_CONTROLS_UNIVERSAL_BACKGROUND |
Указывает цвет фона по умолчанию Universal. Значение может быть любым цветом или одним из предварительно определённых цветов Universal, например "Steel". |
Полный список поддерживаемых переменных среды см. в Поддерживаемые переменные среды в Qt Quick Controls 2.
Зависимость
Для доступа к атрибутам, специфичным для универсального стиля, необходимо отдельно импортировать универсальный стиль. Следует отметить, что независимо от ссылок на универсальный стиль, тот же код приложения работает с любым другим стилем. Атрибуты, специфичные для Universal, имеют эффект только при запуске приложения с универсальным стилем.
Если универсальный стиль импортирован в файл QML, который всегда загружается, универсальный стиль должен быть развернут вместе с приложением, чтобы приложение могло работать независимо от того, с каким стилем запущено приложение. С помощью выборщиков файлов можно применять изменения, специфичные для стиля, без создания жёсткой зависимости от стиля.
Предварительно определённые цвета Universal
Доступные предварительно определённые цвета:
| Константа | Описание |
|---|---|
Universal.Lime |
#A4C400 |
Universal.Green |
#60A917 |
Universal.Emerald |
#008A00 |
Universal.Teal |
#00ABA9 |
Universal.Cyan |
#1BA1E2 |
Universal.Cobalt |
#3E65FF (акцент по умолчанию) |
Universal.Indigo |
#6A00FF |
Universal.Violet |
#AA00FF |
Universal.Pink |
#F472D0 |
Universal.Magenta |
#D80073 |
Universal.Crimson |
#A20025 |
Universal.Red |
#E51400 |
Universal.Orange |
#FA6800 |
Universal.Amber |
#F0A30A |
Universal.Yellow |
#E3C800 |
Universal.Brown |
#825A2C |
Universal.Olive |
#6D8764 |
Universal.Steel |
#647687 |
Universal.Mauve |
#76608A |
Universal.Taupe |
#87794E |
См. также Стиль по умолчанию, Материальный стиль
Документация по прикреплённому свойству
Universal.accent : цвет
Это прикреплённое свойство хранит акцентный цвет темы. Свойство можно прикрепить к любому окну или элементу. Значение передаётся дочерним элементам.
Значение по умолчанию — Universal.Cobalt.
В следующем примере акцентный цвет выделенной кнопки изменён на Universal.Orange:
Button {
text: qsTr("Button")
highlighted: true
Universal.accent: Universal.Orange
} |
Примечание: Хотя акцент может быть любым цветом, рекомендуется использовать один из предварительно определённых цветов Universal, которые разработаны для совместной работы с остальной палитрой универсального стиля.
Universal.background : цвет
Это прикреплённое свойство хранит цвет фона темы. Свойство можно прикрепить к любому окну или элементу. Значение передаётся дочерним элементам.
Значение по умолчанию зависит от темы (светлая или тёмная).
В следующем примере цвет фона области изменён на Universal.Steel:
Pane {
Universal.background: Universal.Steel
Button {
text: qsTr("Button")
}
} |
Universal.foreground : color
Это присоединённое свойство содержит цвет переднего плана темы. Свойство может быть присоединено к любому окну или элементу. Значение распространяется на потомков.
Значение по умолчанию зависит от темы (светлая или тёмная).
В следующем примере цвет переднего плана кнопки установлен на Universal.Pink:
Button {
text: qsTr("Button")
Universal.foreground: Universal.Pink
} |
Universal.theme : перечисление
Это присоединённое свойство указывает, является ли тема светлой или тёмной. Свойство может быть присоединено к любому окну или элементу. Значение распространяется на потомков.
Доступные темы:
| Постоянная | Описание |
|---|---|
Universal.Light |
Светлая тема (по умолчанию) |
Universal.Dark |
Тёмная тема |
Universal.System |
Тема системы |
Установка темы на System выбирает светлую или тёмную тему в зависимости от цветов темы системы. Однако при чтении значения свойства темы оно никогда не будет System, а всегда будет актуальной темой.
В следующем примере тема для панели и кнопки установлена на Universal.Dark:
Pane {
Universal.theme: Universal.Dark
Button {
text: qsTr("Button")
}
} |
Документация по присоединённым методам
цвет color(перечисление predefined)
Этот присоединённый метод возвращает эффективное значение цвета указанного предварительно определённого цвета Universal.
Rectangle {
color: Universal.color(Universal.Red)
} Связанная информация
© The Qt Company Ltd
Licensed under the GNU Free Documentation License, Version 1.3.
https://doc.qt.io/archives/qt-5.11/qtquickcontrols2-universal.html