Qt Labs StyleKit

StyleKitは、Qt Quick テンプレートを基盤として構築された、Qt Quick コントロール向けの宣言型スタイリングシステムです。これにより、単一のStyle オブジェクトから、すべてのコントロールの完全な視覚スタイルを定義することが可能になります。これには、themes 、state-based のスタイリング、およびtransitions への対応が含まれます。StyleKitは基盤となるテンプレート実装を自動的に処理するため、colors 、dimensions、borders 、shadows といった視覚的な側面に専念することができます。

StyleKitの大きな強みは、その階層的なプロパティシステムにあります。abstractButton のような基底型に対してプロパティを一度設定するだけで、ボタン系のすべてのコントロールに自動的に適用されます。特定のコントロールや状態については、必要に応じて上書きすることができます。スタイルの変更はすべてのコントロールに即座に反映されるため、一貫性を確保しつつ、きめ細かなカスタマイズも可能です。

StyleKitが提供する機能以上のカスタム動作が必要なコントロールについては、カスタムテンプレートを実装し、StyleKitでスタイル設定されたコントロールとシームレスに統合することも可能です。

主な機能

宣言型スタイリング- 実装よりもデザインに集中できる、使いやすい QML API
階層的なフォールバック— すべてのプロパティが伝播します。一度設定し、必要に応じて上書きします
状態ベースのスタイリング- ホバー時、押下時、フォーカス時など、それぞれの状態ごとに異なる外観を設計できます
アニメーション付き遷移- 状態間のスムーズなアニメーションを定義できます
テーマのサポート- ライトテーマやダークテーマ、および任意の数のカスタムテーマをデザインできます
バリエーション- 同一のコントロールに対して複数のバリエーションを設計できます
パレットとフォントの統合- QMLを使用してコントロールのパレットとフォントを設定します

以下の例は、スタイルの最小限の例を示しています：

// PlainStyle.qml

import QtQuick
import Qt.labs.StyleKit

Style {
    control {
        padding: 6
        background {
            radius: 4
            width: 100
            height: 36
        }
        indicator {
            width: 20
            height: 20
            border.width: 1
        }
        handle {
            width: 20
            height: 20
            radius: 10
        }
    }

    button {
        background {
            width: 120
            shadow.opacity: 0.6
            shadow.verticalOffset: 2
            shadow.horizontalOffset: 2
            gradient: Gradient {
                GradientStop { position: 0.0; color: Qt.alpha("black", 0.0)}
                GradientStop { position: 1.0; color: Qt.alpha("black", 0.2)}
            }
        }
        pressed.background.scale: 0.95
    }

    slider {
        indicator.fillWidth: true
        indicator.height: 6
        indicator.radius: 3
    }

    light: Theme {
        applicationWindow {
            background.color: "whitesmoke"
        }
        control {
            text.color: "black"
            background.color: "#e8e8e8"
            background.border.color: "#c0c0c0"
            hovered.background.color: "#d0d0d0"
        }
        button {
            text.color: "white"
            background.color: "cornflowerblue"
            background.shadow.color: "gray"
            hovered.background.color: "royalblue"
        }
    }

    dark: Theme {
        applicationWindow {
            background.color: Qt.darker("gray", 2.0)
        }
        control {
            text.color: "white"
            background.color: "#3a3a3a"
            background.border.color: "#555555"
            hovered.background.color: "#4a4a4a"
        }
        button {
            background.color: "sandybrown"
            background.shadow.color: "black"
            hovered.background.color: Qt.darker("sandybrown", 1.2)
        }
    }
}

アプリケーションでスタイルを設定する方法は次のとおりです：

// Main.qml

import QtQuick
import Qt.labs.StyleKit

ApplicationWindow {
    id: app
    width: 1024
    height: 800
    visible: true

    // Assign the style to be used
    StyleKit.style: PlainStyle {}

    // Controls are used as normal
    Column {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 10

        Button {
            text: "Button"
        }

        Slider {
            width: 200
        }
    }
}

プロジェクトでのモジュールの使用

このモジュールのQML型は、QtQuick.labs.StyleKit のインポートを通じて利用可能です。これらの型を使用するには、.qmlファイルに以下のインポート文を追加してください：

import Qt.labs.StyleKit

記事とガイド

StyleKit の機能概要- 利用可能なスタイリング機能の簡単な紹介
StyleKitのプロパティ解決- StyleKitがスタイルプロパティの値をどのように解決するか
リファレンスフォールバックスタイル

例

StyleKit クイックコントロールの例-StyleKit を使用してQt Quick のコントロールにスタイルを適用する方法を示します。
StyleKit ウィジェットの例- StyleKit を使用して Qt Widgets を適用する方法を示します。
StyleKit カスタムデリゲートの例-StyleKit でカスタムデリゲートやシェーダーエフェクトを使用する方法を示しています。

C++ クラス

QStyleKitStyle

Qt Labs StyleKit スタイルをQt Widgets

QML タイプに適用する

AbstractStyle	Style と Theme の両方に共通するプロパティを持つ抽象基底型
BorderStyle	デリゲートの境界線のスタイルを定義します。
ControlStateStyle	特定の状態におけるコントロールのスタイルを記述します
ControlStyle	通常状態にあるコントロールのスタイルを定義する
ControlStyleProperties	コントロールのスタイル設定可能なプロパティを定義する
CustomControl	カスタム（組み込みではない）コントロールのスタイルを定義する
CustomTheme	名前付きカスタムテーマを定義します
DelegateStyle	コントロール内の要素の視覚的外観を定義します
HandleStyle	Switch、Slider、RangeSlider などのコントロールのハンドルスタイルを定義します
ImageStyle	デリゲートの画像スタイルを定義します
IndicatorStyle	コントロールのインジケーターのスタイルを定義します
ShadowStyle	デリゲートのドロップシャドウスタイルを定義します
StylableControls	スタイル設定が可能なコントロール型を含む抽象基底型
Style	スタイル定義のルート型
StyleAnimation	スタイルプロパティをアニメーション化するための利便性型
StyleKit	現在のスタイルの設定およびアクセスを行うためのシングルトン
StyleKitDebug	コントロールに対するスタイルプロパティの解決方法を追跡する
StyleReader	特定のコントロールのアクティブなスタイルからプロパティを読み取る
StyleVariation	特定のコントロールに対する代替スタイルを定義する
StyledItem	DelegateStyleをレンダリングする
SubIndicatorStyle	サブインジケーターデリゲートのスタイルを定義する
TextStyle	コントロールのラベルのテキストスタイルを定義します
Theme	カラースキームの色およびスタイルのオーバーライドを定義します

ライセンス

Qt Labs StyleKit は、The Qt Company から商用ライセンスで提供されています。また、GNU Lesser General Public License バージョン 3 またはGNU General Public License バージョン 2 のもとでも利用可能です。詳細については、「Qt ライセンス」を参照してください。

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.