Qt Quick 控件中的图标

Qt Quick 控件自 Qt 5.10 开始支持图标。这意味着按钮、项目代理和菜单项现在除了文本标签外还可以展示图标。

使用图标

AbstractButton 和 Action 通过以下属性提供设置图标的方法

icon.name
icon.source
icon.width
icon.height
icon.color
icon.cache

主题图标按名称引用，常规图标按源 URL 引用。可以通过设置 icon.name 和 icon.source 确保图标始终可找到。如果图标在主题中找到，则始终使用，即使设置了 icon.source。

Button {
    icon.name: "edit-cut"
    icon.source: "images/cut.png"
}

每个 Qt Quick Controls 2 样式根据其指南请求默认图标大小和颜色，但可以通过设置 icon.width、icon.height 和 icon.color 属性来覆盖这些设置。

未设置 width 和 height 的图标加载的图像取决于所使用的图标类型。对于主题图标，将选择最接近的可用大小。对于常规图标，行为与 sourceSize 属性的 Image 相同。

默认情况下指定图标颜色以匹配不同状态下的文本颜色。为了使用具有原始颜色的图标，将颜色设置为 "transparent"。

Button {
    icon.color: "transparent"
    icon.source: "images/logo.png"
}

对于按钮，可以使用 display 属性来控制图标和文本在按钮中的显示方式。

icon.cache 属性控制是否缓存图标图像。有关更多信息，请参阅 cache。

图标主题

符合标准的图标主题必须遵循 freedesktop 图标主题规范，该规范可在此获取：http://standards.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html。

传统上，只有 Linux 和 UNIX 在平台级别支持图标主题，但可以将符合标准的图标主题打包到应用程序中以在任何平台上使用主题图标。

默认的图标主题搜索路径依赖于平台。在Linux和UNIX系统上，如果存在，搜索路径将使用XDG_DATA_DIRS环境变量。所有平台都将:/icons资源目录作为后备。可以通过QIcon::setThemeSearchPaths()设置自定义的图标主题搜索路径。

以下示例使用Qt的资源系统将名为mytheme的图标主题捆绑到应用程序资源中。

<RCC>
    <qresource prefix="/">
        <file>icons/mytheme/index.theme</file>
        <file>icons/mytheme/32x32/myicon.png</file>
        <file>icons/mytheme/32x32@2/myicon.png</file>
    </qresource>
</RCC>

index.theme文件描述了图标主题的一般属性，并列出了可用的主题图标目录

[Icon Theme]
Name=mytheme
Comment=My Icon Theme

Directories=32x32,32x32@2

[32x32]
Size=32
Type=Fixed

[32x32@2]
Size=32
Scale=2
Type=Fixed

为了使用捆绑的图标主题，应用程序应在加载主QML文件前调用QIcon::setThemeName()

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QIcon>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QIcon::setThemeName("mytheme"); // <--

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    return app.exec();
}

现在可以无需指定任何后备源即使用捆绑图标主题中的命名图标

Button {
    icon.name: "myicon"
}

示例画廊和可穿戴演示提供了带有捆绑图标主题的完整可运行应用程序。