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



  • 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.

    alt text

    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.



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

    }

    }



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


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






Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.