qml-app-development是否有任何标准图标？

11

我正在开发一个qml-app，我想在按钮上放置图标。我想使用ubuntu标准图标来获取我的应用程序的真实ubuntu外观。我怎样才能做到这一点？

application-development ubuntu-touch

您要使用别人的图标吗？注意版权！图标是一项富有创造力的作品。已受版权保护。因此，您应该首先检查该图标随附的版权许可。我的书签中有这个网页。这是关于Canonical（Ubuntu背后的业务）的问题，该公司雇用了“ Faenza”人员来创建新图标。

iloveubuntu.net/…–

— 丹尼尔·霍尔姆

当然，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")
}

— 我相信
source

3

该答案需要更新。正确和官方使用图标的方式是iconName：“ reload”或iconSource：“ image：// theme / reload”

— nik90 2014年

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-icons-hello-world

AFAICT，虽然实际上似乎并不支持Freedesktop图标主题规范提供的全套图标。

— 醉酒
source

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"
}

这会为您提供一个带有心脏图标的操作按钮。

— 情人胖子
source