Стиль Imagine

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

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

• path : строка

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

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

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

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

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

Настройка

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

import QtQuick 2.0
import QtQuick.Controls 2.3
import QtQuick.Controls.Imagine 2.3

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

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

См. также Стиль Qt Quick Controls 2

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

Imagine.path : строка

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

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

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

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