Стиль Material

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

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

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

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

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

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

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

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

Примечание: Стиль Material не является родным стилем Android. Стиль Material — это реализация стиля Qt Quick Controls на 100% кроссплатформенная, которая следует рекомендациям 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 для получения дополнительной информации о файле конфигурации.

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

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

Зависимость

Стиль 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