Стиль Material

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

Прикреплённые свойства

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

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

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

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

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

Чтобы запустить приложение со стилем 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.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 импортирован в файл 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")
    }
}

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

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

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

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

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

• Стиль Qt Quick Controls 2