Tworzę aplikację qml i chcę umieścić ikony na przyciskach. Chciałbym użyć standardowych ikon ubuntu, aby uzyskać prawdziwy wygląd ubuntu mojej aplikacji. Jak mogę to zrobić?
Tworzę aplikację qml i chcę umieścić ikony na przyciskach. Chciałbym użyć standardowych ikon ubuntu, aby uzyskać prawdziwy wygląd ubuntu mojej aplikacji. Jak mogę to zrobić?
Odpowiedzi:
Oficjalny motyw ikony Ubuntu Touch nazywa się Ubuntu Mobile i można go zainstalować w ubuntu-mobile-icons
pakiecie. Oto przykładowe ikony:
Aby użyć ikon w kodzie, wystarczy użyć ścieżki do ikony. Na przykład, aby ustawić ikonę na przycisku paska narzędzi, wykonaj coś podobnego do tego:
ToolbarButton {
text: i18n.tr("Refresh")
iconSource: Qt.resolvedUrl("/usr/share/icons/ubuntu-mobile/actions/scalable/reload.svg")
}
Aby uniknąć konieczności powtarzania ścieżki katalogu głównego, zwykle używam małej funkcji o nazwie, getIcon
która zwraca rzeczywistą ścieżkę do ikony:
function getIcon(name) {
return Qt.resolvedUrl("/usr/share/icons/ubuntu-mobile/actions/scalable/" + name + ".svg")
}
Poprzedni przykład to:
ToolbarButton {
text: i18n.tr("Refresh")
iconSource: getIcon("reload")
}
Dopiero zacząłem zagłębiać się w QML, ale wygląda na to, że Ubuntu SDK zapewnia sposób na dostęp do ikon z motywu, komponentu Icon. Oto przykład 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
}
}
}
}
To daje ci:
AFAICT, to nie wydaje się w rzeczywistości obsługiwać pełnego zestawu ikon dostarczonych przez specyfikację motywu ikony Freedesktop .....
Domyślnym motywem dla Ubuntu Mobile jest Suru, a ikony znajdują się w /usr/share/icons/suru
Dowolną z ikon można użyć według nazwy. Nawet ikony poza zestawem ikon Suru.
Jeśli plik jest /usr/share/icons/suru/actions/scalable/like.svg
Kod może być:
Action {
id: likeAction
iconName: "like" // the files name without file ending
text: "I like this"
}
Co daje ci przycisk akcji z ikoną serca.