Стиль Imagine

Стиль Imagine основан на настраиваемых графических ресурсах. Подробнее...

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

• путь : строка

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

Стиль Imagine основан на графических ресурсах. Стиль поставляется с набором по умолчанию, но изображения легко можно изменить, предоставив каталог с изображениями, используя предопределенную систему именования.

Стиль Imagine с изображениями по умолчанию

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

Имена файлов

Файлы изображений имеют следующее соглашение об именовании:

<control>-<element>-<states>

Разделы <control> и <element> обязательны, но раздел <states> — необязателен. Например, если для кнопки предоставлен один файл под названием "button-background.9.png", он будет использоваться для каждого состояния, которое Button поддерживает. Разработчик сам решает, для каких состояний предоставлять изображения. Однако рекомендуется предоставлять изображения для наиболее распространённых состояний элементов управления, таких как disabled, pressed, и т. д. Это обеспечит интерактивное поведение элементов управления, ожидаемое конечным пользователем.

Ссылка на элемент

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

Примеры активов

В следующей таблице приведены примеры активов (взятых из активов стиля Imagine по умолчанию) для всех элементов управления. Список не является исчерпывающим, поскольку не все элементы нуждаются в активах, но он может служить руководством при создании собственных активов.

¹ Изображение 1x1, содержащее один цвет, растягивается для заполнения элемента управления.

Изображения 9-панели

Стиль Imagine использует изображения 9-панели, чтобы дать дизайнерам контроль над тем, как конкретный элемент реагирует на изменение размера. Вот пример изображения 9-панели, представляющего фон кнопки, наряду с увеличенным вариантом (чтобы было проще увидеть линии 9-панели):

Содержание изображения имеет ширину 44 пикселя и высоту 32 пикселя. Каждое изображение 9-панели должно иметь линию толщиной в один пиксель (объединённые «линии 9-панели») вокруг каждой стороны, поэтому фактический размер изображения становится 46 пикселей в ширину и 34 пикселя в высоту. Обратите внимание, что линии 9-панели должны быть толщиной в один пиксель независимо от целевого DPI изображения. Например, линии 9-панели для button-background.9.png и button-background@2x.9.png должны быть толщиной в один пиксель.

Линии 9-панели должны быть чёрными, а остальные области — прозрачными или белыми:

Растяжимые области

Линии 9-панели по верхнему и левому краям определяют, какие части изображения растягиваются при изменении размера.

Ниже приведены примеры изменения размера изображения 9-панели до полуторакратного его исходного размера в различных измерениях:

Обратите внимание, как закругленные углы сохраняют свой исходный размер, поскольку они находятся вне диапазона линий.

Области отступа

Линии 9-панели по правому и нижнему краям определяют, сколько места доступно для элемента содержимого элемента управления, что означает, что они также могут рассматриваться как управление отступом. Схематическое изображение отступа см. в разделе Макет элемента управления.

Ниже приведены дополнительные примеры изменения размера изображения 9-панели, но на этот раз демонстрируется, как работают линии отступа 9-панели.

Элемент contentItem может занимать столько места, сколько ему нужно, в затенённых областях. Если линии отступа пропущены, элемент contentItem займёт столько места, сколько ему нужно, не выходя за пределы растяжимых областей.

Области вставки

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

Области вставки учитывают это, сообщая элементу управления, что определённая область изображения 9-панели должна выходить за пределы элемента управления:

На изображении ниже пунктирная линия представляет кликабельную область кнопки, а также пространство, которое она займёт в макете. Тень отмечена полосатой областью за ней:

Экспорт изображений 9-панели

Различные векторные и битовые редакторы можно использовать для создания изображений 9-панели, подходящих для использования со стилем Imagine. В следующих разделах кратко объясняется процесс экспорта для каждого редактора, а в последнем разделе объясняется, как обеспечить соответствие экспортируемых изображений спецификации 9-панели.

Illustrator

См. документацию Adobe по панели Экспорт ресурсов.

Inkscape

Для экспорта ресурсов с Inkscape можно использовать расширение Inkscape для экспорта 9-панели.

Photoshop

См. документацию Adobe по генерации ресурсов изображения из слоёв.

Sketch

См. документацию Sketch по экспорту.

Qt Quick Controls 2 также предоставляет плагин для Sketch, который автоматически исправляет толщину линий 9-панели после экспорта ресурсов. Для установки этого файла дважды щелкните по нему. После подтверждения Sketch установки плагина для экспорта изображений 9-панели, плагин автоматически обработает изображения при их экспорте.

Исправление линий 9-панели

При экспорте изображений 9-панели в нескольких вариантах DPI (@2x, @3x, и т.д.), линии 9-панели обычно масштабируются вместе с изображением. Существует несколько способов исправить это, но, пожалуй, самый простой подход — использовать инструмент ImageMagick's mogrify. У инструмента есть функция -shave, которая может использоваться для обрезки изображения, чтобы уменьшить толщину линий 9-панели:

mogrify -shave 1x1 -path path/to/images *@2x.9.png
mogrify -shave 2x2 -path path/to/images *@3x.9.png
mogrify -shave 3x3 -path path/to/images *@4x.9.png

Обычные изображения DPI (без префикса @Nx) не затронуты, поэтому выполнять команду необходимо только для изображений, предназначенных для дисплеев с высоким DPI.

Анимированные изображения

Стиль Imagine поддерживает анимированные форматы изображений WebP и GIF.

Настройка

Путь

Стиль Imagine позволяет настраивать путь, используемый для выбора ресурсов изображений. Путь можно указать для любого окна или элемента, и он автоматически распространяется на дочерние элементы аналогично шрифтам. В следующем примере окно и все три радиокнопки отображаются с тёмными ресурсами изображений (файлы расположены в «qrc:/themes/dark»).

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Imagine 2.12

ApplicationWindow {
    visible: true

    Imagine.path: "qrc:/themes/dark"

    Column {
        anchors.centerIn: parent

        RadioButton { text: qsTr("Small") }
        RadioButton { text: qsTr("Medium"); checked: true }
        RadioButton { text: qsTr("Large") }
    }
}

Помимо указания пути в QML, его также можно указать через переменную среды или в конфигурационном файле. Атрибуты, указанные в QML, имеют приоритет над всеми другими методами.

Конфигурационный файл

[Imagine]
Path=:/imagine-assets

[Imagine]
Path=imagine-assets

См. Файл конфигурации Qt Quick Controls 2 для получения более подробной информации о конфигурационном файле.

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

QT_QUICK_CONTROLS_IMAGINE_PATH=:/imagine-assets

QT_QUICK_CONTROLS_IMAGINE_PATH=imagine-assets

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

Цветовая палитра

Стиль Imagine поддерживает настройку цветовой палитры через свойство palette и файл qtquickcontrols2.conf. Как и в других стилях, точные роли цветовой палитры, используемые стилем Imagine, зависят от стиля. Однако, поскольку большая часть визуального отображения элементов управления (например, фоны) управляется с помощью ресурсов изображений, только роли, обычно используемые для текста, будут иметь эффект.

Шрифт

Пользовательские шрифты можно задать через свойство font и конфигурационный файл configuration.

Зависимость

Стиль Imagine необходимо импортировать отдельно, чтобы получить доступ к атрибутам, специфичным для этого стиля. Следует отметить, что независимо от ссылок на стиль Imagine, код приложения выполняется с любым другим стилем. Атрибуты, специфичные для Imagine, имеют эффект только при запуске приложения со стилем Imagine.

Если стиль Imagine импортирован в файле QML, который всегда загружается, стиль Imagine необходимо развернуть вместе с приложением, чтобы приложение могло запускаться независимо от того, с каким стилем запускается приложение. Используя выбор файлов, можно применять настройки, специфичные для стиля, без создания жёсткой зависимости от стиля.

См. также Настройка Qt Quick Controls 2

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

Imagine.path : строка

Это присоединённое свойство содержит путь к ресурсам изображений...

Button {
    Imagine.path: "qrc:/themes/dark"
}

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

• Стиль Qt Quick Controls 2
• Пример автомобильной темы
• Пример музыкального плеера