web-dev-qa-db-fra.com

Existe-t-il des icônes standard pour qml-app-development?

Je développe une application qml et je veux mettre des icônes sur les boutons. Je voudrais utiliser les icônes standard Ubuntu pour obtenir le vrai look Ubuntu pour mon application. Comment puis-je faire ceci?

application-developmentubuntu-touch
11
Oliver Heidbüchel

Le thème d'icônes officiel Ubuntu Touch s'appelle Ubuntu Mobile et peut être installé dans le package ubuntu-mobile-icons. Voici un exemple des icônes fournies:

Ubuntu Mobile Action icons

Pour utiliser les icônes de votre code, utilisez simplement le chemin d'accès à l'icône. Par exemple, pour définir l’icône dans un bouton de la barre d’outils, procédez comme suit:

ToolbarButton {
    text: i18n.tr("Refresh")
    iconSource: Qt.resolvedUrl("/usr/share/icons/ubuntu-mobile/actions/scalable/reload.svg")
}

Pour éviter d'avoir à répéter le chemin racine maintes et maintes fois, j'utilise généralement une petite fonction appelée getIcon qui renvoie le chemin réel à une icône:

function getIcon(name) {
    return Qt.resolvedUrl("/usr/share/icons/ubuntu-mobile/actions/scalable/" + name + ".svg")
}

L'exemple précédent serait alors:

ToolbarButton {
    text: i18n.tr("Refresh")
    iconSource: getIcon("reload")
}
8
iBelieve

Je viens tout juste de commencer à manipuler QML, mais il semble que le SDK Ubuntu offre un moyen d'accéder aux icônes du thème, le composant Icône . Voici un exemple Hello Worldish:

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    id: root
    objectName: "mainView"

    width: units.gu(50)
    height: units.gu(75)

    property real margins: units.gu(2)
    property real buttonWidth: units.gu(9)

    Page {
        title: i18n.tr("Icons!")

    Column {

        anchors {
            fill: parent
            margins: root.margins
        }
        spacing: units.gu(1)

        Icon {
            name: "call-start"
            width: 48
            height: 48
         }

        Icon {
            name: "call-stop"
            width: 48
            height: 48
         }

        Icon {
            name: "find"
            width: 48
            height: 48
        }

        }
    }
}

Cela vous donne:

qml-icons-hello-world

AFAICT, cela ne semble pas réellement supporter l'ensemble des icônes fournies par la spécification de thème d'icônes Freedesktop, bien que .....

4
andrewsomething

Le thème par défaut pour Ubuntu mobile est Suru et les icônes se trouvent dans /usr/share/icons/suru

Chacune des icônes peut être utilisée par nom. Même les icônes en dehors du jeu d'icônes Suru.

Si le fichier est /usr/share/icons/suru/actions/scalable/like.svg

Le code pourrait être:

Action {
    id: likeAction
    iconName: "like"    // the files name without file ending
    text: "I like this"
}

Ce qui vous donne un bouton d'action avec une icône de coeur.

0
Horselover Fat