Иконки в 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"
}

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