Иконки в Qt Quick Controls

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

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

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

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

Иконки темы ссылаются на имя, а обычные иконки — на 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"
}

Пример галереи и примера для носимых устройств предоставляют полностью работоспособные приложения с объединенной темой иконок.