関連する型

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

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

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

すべてのItem ベースのオブジェクトは、.qml ファイルのルート要素である場合、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 型は、状態遷移時にスムーズな変化を可能にします。遷移では、アニメーションと補間動作が定義可能です。状態アニメーションの作成については、アニメーションとトランジションを参照してください。