Иконки в Qt Quick Controls 2

Qt Quick Controls 2.3 (Qt 5.10) представил встроенную поддержку иконок. Кнопки, делегаты элементов и пункты меню теперь могут отображать иконку помимо текстовой метки.

Использование иконок

AbstractButton и Action предоставляют следующие свойства для настройки иконок:

• icon.name
• icon.source
• icon.width
• icon.height
• icon.color

Иконки темы ссылаются по имени, а обычные иконки — по URL-адресу источника. Оба icon.name и icon.source могут быть установлены, чтобы гарантировать, что иконка будет всегда найдена. Если иконка найдена в теме, она всегда будет использоваться; даже если icon.source также установлено. Если иконка не найдена в теме, icon.source будет использована вместо неё.

Button {
    icon.name: "edit-cut"
    icon.source: "images/cut.png"
}

Каждый стиль Qt Quick Controls 2 запрашивает размер и цвет иконки по умолчанию в соответствии со своими правилами, но можно переопределить эти значения, задав свойства icon.width, icon.height, и icon.color.

Изображение, загружаемое иконкой, у которой width и height не установлены, зависит от типа используемой иконки. Для иконок темы будет выбран ближайший доступный размер. Для обычных иконок поведение аналогично свойству sourceSize компонента Image.

Цвет иконки по умолчанию задаётся так, чтобы соответствовать цвету текста в различных состояниях. Для использования иконки с оригинальными цветами, установите цвет в "transparent".

Button {
    icon.color: "transparent"
    icon.source: "images/logo.png"
}

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

Темы иконок

Совместимые темы иконок должны следовать спецификации темы иконок freedesktop, которую можно получить здесь: http://standards.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html.

Традиционно, только Linux и UNIX поддерживают темы иконок на уровне платформы, но можно включить совместимую тему иконок в приложение для использования темных иконок на любой платформе.

Стандартные пути поиска тем иконок зависят от платформы. В Linux и UNIX путь поиска будет использовать переменную окружения XDG_DATA_DIRS если она доступна. На всех платформах каталогом ресурсов :/icons используется в качестве резервного.

Пользовательские пути поиска тем иконок можно задать с помощью QIcon::setThemeSearchPaths().

Следующий пример включает тему иконок под названием mytheme в ресурсы приложения с использованием системы ресурсов Qt.

<RCC>
    <qresource prefix="/">
        <file>icons/mytheme/index.theme</file>
        <file>icons/mytheme/32x32/myicon.png</file>
        <file>icons/mytheme/32x32@2/myicon.png</file>
    </qresource>
</RCC>

Файл index.theme описывает общие атрибуты темы иконок и перечисляет доступные каталоги иконок темы:

[Icon Theme]
Name=mytheme
Comment=My Icon Theme

Directories=32x32,32x32@2

[32x32]
Size=32
Type=Fixed

[32x32@2]
Size=32
Scale=2
Type=Fixed

Для использования скомпилированной темы иконок приложение должно вызвать QIcon::setThemeName() перед загрузкой основного файла QML:

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QIcon>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QIcon::setThemeName("mytheme"); // <--

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    return app.exec();
}

Теперь можно использовать именованные иконки из скомпилированной темы иконок, не указывая никаких резервных источников:

Button {
    icon.name: "myicon"
}

Пример галереи Gallery example и Wearable Demo предоставляют полные исполняемые приложения с включенной темой иконок.

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

• Поддержка High-DPI в Qt Quick Controls 2