ControlStateStyle QML Type

指定された状態におけるコントロールのスタイルを説明します。詳細...

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

• 継承されたメンバーを含む、すべてのメンバーの一覧

プロパティ

• checked : ControlStateStyle
• disabled : ControlStateStyle
• focused : ControlStateStyle
• highlighted : ControlStateStyle
• hovered : ControlStateStyle
• pressed : ControlStateStyle
• vertical : ControlStateStyle

詳細な説明

ControlStateStyle は、特定の状態にあるコントロールのスタイルを記述します。ControlStyle は ControlStateStyle を継承しています。これは、 が通常状態を表すためであり、ControlStyle に直接設定されたプロパティは、他の状態がアクティブでないときのコントロールの外観を記述します。状態固有のオーバーライドは、pressed 、hovered 、checked などのネストされた状態を通じて設定されます。

ネストされた状態は互いに排他的ではありません。複数の状態が同時に有効になることがあります。たとえば、ボタンはホバー状態と押下状態を同時に持つことができます。 複数の状態がアクティブな場合、一致するすべての状態オーバーライドが適用されます。同じプロパティが複数のアクティブな状態で設定されている場合、競合は次の優先順位に従って解決されます：pressed 、hovered 、highlighted 、focused 、checked 、vertical 。例えば、コントロールがpressed かつchecked の状態にある場合、pressed.background.color はchecked.background.color よりも優先されます。

disabled 状態は例外です。無効化されたコントロールは操作できないため、pressed 、hovered 、highlighted 、およびfocused といった状態は適用されません。ただし、disabled は、checked やvertical といった状態と組み合わせることが可能です。

状態のネストが深いほど、その優先度は高くなります。例えば、hovered とpressed の両方がアクティブな場合、hovered.pressed.background.color はhovered.background.color よりも優先されます。ネストの順序は関係ありません。hovered.pressed とpressed.hovered は同等です。ただし、両方の形式が同時に使用された場合、どちらが優先されるかは未定義です。

状態をさらに深くネストさせることで、競合を解決することもできます。hovered とchecked の両方で同じプロパティが設定されている場合、優先順位によりhovered の値が優先されます。その状況で「checked」の値を優先させたい場合や、まったく異なる値を使用したい場合は、hovered.checked でそのプロパティを上書きすることで、両方の設定よりも優先させることができます。

以下のスニペットは、ボタンの状態に応じて異なるスタイルを適用する方法を示しています：

button {
    text.color: "white"
    background.color: "cornflowerblue"

    pressed.background.color: "cadetblue"
    hovered.background.color: "dodgerblue"
    highlighted.background.color: "lightblue"
    focused.background.color: "lightskyblue"
    checked.background.color: "darkseagreen"
    disabled.background.color: "gray"

    // hovered.checked takes precedence over both hovered and checked
    hovered.checked.background.color: "mediumseagreen"

    hovered.checked {
        // Nested states are grouped properties, so you can use the compact
        // per-property form above, or structure them hierarchically for
        // better readability. Both forms are functionally equivalent.
        pressed {
            // hovered.checked.pressed takes precedence over hovered.checked
            background {
                color: "mediumaquamarine"
                scale: 0.95
            }
            text {
                bold: true
            }
        }
    }
}

関連項目： ControlStyle 、DelegateStyle 、StyleKit プロパティの解決、およびFallbackStyle リファレンス。

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

checked : ControlStateStyle

コントロールがchecked の状態にあるときに、スタイルの上書きが適用されます。

「 pressed 」、「hovered 」、「highlighted 」、「focused 」、「vertical 」、「disabled 」、および「StyleReader.checked 」も参照してください 。

disabled : ControlStateStyle

コントロールが無効化されているときに適用されるスタイルのオーバーライド。

無効化されたコントロールは操作できないため、pressed 、hovered 、highlighted 、およびfocused は、無効化と同時に適用されることはありません。

関連項目： pressed 、hovered 、highlighted 、focused 、checked 、vertical 、およびStyleReader.enabled 。

focused : ControlStateStyle

コントロールがfocused の状態にあるときに、スタイルの上書きが適用されます。

「 pressed 」、「hovered 」、「highlighted 」、「checked 」、「vertical 」、「disabled 」、および「StyleReader.focused 」も参照してください 。

highlighted : ControlStateStyle

コントロールがhighlighted の状態にあるときに、スタイルの上書きが適用されます。

「 pressed 」、「hovered 」、「focused 」、「checked 」、「vertical 」、「disabled 」、および「StyleReader.highlighted 」も参照してください 。

hovered : ControlStateStyle

コントロールがhovered の状態にあるときに、スタイルのオーバーライドが適用されます。

「 pressed 」、「highlighted 」、「focused 」、「checked 」、「vertical 」、「disabled 」、および「StyleReader.hovered 」も参照してください 。

pressed : ControlStateStyle

コントロールがpressed の状態のときに、スタイルのオーバーライドが適用されます。

「 hovered 」、「highlighted 」、「focused 」、「checked 」、「vertical 」、「disabled 」、および「StyleReader.pressed 」も参照してください 。

vertical : ControlStateStyle

コントロールが「vertical 」の場合に適用されるスタイルのオーバーライド（例：垂直方向の「Slider 」や「ScrollBar 」など）。

「 pressed 」、「hovered 」、「highlighted 」、「focused 」、「checked 」、「disabled 」、および「StyleReader.vertical 」も参照してください 。