Qt Labs StyleKit

StyleKit のための宣言型スタイリングシステムです。 Qt Quick Controls Qt Quick Templates の上に構築されています。themes 、state-based スタイリング、transitions のサポートを含め、単一のStyle オブジェクトからすべてのコントロールの完全なビジュアルスタイルを定義することができます。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
            implicitWidth: 100
            implicitHeight: 36
        }
        indicator {
            implicitWidth: 20
            implicitHeight: 20
            border.width: 1
        }
        handle {
            implicitWidth: 20
            implicitHeight: 20
            radius: 10
        }
    }

    button {
        background {
            implicitWidth: 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.implicitWidth: Style.Stretch
        indicator.implicitHeight: 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文を追加してください：

import Qt.labs.StyleKit

記事とガイド

例

StyleKitの例-StyleKitを使用した Qt Quick Controls StyleKitを使用する方法を示しています。

QML タイプ

AbstractStylableControls	スタイル設定可能なコントロールタイプを含む抽象ベースタイプ
AbstractStyle	Style と Theme の両方に共通するプロパティを持つ抽象ベースタイプ
BorderStyle	デリゲートのボーダースタイルを定義します。
ControlStateStyle	指定された状態のコントロールのスタイルを記述します。
ControlStyle	通常状態のコントロールのスタイルを定義します。
ControlStyleProperties	コントロールのスタイル設定可能なプロパティを定義します。
CustomControl	カスタム（非内蔵）コントロールのスタイルを定義します。
CustomTheme	カスタムテーマの定義
DelegateStyle	コントロール内の要素の外観を定義する
HandleStyle	スイッチ、スライダー、レンジスライダーなどのコントロールのハンドルスタイルを定義する
ImageStyle	デリゲートの画像スタイルを定義します。
IndicatorStyle	コントロールのインジケーターのスタイルを定義します。
ShadowStyle	デリゲートのドロップシャドウのスタイルを定義します。
Style	スタイル定義のルートタイプ
StyleAnimation	状態遷移中のスタイルプロパティの変更をアニメーション化します。
StyleKit	現在のスタイルを設定およびアクセスするためのシングルトン
StyleKitDebug	コントロールのスタイルプロパティがどのように解決されるかをトレースします。
StyleReader	特定のコントロールのアクティブスタイルからプロパティを読み取ります。
StyleVariation	特定のコントロールの代替スタイルを定義する
StyledItem	DelegateStyle のレンダリング
SubIndicatorStyle	サブインデックスのデリゲートのスタイルを定義します。
TextStyle	コントロールのラベルのテキストスタイルの定義
Theme	カラースキームのカラーとスタイルのオーバーライドを定義します

ライセンス

Qt LabsStyleKit は、The Qt Company の商用ライセンスで利用できます。また、GNU Lesser General Public License, version 3 またはGNU General Public License, version 2 の下でも利用可能です。詳しくはQt Licensingをご覧ください。

© 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.