Qt Quick 状態

関連するタイプ

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

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

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

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

アイテム以外のオブジェクトは、StateGroup 型を通じて状態を使用できます。

状態の作成

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

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

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

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

PropertyChanges 型は、オブジェクトのプロパティの値を変更します。オブジェクトはIDを通じて参照されます。コンポーネント外のオブジェクトも、id プロパティを使用して参照されます。その例として、外部のflag オブジェクトに対するプロパティの変更が挙げられます。

さらに、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 型は、プロパティ値の変更を行うことだけに限定されません。以下のことも可能です：

• スクリプトを実行するStateChangeScript
• オブジェクトの既存のシグナルハンドラをオーバーライドするPropertyChanges
• Item の親オブジェクトを変更するParentChange
• アンカー値を変更するAnchorChanges

デフォルトの状態

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

when プロパティ

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

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

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

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

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

状態の変更は、値の急激な変化を引き起こします。「Transition 」タイプを使用すると、状態の変更時に変化を滑らかにすることができます。遷移では、アニメーションや補間動作を定義できます。状態アニメーションの作成に関する詳細は、「アニメーションと遷移」の記事をご覧ください。

「アニメーション」の例では、基本的な状態のセットを宣言し、それらの間でアニメーション付き遷移を適用する方法を示しています。

「Qt Quick の挙動と状態の併用」では、挙動（Behaviors）を使用して状態変化をアニメーション化する際に生じがちな問題について解説しています。

状態の早送り

Transitionが状態変化を正しくアニメーション化するためには、状態が最終的に適用される前に、エンジンが状態を早送りおよび巻き戻し（つまり、内部的に状態を設定および解除）を行う必要がある場合があります。そのプロセスは以下の通りです：

1. 状態を早送りして、終了値の完全なセットを決定します。
2. 状態を巻き戻します。
3. トランジションを伴って、状態が完全に適用されます。

場合によっては、これにより意図しない動作が生じる可能性があります。例えば、ビューのモデルやLoaderのsourceComponentを変更する状態では、これらのプロパティが複数回（適用、巻き戻し、そして再適用）設定されることになり、比較的負荷が高くなる可能性があります。

状態の早送り処理は実装上の詳細と見なすべきであり、将来のバージョンで変更される可能性があります。