関連するタイプ

多くのユーザーインターフェース設計は状態駆動型であり、インターフェースには現在の状態に応じて異なる構成があります。たとえば、交通信号機は、その状態に応じてフラグやライトを構成します。「stop 」状態では、赤信号が点灯し、黄信号と青信号は消灯します。 「caution 」状態では、黄色のライトが点灯し、他のライトは消灯します。

QMLにおいて、状態とは「State 」型で定義されたプロパティ設定のセットです。異なる設定によって、例えば次のようなことが可能です：

• 一部のUIコンポーネントを表示し、他のコンポーネントを非表示にする。
• ユーザーに利用可能な異なるアクションを表示する。
• アニメーションを開始、停止、または一時停止する。
• 新しい状態で必要となるスクリプトを実行する。
• 特定の項目のプロパティ値を変更する。
• 別のビューまたは画面を表示します。

.qml ファイルのルート要素であるすべての `Item` ベースのオブジェクトには、`state ` プロパティがあります。アイテムの `states ` プロパティに新しい `State ` オブジェクトを追加することで、追加の状態を指定できます。コンポーネント内の各状態には一意の `name` があり、デフォルトは空の文字列です。アイテムの現在の状態を変更するには、`state ` プロパティに状態の名前を設定します。

非視覚オブジェクトは、StateGroup 型を通じて状態を使用できます。

状態の作成

状態を作成するには、そのアイテムの状態のリストを保持するstates プロパティに、State オブジェクトを追加します。

警告信号コンポーネントには、「NORMAL 」と「CRITICAL 」の 2 つの状態があります。NORMAL 状態では、信号のcolor がgreen であり、警告フラグがdown であるとします。一方、CRITICAL 状態では、color がred であり、フラグがup であるとします。状態はState 型を使用してモデル化し、色とフラグの設定はPropertyChanges 型を使用してモデル化できます。

Rectangle {
    id: signal
    width: 200; height: 200
    state: "NORMAL"
    Flag { id: flag }

    states: [
        State {
            name: "NORMAL"
            PropertyChanges { target: signal; color: "green"}
            PropertyChanges { target: flag; state: "FLAG_DOWN"}
        },
        State {
            name: "CRITICAL"
            PropertyChanges { target: signal; color: "red"}
            PropertyChanges { target: flag; state: "FLAG_UP"}
        }
    ]
}

PropertyChanges 型は、オブジェクトのプロパティの値を変更します。オブジェクトはIDを介して参照されます。

さらに、state プロパティに適切なシグナル状態を割り当てることで、状態を変更することも可能です。状態の切り替えは、MouseArea 型を用いて、シグナルがマウスクリックを受信するたびに異なる状態を割り当てることで実現できます。

Rectangle {
    id: signalswitch
    width: 75; height: 75
    color: "blue"

    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (signal.state == "NORMAL")
                signal.state = "CRITICAL"
            else
                signal.state = "NORMAL"
        }
    }
}

State 型は、プロパティ値の変更を行うことだけに限定されません。以下のことも可能です：

• PropertyChanges を使用して、オブジェクトの既存のシグナルハンドラを上書きする。
• `AnchorChanges` を使用してアンカー値を変更する。

デフォルトの状態

Item ベースのすべてのコンポーネントには、state プロパティとデフォルト状態があります。デフォルト状態は空の文字列（"" ）であり、項目の初期プロパティ値をすべて含んでいます。デフォルト状態は、状態が変更される前のプロパティ値を管理するのに役立ちます。state プロパティを空の文字列に設定すると、デフォルト状態が読み込まれます。

When プロパティ

利便性のため、State 型にはwhen プロパティが用意されています。このプロパティは式にバインドでき、バインドされた式の評価結果がtrue となった際に状態を変更します。また、when プロパティは、式の評価結果がfalseとなった際に、状態をデフォルトの状態に戻します。

Rectangle {
    id: bell
    width: 75; height: 75
    color: "yellow"

    states: State {
                name: "RINGING"
                when: (signal.state == "CRITICAL")
                PropertyChanges {target: speaker; play: "RING!"}
            }
}

bell コンポーネントは、signal.state がCRITICAL の値となったたびに、RINGING の状態に切り替わります。

状態変化のアニメーション化

状態の変更は、値の急激な変化を引き起こします。Transition 型を使用すると、状態変更時の変化をより滑らかにすることができます。遷移では、アニメーションや補間挙動を定義できます。状態アニメーションの作成に関する詳細については、「アニメーションと遷移」を参照してください。