Back to Qt.io
Contact Us Blog Download Qt
このページでは

Style QML Type

スタイル定義のルート型。詳細...

Import Statement: import Qt.labs.StyleKit
Inherits:

AbstractStyle

Status: Technology preview

この型はテクノロジープレビュー段階にあり、変更される可能性があります。

プロパティ

詳細な説明

Style は、Qt Quick コントロールの完全な視覚スタイルを定義するためのStyleKitにおけるルート型です。スタイルを使用すると、every control type （backgrounds 、indicators 、handles 、text 、padding など）の外観をカスタマイズできるほか、hovered 、pressed 、disabled といった状態へのコントロールの反応や、それらの状態間のアニメーション（transitions ）もカスタマイズできます。

スタイルでは、themes を通じてlight およびdark の配色をサポートしており、custom themes もいくつでも追加できます。Style variations を使用すると、特定のコントロールインスタンスやコントロールタイプ全体に適用できる代替スタイルを定義できます。また、custom controls を定義して、組み込みのコントロールセットの範囲を超えてスタイルを拡張することも可能です。

次の例は、すべてのテーマに共通する構造的なプロパティを定義し、色についてはライトテーマとダークテーマを個別に設定した、最小限のスタイルを示しています。

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

より完全な例については、「StyleKit Quick Controls Example」を参照してください。

注： Qt.labs モジュール内の型は、将来のバージョンでも互換性が維持されるとは限りません。

関連項目: Theme 、CustomTheme 、StyleVariation 、ControlStyle 、DelegateStyle 、CustomControl 、およびStyleKit プロパティの解決。

プロパティのドキュメント

availableThemeNames : list<string> [read-only]

利用可能なすべてのテーマの名前（"System" 、"Light" 、"Dark" 、およびその他のcustom themes.

themeName およびcustomThemeNamesも参照してください 。

customThemeNames : list<string> [read-only]

このスタイルで定義されているすべてのcustom themes の名前。これにはbuilt-in themes.

関連項目： availableThemeNames 、themeName 、およびCustomTheme 。

dark : Component

ダークテーマコンポーネント。システムがダークモードで、themeName が"System" の場合、またはthemeName が明示的に"Dark" に設定されている場合に、インスタンス化され適用されます。

dark: Theme {
    control.background.color: "#404040"
    button.hovered.background.color: "#6ab0f9"
}

light およびthemeNameも参照してください 。

fallbackStyle : Style

このスタイルで明示的に設定されていないプロパティを解決するために使用されるフォールバックスタイルです。スタイルやアクティブなテーマにプロパティが見つからない場合、StyleKit はそのプロパティをフォールバックスタイルで検索します。

デフォルトでは、フォールバックスタイルは「Basic」スタイルと同様の基本的な外観を提供する内部スタイルに設定されています。

これをカスタムスタイルに設定したり、null に設定してフォールバックによる解決を完全に無効にしたりすることができます。null に設定すると、完全に白紙の状態から始めることになるため、通常よりも多くのプロパティを設定する必要がある点に注意してください。フォールバックスタイルのリファレンス実装はこちらで確認できます。

light : Component

ライトテーマコンポーネント。システムがライトモードで、かつthemeName が"System" の場合、あるいはthemeName が明示的に"Light" に設定されている場合に、インスタンス化され適用されます。

light: Theme {
    control.background.color: "#f0f0f0"
    button.hovered.background.color: "#4a90d9"
}

dark およびthemeNameも参照してください 。

palette : palette [read-only]

スタイルが適用されるコントロールのパレット。

このパレットを使用して、スタイル内の色を、スタイル設定の対象となっているコントロールのpalette に紐付けます。アプリケーションがコントロールに別のパレットを割り当てた場合、スタイルはそれに合わせて変更され、コントロールが再描画されます。

button.background.color: palette.accent
button.text.color: palette.buttonText

「StyleReader::palette」も参照してください 。

theme : Theme [read-only]

現在アクティブなテーマインスタンスです。これは、themeName の設定に応じて、light theme component 、dark theme component 、またはcustom themes のいずれかからインスタンス化されます。

スタイルプロパティを解決する際、StyleKit はまずこのテーマ内（StyleVariations を除く）でそのプロパティを検索します。プロパティが見つからない場合、Style 内で検索するようにフォールバックします。

themeName 、light 、およびdarkも参照してください 。

themeName : string

現在有効なテーマの名前です。デフォルト値は `"System"` であり、QStyleHints::colorScheme で報告されたカラースキームに応じて、light またはdark のいずれかが自動的に選択されます。

このプロパティを設定することで、このスタイルの現在のテーマを変更できます。

// Main.qml

StyleKit.style: YourStyleKitStyle {
    // Set a theme different from "System" at start-up
    themeName: "Dark"
}

ComboBox {
    // Let the user select a different theme at run-time
    model: StyleKit.style.availableThemeNames
    onCurrentTextChanged: StyleKit.style.themeName = currentText
}

サポートされている値：

注：テーマは 、定義されたStyle に固有のものであり、そのスタイルの現在のテーマとしてのみ設定できます。現在のテーマを有効にするには、そのスタイルが属するスタイルが、アプリケーション内のcurrent style である必要があります。

「 availableThemeNames 」および「theme 」も参照してください 。

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