Стиль Material

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

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

• акцент : цвет
• фон : цвет
• высота : целое число
• передний план : цвет
• основной : цвет
• тема : перечисление

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

• цвет цвет(перечисление предопределенные, перечисление оттенок)

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

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

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

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

Настройка

Стиль Material позволяет настраивать пять атрибутов: тема, основной, акцент, передний план и фон.

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

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

Несмотря на то, что первичный и акцентный цвета могут быть любыми цветами, рекомендуется использовать один из предопределённых цветов, которые хорошо сочетаются с остальной палитрой стиля 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 : цвет

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

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

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

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

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

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

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

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

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

Pane {
    Material.theme: Material.Dark

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

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

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

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

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

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

• Стиль Qt Quick Controls 2