Qt – Windowsでアイコンのピンボール

著者：津路高広

公開日：2020/04/10

最終更新日：2020/04/10

カテゴリー：技術情報

津路です。
Qt Creator – stddef.h no such file – Kits追加時の注意では、ささっと画面だけ作成しました。
アイコンを、Rectangleの間に動かすイベントを起こすため、MouseAreaという要素を、Rectangle内に設置します。

main.qml内から参照するため、Page1Formに設置したUIアイテムをexportします。
以下の画像参照

main.qmlをオープンし、state machineを利用するため、SwipeViewに、以下のコードを書きます。

    SwipeView {
        id: swipeView
        anchors.fill: parent
        currentIndex: tabBar.currentIndex

        Page1Form {
            id: page
            mouseArea {
                onClicked: stateGroup.state = ' '
            }
            mouseArea1 {
                onClicked: stateGroup.state = 'State1'
            }
            mouseArea2 {
                onClicked: stateGroup.state = 'State2'
            }
        }

クリックしたときに、StateGroupのstateを更新します。
無しは、デフォルト位置に戻す。他は、それぞれのStateにします。
次に、StateGroupを定義します。

    StateGroup {
        id: stateGroup
        states: [
            State {
                name: "State1"
                PropertyChanges {
                    target: page.icon
                    x: page.middleRightRect.x
                    y: page.middleRightRect.y

                }
            },
            State {
                name: "State2"
                PropertyChanges {
                    target: page.icon
                    x: page.bottomLeftRect.x
                    y: page.bottomLeftRect.y
                }
            }

        ]
    }

起動して、それぞれのRectangleをクリックすると、アイコンが、クリック先に移動します。