Qt Quick コントロールのアイコン

Qt Quick コントロールでは、ボタン、アイテムデリゲート、およびメニュー項目は、テキストラベルに加えてアイコンを表示することができます。

アイコンの使用

AbstractButton およびAction では、アイコンを設定するための以下のプロパティが用意されています:

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

テーマアイコンは名前で参照され、通常のアイコンはソースURLで参照されます。アイコンが確実に検出されるように、icon.name とicon.source の両方を設定できます。テーマ内にアイコンが見つかった場合は、icon.source が設定されている場合でも、常にそのアイコンが使用されます。テーマ内にアイコンが見つからない場合は、代わりにicon.source が使用されます。

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

各Qt Quick は、ガイドラインに従ってデフォルトのアイコンサイズと色を指定する2 つのスタイルリクエストを制御しますが、icon.width 、icon.height 、およびicon.color プロパティを設定することで、これらを上書きすることが可能です。

width およびheight が設定されていないアイコンによって読み込まれる画像は、使用されているアイコンの種類によって異なります。テーマアイコンの場合は、利用可能なサイズの中で最も近いものが選択されます。通常のアイコンの場合、その動作はImage のsourceSize プロパティと同じになります。

アイコンの色は、デフォルトではさまざまな状態におけるテキストの色と一致するように指定されています。アイコンを元の色で使用するには、色を `"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 のみでしたが、準拠したアイコンテーマをアプリケーションに同梱することで、どのプラットフォームでもテーマ化されたアイコンを使用することが可能です。

デフォルトのicon theme search paths はプラットフォームによって異なります。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"
}

「Gallery」サンプルと「Wearable Demo」は、同梱のアイコンテーマを含む、完全に動作するアプリケーションを提供しています。