QMLチュートリアル3 - 状態と遷移

この章では、ステートとトランジションを導入することで、この例をもう少しダイナミックにします。

テキストが画面の下に移動し、回転し、クリックされると赤くなるようにします。

これがQMLのコードです：

import QtQuick

Rectangle {
    id: page
    width: 320; height: 480
    color: "lightgray"

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true

        MouseArea { id: mouseArea; anchors.fill: parent }

        states: State {
            name: "down"; when: mouseArea.pressed == true
            PropertyChanges {
                helloText {
                    y: 160
                    rotation: 180
                    color: "red"
                }
            }
        }

        transitions: Transition {
            from: ""; to: "down"; reversible: true
            ParallelAnimation {
                NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
                ColorAnimation { duration: 500 }
            }
        }
    }

    Grid {
        id: colorPicker
        x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
        rows: 2; columns: 3; spacing: 3

        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
    }
}

チュートリアル

        states: State {
            name: "down"; when: mouseArea.pressed == true
            PropertyChanges {
                helloText {
                    y: 160
                    rotation: 180
                    color: "red"
                }
            }
        }

まず、テキストタイプに新しいダウン状態を作ります。この状態は、MouseArea を押すとアクティブになり、離すと非アクティブになります。

ダウン状態には、暗黙のデフォルト状態（QMLで最初に定義された項目）からのプロパティの変更が含まれます。具体的には、テキストのy プロパティを160 に、回転を180 に、そしてcolor を赤に設定しています。

        transitions: Transition {
            from: ""; to: "down"; reversible: true
            ParallelAnimation {
                NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
                ColorAnimation { duration: 500 }
            }
        }

テキストを瞬時に一番下に表示するのではなく、スムーズに移動させたいので、2つの状態の間に遷移を追加します。

from とは、トランジションが実行される状態を定義します。この場合、デフォルトの状態からto 下の状態へのトランジションが必要です。

ダウン状態からデフォルト状態に戻るときに、同じトランジションを逆に実行させたいので、reversible をtrue に設定します。これは、2つのトランジションを別々に書くのと同じことです。

ParallelAnimation 、2種類のアニメーション（数字と色）が同時に始まるようにします。また、SequentialAnimation を使用することで、2つのアニメーションを同時に実行することもできます。

ステートとトランジションの詳細については、Qt Quick Statesとステートとトランジションの例を参照してください。

QML チュートリアル 2 - QML コンポーネント

©2024 The Qt Company Ltd. 本書に含まれる文書の著作権は、それぞれの所有者に帰属します。本書で提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の商標です。その他すべての商標は、それぞれの所有者に帰属します。