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 ステートとステートとトランジションの例を参照してください。

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

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.