☰

qml-app-development 有任何标准图标吗？

tag-icon • tag-icon application-development ubuntu-touch
qml-app-development 有任何标准图标吗？

我正在开发一个 qml 应用程序，我想在按钮上放置图标。我想使用 ubuntu 标准图标来让我的应用程序获得真正的 ubuntu 外观。我该怎么做？

答案1

Ubuntu Touch 的官方图标主题名为 Ubuntu Mobile，可在ubuntu-mobile-icons软件包中安装。以下是所提供图标的示例：

Ubuntu 移动操作图标

要在代码中使用图标，只需使用图标的路径即可。例如，要在工具栏按钮中设置图标，请执行类似以下操作：

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

答案2

我刚刚开始涉足 QML，但看起来 Ubuntu SDK 提供了一种从主题访问图标的方法，图标组件。以下是一个 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-图标-hello-world

据我所知，这实际上似乎并不支持 Freedesktop 图标主题规范提供的全套图标.....

答案3

Ubuntu 移动版的默认主题是 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"
}

它会给你一个带有心形图标的操作按钮。

相关内容