Иконки в 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 icon theme, которую можно получить здесь: 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"
}

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

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

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