States and transitions

qcoderpro

Hi all,

I want to test this example and wrote the code below without the Grid part. The problem is that, the rectangle doesn't move like the example! I don't know why! Any idea?

import QtQuick
import QtQuick.Window

Window {
    width: 800
    height: 600
    visible: true

    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 }
                }
            }
        }
    }
}

Markkyboy

What rectangle?, it's the text that moves. Press and hold the text.

You can re- add the Grid/Cells, as they are not important to the text movement. The only thing they do when one is pressed, is change the colour of the text, but the text is set to to turn red when upside down.

qcoderpro

@Markkyboy
That's right. I thought pressed and clicked are the same but they are not.

What if I want to move the text when it's clicked? I use mouseArea.clicked === true but it's no influence!

The last question: Isn't using helloText that way inside the PropertyChanges correct? The program works properly but Qt Creator put a red line under it in the code and says: *Invalid property name "helloText"!

Markkyboy

@qcoderpro - yes, I neglected to point that out that 'mistake' in the example and went with intuition and made a subtle change to that nonsense little bit of code, as follows;

PropertyChanges { target: helloText; y: 460; rotation: 180; color: "red" }

I've compiled the code in SailfishSDK for my Sony Xperia 10ii device, with the given tweaks, it works as expected.

P.S. I'll play around with the pressed/clicked mouse part. I hadn't given it a thought and missed it in your question. I'll post my findings if any... maybe the animation needs to be different for automated text movement.

qcoderpro

@Markkyboy
Yes, it's a bit strange that this name: "down"; when: mouseArea.clicked === true doesn't work as expected.

Markkyboy

@qcoderpro - down is part of mouse.pressed, not mouse.clicked as far as I can glean.
So many things about Qt/QML often don't make sense, I just stumble through most if it ;)

qcoderpro

@Markkyboy
You mean if we change the name to something else, such as, "move", then mouseArea.clicked === true will work!? I don't think so!

Markkyboy

@qcoderpro - me neither.

What version of Qt are you using?, Qt5 or Qt6?, I'm stuck with Qt5 for now.

Regarding name: "down"...bla/bla. Have a little squint at the docs for State and its elements; https://doc.qt.io/qt-6/qml-qtquick-state.html ~ it even gives a mouse.clicked in the example.