Iconos en Qt Quick Controls

En Qt Quick Controls, los botones, los delegados de elementos y los elementos de menú pueden presentar un icono además de una etiqueta de texto.

Uso de iconos

AbstractButton y Action proporcionan las siguientes propiedades a través de las cuales se pueden configurar los iconos:

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

Los iconos temáticos se referencian mediante un nombre, y los iconos normales mediante una URL de origen. Tanto icon.name como icon.source pueden configurarse para garantizar que siempre se encuentre un icono. Si el icono se encuentra en el tema, siempre se utilizará, incluso si icon.source también está configurado. Si el icono no se encuentra en el tema, se utilizará icon.source.

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

Cada estiloQt Quick Controls 2 solicita un tamaño y color de icono por defecto de acuerdo con sus directrices, pero es posible anularlos estableciendo las propiedades icon.width, icon.height y icon.color.

La imagen que carga un icono cuyo width y height no están configurados depende del tipo de icono utilizado. Para los iconos temáticos, se elegirá el tamaño más cercano disponible. Para los iconos normales, el comportamiento es el mismo que el de la propiedad sourceSize de Image.

El color del icono se especifica por defecto para que coincida con el color del texto en diferentes estados. Para utilizar un icono con los colores originales, establezca el color en "transparent".

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

En el caso de los botones, la propiedad display puede utilizarse para controlar cómo se muestran el icono y el texto dentro del botón.

La propiedad icon.cache controla si la imagen del icono se almacena en caché o no. Para más información, consulte cache.

Temas de iconos

Los temas de iconos compatibles deben seguir la especificación de temas de iconos de freedesktop, que puede obtenerse aquí: http://standards.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html.

Tradicionalmente, sólo Linux y UNIX admiten temas de iconos a nivel de plataforma, pero es posible incluir un tema de icono compatible en una aplicación para utilizar iconos temáticos en cualquier plataforma.

La dirección icon theme search paths por defecto depende de la plataforma. En Linux y UNIX, la ruta de búsqueda utilizará la variable de entorno XDG_DATA_DIRS si está disponible. Todas las plataformas disponen del directorio de recursos :/icons como alternativa. Las rutas de búsqueda de temas de iconos personalizados pueden establecerse con QIcon::setThemeSearchPaths().

El siguiente ejemplo incluye un tema de iconos llamado mytheme en los recursos de la aplicación utilizando el sistema de recursos 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>

El archivo index.theme describe los atributos generales del tema de iconos y enumera los directorios de iconos disponibles:

[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

Para utilizar el tema de iconos incluido, una aplicación debe llamar a QIcon::setThemeName() antes de cargar el archivo 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();
}

Ahora es posible utilizar iconos con nombre del tema de iconos incluido sin tener que especificar ninguna fuente alternativa:

Button {
    icon.name: "myicon"
}

El ejemplo Gallery y la demostración Wearable proporcionan aplicaciones ejecutables completas con un tema de iconos incluido.