Стиль Imagine

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

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

• path : строка

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

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

Стиль Imagine с предопределёнными изображениями

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

Имена файлов

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

<control>-<element>-<states>

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

Справочник по элементам

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Illustrator

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

Inkscape

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

Photoshop

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

Sketch

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

Qt Quick Controls также предоставляет плагин для 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) не затрагиваются, поэтому команду необходимо выполнить только для изображений, предназначенных для высококачественных дисплеев.

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

Форматы анимированных изображений WebP и GIF поддерживаются стилем Imagine.

Настройка

Путь

Стиль 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 для получения дополнительной информации о конфигурационном файле.

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

QT_QUICK_CONTROLS_IMAGINE_PATH=:/imagine-assets

QT_QUICK_CONTROLS_IMAGINE_PATH=imagine-assets

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

Палитра

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

Шрифт

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

Зависимость

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

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

См. также Стилевое оформление Qt Quick Controls

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

Imagine.path : строка

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

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

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

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