Qml-app-development için standart simgeler var mı?


12

Bir qml uygulaması geliştiriyorum ve düğmelere simgeler koymak istiyorum. Uygulamam için gerçek ubuntu görünümünü elde etmek için ubuntu standart simgeleri kullanmak istiyorum. Bunu nasıl yapabilirim?


Başkasının simgelerini mi kullanmak istiyorsunuz? Telif hakkına dikkat edin! Bir simge yaratıcı bir çalışmadır. Telif hakkı saklıdır. Bu yüzden, önce bu simgeyle birlikte gelen telif hakkı lisansını kontrol etmelisiniz. Ben bu web sayfasını benim imleri. Bu, Ubuntu'nun arkasındaki iş olan Canonical hakkında, yeni ikonlar yaratmak için 'Faenza' adamını işe alıyor.


Şüphesiz, API sistem genelindeki temadan bir simge almak için bir yol sağlamalıdır. Bu neden kapatıldı?
andrewsomething

Yanıtlar:


8

Resmi Ubuntu Touch icon temasına Ubuntu Mobile denir ve ubuntu-mobile-iconspakete yüklenebilir . Sağlanan simgelerin bir örneği:

Ubuntu Mobil İşlem simgeleri

Kodunuzdaki simgeleri kullanmak için simgeye giden yolu kullanmanız yeterlidir. Örneğin, bir araç çubuğu düğmesindeki simgeyi ayarlamak için aşağıdakine benzer bir şey yapın:

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

Kök yolunu tekrar tekrar tekrarlamak zorunda kalmamak için, genellikle getIconbir simgeye gerçek yolu döndüren adlı küçük bir işlev kullanırım :

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

Önceki örnek daha sonra şöyle olur:

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

3
Bu cevabın güncellenmesi gerekiyor. Simgeleri kullanmanın doğru ve resmi yolu, iconName: "reload" veya iconSource: "image: // theme / reload"
nik90 13

4

QML'de yeni çalışmaya başladım, ancak Ubuntu SDK, tema, Icon bileşeninden simgelere erişmek için bir yol sağlıyor gibi görünüyor . Merhaba Worldish örneği:

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
        }

        }
    }
}

Bu size şunları sağlar:

QML-simgeleri-merhaba dünya

AFAICT, bu aslında Freedesktop Icon Theme Specification tarafından sağlanan simgeler tam set desteklemiyor gibi görünüyor .....


0

Ubuntu mobile için varsayılan tema Suru'dur ve simgeler /usr/share/icons/suru

Simgelerden herhangi biri adıyla kullanılabilir. Hatta Suru simge seti dışındaki simgeler.

Dosya /usr/share/icons/suru/actions/scalable/like.svg

Kod şöyle olabilir:

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

Bu size kalp simgesi olan bir işlem düğmesi verir.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.