Qtクイックステート

関連する型

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

QMLでは、状態は State タイプで定義されたプロパティ構成のセットです。例えば、以下のような設定が可能です：

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

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

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

状態の作成

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

警告signal コンポーネントは、NORMAL とCRITICAL の2つの状態を持つことができます。NORMAL 状態では、シグナルのcolor はgreen で、警告flag はダウンしているとします。一方、CRITICAL の状態では、color がred で、フラグがup であるとする。状態をState 型で、色と旗の構成をPropertyChanges 型でモデル化することができる。

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

    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を通して参照される。コンポーネントの外部にあるオブジェクトも、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 と評価されるたびに状態を変更できます。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 、状態遷移をよりスムーズに変化させることができます。トランジションでは、アニメーションと補間動作が定義可能です。アニメーションとトランジションの記事で、状態アニメーションの作成について詳しく説明しています。

Animationの例では、基本的なステートセットを宣言し、それらの間にアニメーションのトランジションを適用する方法を示しています。

Qt Quick Behaviorsをステートで使用する」では、ビヘイビアを使用してステートの変更をアニメーション化する際によくある問題について説明しています。

ステートの早送り

トランジションでステートの変更を正しくアニメーションさせるために、最終的にステートが適用される前に、エンジンがステートを早送りしたり巻き戻したりする（つまり、内部的にステートを設定したり解除したりする）必要がある場合があります。そのプロセスは次のとおりです：

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

場合によっては、これが意図しない動作を引き起こすことがある。例えば、ビューのモデルやローダーのsourceComponentを変更するステートは、これらのプロパティを複数回設定します（適用、巻き戻し、再適用）。

状態の早送りは実装の詳細と考えるべきで、後のバージョンで変更される可能性があります。