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

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

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

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

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

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

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

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

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

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

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

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

Внутренние области

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

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

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

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

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

Illustrator

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

Inkscape

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

Photoshop

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

Sketch

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

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

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

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

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.

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

Форматы анимированных изображений 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 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.

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

См. также Стилизация Qt Quick Controls 2

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

Imagine.path : string

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

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

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

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