Apakah ada ikon standar untuk pengembangan aplikasi qml?

11

Saya sedang mengembangkan aplikasi qml dan saya ingin meletakkan ikon di tombol. Saya ingin menggunakan ikon standar ubuntu untuk mendapatkan tampilan ubuntu nyata untuk aplikasi saya. Bagaimana saya bisa melakukan ini?

application-development ubuntu-touch Oliver Heidbüchel
sumber
Anda ingin menggunakan ikon dari orang lain? Pikirkan hak cipta! Ikon adalah karya kreatif. Hak cipta. Jadi, pertama-tama Anda harus memeriksa lisensi hak cipta yang menyertai ikon itu. Saya memiliki halaman web ini di bookmark saya. Ini tentang Canonical - bisnis di balik Ubuntu - mempekerjakan orang 'Faenza' untuk membuat ikon baru.
iloveubuntu.net/...
Daniel Holm
Tentunya, api harus menyediakan cara untuk mendapatkan ikon dari tema sistem yang luas. Kenapa ini ditutup?
andrewsomething

Jawaban:

8

Tema ikon resmi Ubuntu Touch disebut Ubuntu Mobile, dan tersedia untuk instalasi dalam ubuntu-mobile-iconspaket. Berikut adalah contoh ikon yang disediakan:

Ikon Tindakan Seluler Ubuntu

Untuk menggunakan ikon dalam kode Anda, cukup gunakan jalur ke ikon. Misalnya, untuk mengatur ikon di tombol bilah alat, lakukan sesuatu yang mirip dengan ini:

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

Untuk menghindari harus mengulangi path root berulang kali, saya biasanya menggunakan fungsi kecil yang disebut getIconyang mengembalikan path sebenarnya ke ikon:

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

Contoh sebelumnya adalah:

ToolbarButton {
    text: i18n.tr("Refresh")
    iconSource: getIcon("reload")
}
aku percaya
sumber
3
Jawaban ini perlu diperbarui. Cara yang benar dan resmi menggunakan ikon adalah, iconName: "reload" atau iconSource: "image: // theme / reload"
nik90
4

Saya baru saja mulai berkecimpung di QML, tetapi sepertinya SDK Ubuntu menyediakan cara untuk mengakses ikon dari tema, komponen Ikon. Berikut adalah contoh 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
        }

        }
    }
}

Ini memberi Anda:

qml-icons-hello-world

AFAICT, ini sepertinya tidak mendukung set lengkap ikon yang disediakan oleh Spesifikasi Tema Ikon Freedesktop .....

andrewsomething
sumber
0

Tema default untuk ponsel Ubuntu adalah Suru dan ikonnya terletak di /usr/share/icons/suru

Salah satu ikon dapat digunakan dengan nama. Bahkan ikon di luar set ikon Suru.

Jika file tersebut /usr/share/icons/suru/actions/scalable/like.svg

Kode dapat berupa:

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

Yang memberi Anda tombol tindakan dengan ikon hati.

Horselover Fat
sumber