Icônes dans Qt Quick Controls

Dans Qt Quick Controls, les boutons, les délégués d’éléments et les éléments de menu peuvent afficher une icône en plus d’une étiquette de texte.

Utilisation des icônes

AbstractButton et Action fournissent les propriétés suivantes permettant de définir des icônes :

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

Les icônes de thème sont référencées par un nom, et les icônes standard par une URL source. Les propriétés « icon.name » et « icon.source » peuvent toutes deux être définies pour garantir qu’une icône soit toujours trouvée. Si l’icône est trouvée dans le thème, elle sera toujours utilisée, même si la propriété « icon.source » est également définie. Si l’icône n’est pas trouvée dans le thème, la propriété « icon.source » sera utilisée à la place.

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

Chaque styleQt Quick Controls 2 spécifie une taille et une couleur d’icône par défaut conformément à ses directives, mais il est possible de les remplacer en définissant les propriétés icon.width, icon.height et icon.color.

L’image chargée par une icône dont les propriétés ` width ` et ` height ` ne sont pas définies dépend du type d’icône utilisé. Pour les icônes de thème, la taille disponible la plus proche sera choisie. Pour les icônes standard, le comportement est identique à celui de la propriété ` sourceSize ` de ` Image`.

La couleur de l’icône est définie par défaut de manière à correspondre à la couleur du texte selon les différents états. Pour utiliser une icône avec ses couleurs d’origine, définissez la couleur sur "transparent".

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

Pour les boutons, la propriété display permet de contrôler l’affichage de l’icône et du texte à l’intérieur du bouton.

La propriété ` icon.cache ` détermine si l’image de l’icône est mise en cache ou non. Pour plus d’informations, consultez cache.

Thèmes d’icônes

Les thèmes d’icônes conformes doivent respecter la spécification Freedesktop relative aux thèmes d’icônes, disponible ici : http://standards.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html.

Traditionnellement, seuls Linux et UNIX prennent en charge les thèmes d’icônes au niveau de la plate-forme, mais il est possible d’intégrer un thème d’icônes conforme dans une application afin d’utiliser des icônes thématiques sur n’importe quelle plate-forme.

Les chemins de recherche par défaut ( icon theme search paths ) dépendent de la plateforme. Sous Linux et UNIX, le chemin de recherche utilise la variable d’environnement ` XDG_DATA_DIRS ` si elle est disponible. Toutes les plateformes disposent du répertoire de ressources ` :/icons ` comme solution de secours. Des chemins de recherche personnalisés pour les thèmes d’icônes peuvent être définis à l’aide de la fonction ` QIcon::setThemeSearchPaths()`.

L'exemple suivant intègre un thème d'icônes appelé « mytheme » dans les ressources de l'application à l'aide du système de ressources de 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>

Le fichier index.theme décrit les attributs généraux du thème d’icônes et répertorie les répertoires d’icônes disponibles pour ce thème :

[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

Pour utiliser le thème d’icônes intégré, une application doit appeler QIcon::setThemeName() avant de charger le fichier QML principal :

#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();
}

Il est désormais possible d’utiliser des icônes nommées issues du thème d’icônes intégré sans avoir à spécifier de source de secours :

Button {
    icon.name: "myicon"
}

L'exemple Gallery et la démo Wearable fournissent des applications complètes et exécutables avec un thème d’icônes intégré.