Existem ícones padrão para qml-app-development?


11

Estou desenvolvendo um aplicativo qml e quero colocar ícones nos botões. Gostaria de usar os ícones padrão do ubuntu para obter a aparência real do ubuntu para o meu aplicativo. Como posso fazer isso?


Deseja usar ícones de outra pessoa? Cuidado com os direitos autorais! Um ícone é um trabalho criativo. É protegido por direitos autorais. Portanto, você deve primeiro verificar a licença de direitos autorais que acompanha esse ícone. Eu tinha essa página nos meus favoritos. É sobre a Canonical - a empresa por trás do Ubuntu - contratar o cara 'Faenza' para criar novos ícones.


Certamente, a API deve fornecer uma maneira de obter um ícone do tema amplo do sistema. Por que isso foi fechado?
2741313

Respostas:


8

O tema oficial do ícone Ubuntu Touch é chamado Ubuntu Mobile e está disponível para instalação no ubuntu-mobile-iconspacote. Aqui está uma amostra dos ícones fornecidos:

Ícones do Ubuntu Mobile Action

Para usar os ícones no seu código, basta usar o caminho para o ícone. Por exemplo, para definir o ícone em um botão da barra de ferramentas, faça algo semelhante a este:

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

Para evitar ter que repetir o caminho raiz repetidamente, geralmente uso uma pequena função chamada getIconque retorna o caminho real a um ícone:

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

O exemplo anterior seria então:

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

3
Esta resposta precisa ser atualizada. A maneira correta e oficial usando ícones é, iconName: "reload" ou iconSource: "imagem: // tema / reload"
nik90

4

Eu apenas comecei a mexer na QML, mas parece que o SDK do Ubuntu fornece uma maneira de acessar ícones do tema, o componente Icon. Aqui está um exemplo do 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
        }

        }
    }
}

Isso lhe dá:

qml-ícones-olá-mundo

AFAICT, isso não parece realmente suportar o conjunto completo de ícones fornecidos pela Especificação de tema do ícone Freedesktop embora ...


0

O tema padrão do Ubuntu mobile é Suru e os ícones estão localizados em /usr/share/icons/suru

Qualquer um dos ícones pode ser usado pelo nome. Até ícones fora do conjunto de ícones Suru.

Se o arquivo for /usr/share/icons/suru/actions/scalable/like.svg

O código pode ser:

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

O que fornece um botão de ação com um ícone de coração.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.