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"
}
}
}まず、テキストタイプ用に新しい「down」状態を作成します。この状態は、MouseArea が押されたときに有効になり、離されたときに無効になります。
down状態には、暗黙のデフォルト状態（QML で最初に定義されたアイテムの状態）からの一連のプロパティ変更が含まれます。具体的には、テキストの `y ` プロパティを `160` に、回転を `180 ` に、color を red に設定します。
transitions: Transition {
from: ""; to: "down"; reversible: true
ParallelAnimation {
NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
ColorAnimation { duration: 500 }
}
}テキストが瞬時に最下部に表示されるのではなく、滑らかに移動するようにするため、2つの状態の間にトランジションを追加します。
from また、to は、トランジションが実行される状態の範囲を定義します。この場合、デフォルト状態から「down」状態へのトランジションを実装します。
ダウン状態からデフォルト状態に戻る際にも、同じ遷移を逆方向に実行したいので、reversible をtrue に設定します。これは、2つの遷移を別々に記述するのと同じ効果があります。
ParallelAnimation タイプを使用することで、2 種類のアニメーション（数値と色）が同時に開始されるようになります。代わりにSequentialAnimation を使用すれば、これらを順番に実行することも可能です。
状態と遷移の詳細については、「Qt Quick States」および「状態と遷移の例」を参照してください。
© 2026 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.
