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

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

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

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