Icons in Qt Quick Controls

Qt Quick Controls bietet seit Qt 5.10 Unterstützung für Icons. Das bedeutet, dass Schaltflächen, Elementdelegierte und Menüelemente nun in der Lage sind, zusätzlich zu einer Textbeschriftung ein Symbol darzustellen.

Icons verwenden

AbstractButton und Action bieten die folgenden Eigenschaften, über die Icons gesetzt werden können:

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

Thematische Symbole werden durch einen Namen referenziert, normale Symbole durch eine Quell-URL. Sowohl icon.name als auch icon.source können eingestellt werden, um sicherzustellen, dass ein Symbol immer gefunden wird. Wenn das Symbol im Thema gefunden wird, wird es immer verwendet, auch wenn icon.source ebenfalls eingestellt ist. Wenn das Symbol nicht im Thema gefunden wird, wird stattdessen icon.source verwendet.

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

Jeder StilQt Quick Controls 2 fordert eine Standard-Icon-Größe und -Farbe gemäß seinen Richtlinien, aber es ist möglich, diese zu überschreiben, indem man die Eigenschaften icon.width, icon.height und icon.color setzt.

Das Bild, das von einem Symbol geladen wird, dessen width und height nicht gesetzt sind, hängt von der Art des verwendeten Symbols ab. Bei Themensymbolen wird die nächstmögliche Größe gewählt. Bei normalen Symbolen ist das Verhalten dasselbe wie bei der Eigenschaft sourceSize von Image.

Die Farbe des Symbols ist standardmäßig so festgelegt, dass sie mit der Textfarbe in verschiedenen Zuständen übereinstimmt. Um ein Symbol mit den Originalfarben zu verwenden, setzen Sie die Farbe auf "transparent".

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

Bei Schaltflächen kann mit der Eigenschaft display gesteuert werden, wie das Symbol und der Text innerhalb der Schaltfläche angezeigt werden.

Die Eigenschaft icon.cache steuert, ob das Symbolbild zwischengespeichert wird oder nicht. Weitere Informationen finden Sie unter cache.

Icon Themes

Konforme Icon-Themen müssen der Spezifikation für Freedesktop-Icon-Themen entsprechen, die Sie hier finden: http://standards.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html.

Traditionell unterstützen nur Linux und UNIX Icon-Themen auf Plattformebene, aber es ist möglich, ein konformes Icon-Thema in einer Anwendung zu bündeln, um thematische Icons auf jeder Plattform zu verwenden.

Die Standardeinstellungen von icon theme search paths hängen von der Plattform ab. Unter Linux und UNIX wird für den Suchpfad die Umgebungsvariable XDG_DATA_DIRS verwendet, falls vorhanden. Alle Plattformen haben das Ressourcenverzeichnis :/icons als Fallback. Benutzerdefinierte Suchpfade für Icon-Themen können mit QIcon::setThemeSearchPaths() festgelegt werden.

Das folgende Beispiel bündelt ein Icon-Theme namens mytheme in den Ressourcen der Anwendung unter Verwendung des Qt-Ressourcensystems.

<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>

Die Datei index.theme beschreibt die allgemeinen Attribute des Icon-Themas und listet die verfügbaren Icon-Verzeichnisse des Themas auf:

[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

Um das gebündelte Icon-Thema zu verwenden, sollte eine Anwendung QIcon::setThemeName() aufrufen, bevor sie die Haupt-QML-Datei lädt:

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

Jetzt ist es möglich, benannte Icons aus dem gebündelten Icon-Theme zu verwenden, ohne eine Fallback-Quelle angeben zu müssen:

Button {
    icon.name: "myicon"
}

Das Gallery-Beispiel und die Wearable-Demo bieten vollständige, lauffähige Anwendungen mit einem gebündelten Icon-Theme.