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?
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?
Respostas:
O tema oficial do ícone Ubuntu Touch é chamado Ubuntu Mobile e está disponível para instalação no ubuntu-mobile-icons
pacote. Aqui está uma amostra dos ícones fornecidos:
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 getIcon
que 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")
}
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á:
AFAICT, isso não parece realmente suportar o conjunto completo de ícones fornecidos pela Especificação de tema do ícone Freedesktop embora ...
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.