Стиль Material

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

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

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

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

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

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

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

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

Примечание: Стиль Material не является родным стилем Android. Стиль Material — это 100% кроссплатформенная реализация стиля Qt Quick Controls 2, следующая рекомендациям Google Material Design. Стиль работает на любой платформе и выглядит более или менее одинаково везде. Незначительные различия могут возникнуть из-за различий в доступных системных шрифтах и ​​движках рендеринга шрифтов.

Настройка

Стиль Material позволяет настраивать пять атрибутов: 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 2 для получения более подробной информации о файле конфигурации.

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

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

Зависимость

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

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

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

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

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

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

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

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

См. также Стиль по умолчанию, Универсальный стиль

Варианты

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

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

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

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

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

Material.accent : цвет

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

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

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

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

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

Material.background : цвет

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

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

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

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

Material.elevation : целое число

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

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

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

Pane {
    width: 120
    height: 120

    Material.elevation: 6

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

Material.foreground : цвет

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

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

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

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

Material.primary : цвет

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

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

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

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

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

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

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

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

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

Pane {
    Material.theme: Material.Dark

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

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

цвет цвет(перечисление предварительно определённый, перечисление оттенок)

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

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

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

• Стилевое оформление Qt Quick Controls 2