Существуют ли стандартные иконки для qml-app-development?


11

Я занимаюсь разработкой qml-приложения и хочу разместить значки на кнопках. Я хотел бы использовать стандартные значки Ubuntu, чтобы получить настоящий вид Ubuntu для моего приложения. Как я могу это сделать?


Вы хотите использовать иконки от кого-то еще? Следите за авторскими правами! Икона - это творческая работа. Это защищено авторским правом. Поэтому вы должны сначала проверить лицензию на авторское право, которая идет с этим значком. У меня была эта веб-страница в моих закладках. Речь идет о Canonical - бизнесе, стоящем за Ubuntu - нанимать парня 'Faenza' для создания новых иконок.


Конечно, API должен обеспечить способ получить значок из общесистемной темы. Почему это было закрыто?
Andrewsomething

Ответы:


8

Официальная тема значков Ubuntu Touch называется Ubuntu Mobile и доступна для установки в ubuntu-mobile-iconsпакете. Вот пример предоставленных значков:

Иконки Ubuntu Mobile Action

Чтобы использовать значки в вашем коде, просто используйте путь к значку. Например, чтобы установить значок на кнопке панели инструментов, сделайте что-то похожее на это:

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

Для того, чтобы избежать необходимости повторять корневой путь снова и снова, я обычно использую небольшую функцию , называемую getIconкоторая возвращает реальный путь к иконке:

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

Предыдущий пример будет:

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

3
Этот ответ необходимо обновить. Правильный и официальный способ использования иконок: iconName: «reload» или iconSource: «image: // theme / reload»
nik90

4

Я только начал заниматься QML, но похоже, что Ubuntu SDK предоставляет способ доступа к иконкам из темы, компонента Icon. Вот пример 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
        }

        }
    }
}

Это дает вам:

QML-иконка-привет-мир

AFAICT, похоже, что на самом деле это не поддерживает полный набор иконок, предоставляемый Спецификацией темы иконок Freedesktop .....


0

Тема по умолчанию для Ubuntu mobile - Suru, а значки расположены в /usr/share/icons/suru

Любая из иконок может быть использована по имени. Даже иконки за пределами иконки Suru установлены.

Если файл /usr/share/icons/suru/actions/scalable/like.svg

Код может быть:

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

Что дает вам кнопку действия со значком сердца.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.