Материальный стиль

Материальный стиль основан на рекомендациях Google Material Design. Подробнее...

Присоединённые свойства

• accent : цвет
• background : цвет
• elevation : целое число
• foreground : цвет
• primary : цвет
• theme : перечисление

Присоединённые методы

• цвет color(перечисление predefined, перечисление shade)

Подробное описание

Материальный стиль основан на Руководстве Google по Material Design. Он обеспечивает единообразный опыт на различных платформах и размерах устройств.

Чтобы запустить приложение с материальным стилем, см. Использование стилей в Qt Quick Controls.

Настройка

Материальный стиль позволяет настроить пять атрибутов: theme, primary, accent, foreground и background.

Все атрибуты могут быть заданы для любого окна или элемента, и они автоматически передаются потомкам таким же образом, как и шрифты. В следующем примере окно и все три радиокнопки отображаются в тёмной теме с фиолетовым цветом акцента:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12

ApplicationWindow {
    visible: true

    Material.theme: Material.Dark
    Material.accent: Material.Purple

    Column {
        anchors.centerIn: parent

        RadioButton { text: qsTr("Small") }
        RadioButton { text: qsTr("Medium");  checked: true }
        RadioButton { text: qsTr("Large") }
    }
}

Помимо задания атрибутов в QML, их также можно задать через переменные среды или в файле конфигурации. Атрибуты, заданные в QML, имеют приоритет над всеми другими методами.

Файл конфигурации

См. Файл конфигурации Qt Quick Controls для получения более подробной информации о файле конфигурации.

Переменные среды

См. Поддерживаемые переменные среды в Qt Quick Controls для полного списка поддерживаемых переменных среды.

Зависимость

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

Если материальный стиль импортирован в файл QML, который всегда загружается, материальный стиль должен быть развернут с приложением, чтобы приложение могло запускаться независимо от того, с каким стилем оно запущено. С помощью селекторов файлов можно применять изменения, специфичные для стиля, без создания жёсткой зависимости от стиля.

Предварительно определённые цвета Material

Хотя значения primary и accent могут быть любыми цветами, рекомендуется использовать один из предварительно определённых цветов, которые хорошо сочетаются с остальной частью палитры Material Design:

Доступные предварительно определённые цвета:

При использовании тёмной темы по умолчанию используются разные оттенки предопределённых цветов:

Предопределённые оттенки

Существует несколько разных оттенков каждого предопределённого цвета, которые можно передать функции Material.color():

См. также Базовый стиль, Универсальный стиль

Варианты

Стиль Material также поддерживает плотный вариант, где элементы управления, такие как кнопки и делегаты, меньше по высоте и используют меньший размер шрифта. Рекомендуется использовать плотный вариант на настольных платформах, где мышь и клавиатура позволяют более точное и гибкое взаимодействие пользователя.

Чтобы использовать плотный вариант, установите переменную окружения QT_QUICK_CONTROLS_MATERIAL_VARIANT в Dense, или укажите Variant=Dense в файле qtquickcontrols2.conf. Значение по умолчанию в обоих случаях Normal.

Следующие изображения иллюстрируют различия между некоторыми элементами управления при использовании обычного и плотного вариантов:

Обратите внимание, что указанные выше высоты могут варьироваться в зависимости от различий в шрифтах на разных платформах.

Документация прикреплённого свойства

Material.accent : color

Это прикреплённое свойство содержит цвет акцента темы. Свойство может быть прикреплено к любому окну или элементу. Значение передаётся потомкам.

Значение по умолчанию Material.Pink.

В следующем примере цвет акцента выделенной кнопки изменён на Material.Orange:

Button {
    text: qsTr("Button")
    highlighted: true
    Material.accent: Material.Orange
}

Material.background : color

Это прикреплённое свойство содержит цвет фона темы. Свойство может быть прикреплено к любому окну или элементу. Значение передаётся потомкам.

Значение по умолчанию зависит от темы (светлая или тёмная).

В следующем примере цвет фона кнопки изменён на Material.Teal:

Button {
    text: qsTr("Button")
    highlighted: true
    Material.background: Material.Teal
}

Material.elevation : int

Это прикреплённое свойство содержит отступ элемента. Чем выше отступ, тем глубже тень. Свойство может быть прикреплено к любому элементу управления, но не все элементы управления отображают отступ.

Значение по умолчанию зависит от элемента управления.

В следующем примере отступ панели установлен на 6 для достижения внешнего вида повышенной карточки:

Pane {
    width: 120
    height: 120

    Material.elevation: 6

    Label {
        text: qsTr("I'm a card!")
        anchors.centerIn: parent
    }
}

Material.foreground : color

Это прикреплённое свойство содержит цвет переднего плана темы. Свойство может быть прикреплено к любому окну или элементу. Значение передаётся потомкам.

Значение по умолчанию зависит от темы (светлая или тёмная).

В следующем примере цвет переднего плана кнопки установлен на Material.Pink:

Button {
    text: qsTr("Button")
    Material.foreground: Material.Pink
}

Material.primary : color

Это прикреплённое свойство содержит основной цвет темы. Свойство может быть прикреплено к любому окну или элементу. Значение передаётся потомкам.

Основной цвет по умолчанию используется как цвет фона ToolBar.

Значение по умолчанию Material.Indigo.

Material.theme : перечисление

Это прикреплённое свойство указывает, является ли тема светлой или тёмной. Свойство может быть прикреплено к любому окну или элементу. Значение передаётся потомкам.

Доступные темы:

Установка темы на System выбирает светлую или тёмную тему в зависимости от цветов системы темы. Однако при чтении значения свойства темы значение никогда не равно System, а равно фактической теме.

В следующем примере тема для обеих панелей и кнопки установлена на Material.Dark:

Pane {
    Material.theme: Material.Dark

    Button {
        text: qsTr("Button")
    }
}

Attached Method Documentation

color color(enumeration predefined, enumeration shade)

Этот присоединённый метод возвращает эффективное значение цвета указанного предварительно определённого цвета Material, комбинированного с заданным оттенком. Если аргумент оттенка опущен, он по умолчанию равен Material.Shade500.

Rectangle {
    color: Material.color(Material.Red)
}

Связанная информация

• Стиль Qt Quick Controls