Стиль 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-патч.

<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAggAAAGGCAMAAAApcIlkAAAAtFBMVEVHcEwGCQwAAACHzvuHzvkKDxQAAACHzvqHzfqHzvuI0P6HzvqHzvuI0PmKz/qHzvqR0vuw3/zJ6f7L6fzQ7P7R7P6K//+l2vuHzvr///+k2vuM0PqR0vqW1Pub1vui2fud1/ue1/ug2PuP0fqU0/uIz/qO0fqKz/qT0/qZ1fuX1fuJz/oAAACs3vzW7/7c8f7A5v3H6f3O6/3p9v664/2X1Pu04fz3/P+q3Pzj9P7u+P4AlZiUKuDpAAAAPHRSTlMA1/ioiAgzzDN3EvPgKUnBYZysub2zSf////////////////////////////////////////////////jqhx2vAAAgAElEQVR42uydaZebuBKGZyb3TJLJMvfDPUc0XrCx223TYTXB4P//w24tYrHB08FH3RI9qg8Q5KUl8SDVWyU5v/1mzZo1a9asWbNmzZo1a9asWbNmzZo1a9asWbNmzZo1a9asWbNmzZo1a9asaba/vn/4+NV52crIUWq/9H1fPv79+dsrtCV2JmGv0Ue3uu7zF/iuRw2d92vfhzX7+5vpbXk1EJT30S379lVxpZxX+b7PhrdFLwgj+uiWff8yolbPils55vs+KG7LVExxH918hqbTd5/fUVu09dFN+zihVn5/R23R1Ue37L/qPdjX+76PStvynlTDL/fRTfuqtfPGft93g9tigrN4/5DwyZkUCB8MbospINznL/7nFT3YV/i+ryrb8h5Vw0t9dNM+TKxT/npHbdHRRzft74k18ts7aouOPlIluDSrBsf5pLAt71M1/HMfmdp5o7/v3whCbEGwIJgKgm7VoBKE96oa3gYE3fbJBpgtCBYEg3wEqxqsarDOonUWLQgWBKsarGqwzuK/yFkskmTuONM5/lOyPcmyFPpBZFn203F2cArhMudSFy4PjjODU9GW+nC7grMsLeAMpxWcfC7NZenMcZZw8uAy5dIQLneO8xNOgksTWQoV3cKphMuES0u43DrOXFapU9GAq9SpqAeXS8d5uqwSVnR9WdHHXpVkRe8C4X9pCjXMf/VYHtMsdPc5Hhd0PNBxBa+Grg/H0vWSNBWuC0ePjr7rpmm6ouPSw2Pg43G7crP4POavw/H3P/74488bbUmjKCMvO4qgfzdwwj5L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

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

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

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

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

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

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

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

Imagine.path : string

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

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

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

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