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