QML Anchor Left issues, can't figure out why it's not

[EatonCode]

I have 2 rectangles. 1 blue and 1 pink, if I change the parent on the blue box, I want to the pink box to change position to the left. If I change the parent back, I want to reposition the pink box behind the blue box.

Here it the source code...

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Window 2.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: "gray"

    Window {
        width: 100;
        height: 100;
        visible: false;
        title: "wow!"
        id: wnd

        Rectangle {
            id: greenRect
            anchors.fill: parent

            MouseArea {
                anchors.fill: parent

                onClicked: {
                     blueRect.state = "docked"
                    blueRect.color = "green"
                }
            }
            
        }


         // @disable-check M16
        onClosing: {
            blueRect.state = "docked"
        }



    }

    Item {
       // width: 200; height: 100
                x: 10; y: 10;
        Rectangle {
            id: redRect
            anchors.fill: blueRect

        }

        Rectangle {
            id: blueRect
            width: 50; height: 50

            color: "blue"
            anchors.left: parent.left

            states: [
                State {
                    name: "undocked"
                    ParentChange { target: blueRect; parent: greenRect; }

                },
                State {
                    name: "docked"
                    ParentChange { target: blueRect; parent: redRect; }
                }
            ]

            MouseArea {
                anchors.fill: parent;
                onClicked: {
                    blueRect.state = "undocked"
                    wnd.visible = true
                }
            }
        }

        Rectangle {
            id: pinkRect
            color: "pink"
             width: 50
             height: 50
             anchors.left: redRect.right
        }
    }


}

Any help would be appreciated.

Thanks.

[ODБOï]

hi,
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Window 2.2

ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
color: "gray"

Window {
    width: 100;
    height: 100;
    visible: false;
    title: "wow!"
    id: wnd

    Rectangle {
        id: greenRect
        anchors.fill: parent

        MouseArea {
            anchors.fill: parent

            onClicked: {
                 blueRect.state = "docked"
                blueRect.color = "green"
            }
        }

    }


     // @disable-check M16
    onClosing: {
        blueRect.state = "docked"
    }



}

Row{
Rectangle{
id:redRect

    width: 50; height: 50
    visible: blueRect.state=="docked"
    color: "red"
}
    Rectangle {
        id: blueRect
        width: 50; height: 50

        color: "blue"


        states: [
            State {
                name: "undocked"
                ParentChange { target: blueRect; parent: greenRect; }

            },
            State {
                name: "docked"
                ParentChange { target: blueRect; parent: redRect; }
            }
        ]

        MouseArea {
            anchors.fill: parent;
            onClicked: {
                blueRect.state = "undocked"
                wnd.visible = true
            }
        }
    }

    Rectangle {
        id: pinkRect
        color: "pink"
         width: 50
         height: 50

    }

}

}

[ODБOï]

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Window 2.2

ApplicationWindow {
    visible: true
    width: 600
    height: 200
    title: qsTr("Hello World")
    color: "gray"
    id: root
    Window {
        width: 600;
        height: 100;
        visible: false;
        title: "wow!"
        id: wnd
        Row {
            id: greenRect
            anchors.fill: parent
            spacing: 5
            onChildrenChanged: wnd.visible=true
        }
    }
    Row{
        id:back
        spacing: 5
        Repeater{
            model : 8
            Rectangle{
                height: 60;width: 60
                color: "red"
                Text{
                text:index
                }
                MouseArea{
                    anchors.fill: parent
                    onClicked: parent.parent === greenRect ? parent.parent = back : parent.parent = greenRect
                }
            }
        }
    }
}

[EatonCode]

@LeLev This is perfect, I had no idea that "visible" had an effect on the layout. I am very much still learning... Thanks.

[EatonCode]

@LeLev Your second example is pretty amazing also.

http://www.eatoncode.com/resources/shareit/Screencast_19-38_05-01-2018.mp4

[ODБOï]

@EatonCode ;)