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


11

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?


Vous souhaitez utiliser des icônes de quelqu'un d'autre? Attention au copyright! Une icône est un travail créatif. Il est protégé par le droit d'auteur. Vous devez donc d'abord vérifier la licence de droit d'auteur fournie avec cette icône. J'avais cette page Web dans mes favoris. Il s'agit de Canonical - l'entreprise derrière Ubuntu - d'embaucher le gars «Faenza» pour créer de nouvelles icônes.


Certes, l'API doit fournir un moyen d'obtenir une icône du thème à l'échelle du système. Pourquoi était-ce fermé?
andrewsomething

Réponses:


8

Le thème d'icônes Ubuntu Touch officiel s'appelle Ubuntu Mobile et est disponible pour l'installation dans le ubuntu-mobile-iconspackage. Voici un exemple des icônes fournies:

Icônes Ubuntu Mobile Action

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 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 encore et encore, j'utilise généralement une petite fonction appelée getIconqui 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")
}

3
Cette réponse doit être mis à jour. La manière correcte et officielle de l' utilisation des icônes est, iconName: "reload" ou iconSource: "image: // thème / reload"
nik90

4

Je viens juste de commencer barboter dans QML, mais il semble que le SDK Ubuntu fournit un moyen d'icônes d'accès du thème, le composant Icône. Voici un exemple Bonjour 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 vraiment à soutenir l'ensemble des icônes fournies par l'icône Thème Freedesktop Spécification bien .....


0

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

Chacune des icônes peut être utilisée par son nom. Même des 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 en forme de cœur.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.