Стиль 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-патч, представляющего фон кнопки, а также увеличенная версия (для лучшего просмотра линий 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-Patch Export.

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 и файл конфигурации configuration.

Зависимость

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

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

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

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

Imagine.path : строка

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

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

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

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