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

Style QML Type

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

Import Statement: import Qt.labs.StyleKit
Inherits:

AbstractStyle

プロパティ

詳細説明

Style の完全なビジュアルスタイルを定義するためのStyleKit のルート型です。 Qt Quick Controls.スタイルによって、every control type （backgrounds 、indicators 、handles 、text 、padding など）の外観や、hovered 、pressed 、disabled などの状態に対するコントロールの反応（それらの間のアニメーションtransitions を含む）をカスタマイズできます。

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

次の例は、すべてのテーマで共有されるいくつかの構造プロパティを定義する最小限のスタイルで、色についてはライトテーマとダークテーマを分けています：

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

より完全な例については、StyleKit の例を参照してください。

注意: Qt.labモジュールの型は、将来のバージョンでも互換性が保たれる保証はありません。

Theme,CustomTheme,StyleVariation,ControlStyle,DelegateStyle,CustomControl, Property Resolutionも参照してください 。

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

Stretch : int [read-only]

デリゲートのimplicitWidth またはimplicitHeight に代入されると、デリゲートがその軸に沿って利用可能なスペースを埋めるようになるセンチネル値。利用可能なスペースは、margins やpadding のようなレイアウトプロパティによって制約されます。

たとえば、スライダーの溝を利用可能な幅いっぱいにする場合です：

slider {
    indicator.implicitWidth: Style.Stretch
    indicator.implicitHeight: 6
}

DelegateStyle::implicitWidth とDelegateStyle::implicitHeightも参照してください 。

customThemeNames : list<string> [read-only]

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

themeNames 、themeName 、CustomThemeも参照してください 。

dark : Component

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

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

light,themeName,Themeも参照してください 。

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,Themeも参照 。

palette : palette [read-only]

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

このパレットを使用して、スタイルの色をスタイル対象のコントロールのpalette にバインドします。アプリケーションがコントロールに別のパレットを割り当てると、スタイルが適応され、コントロールは再描画されます。

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

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

theme : Theme [read-only]

現在アクティブなテーマのインスタンス。light theme component 、dark theme component 、またはcustom themes のいずれかからインスタンス化され、themeName に依存します。

スタイル プロパティを解決する場合、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.themeNames
    onCurrentTextChanged: StyleKit.style.themeName = currentText
}

対応する値：

注: テーマは、それが定義されているStyle にローカルであり、そのスタイルの現在のテーマとしてのみ設定できます。現在のテーマを有効にするには、そのテーマが属するスタイルもアプリケーションのcurrent style でなければなりません。

themeNames およびthemeも参照してください 。

themeNames : list<string> [read-only]

"System","Light","Dark", を含む、利用可能なすべてのテーマ名。custom themes.

themeName およびcustomThemeNamesも参照のこと 。

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