Стиль 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, которая следует Руководству по Material Design от Google. Стиль работает на любой платформе и выглядит более или менее одинаково повсюду. Незначительные различия могут возникнуть из-за различий в доступных системных шрифтах и ​​движках рендеринга шрифтов.

Настройка

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

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

import QtQuick 2.0
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1

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.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