Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML Anchor Left issues, can't figure out why it's not
Forum Updated to NodeBB v4.3 + New Features

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

Scheduled Pinned Locked Moved Solved QML and Qt Quick
6 Posts 2 Posters 1.2k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • EatonCodeE Offline
    EatonCodeE Offline
    EatonCode
    wrote on last edited by
    #1

    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.

    1 Reply Last reply
    0
    • ODБOïO Offline
      ODБOïO Offline
      ODБOï
      wrote on last edited by
      #2

      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
      
          }
      

      }

      }

      EatonCodeE 1 Reply Last reply
      0
      • ODБOïO Offline
        ODБOïO Offline
        ODБOï
        wrote on last edited by
        #3
        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
                        }
                    }
                }
            }
        }
        
        
        EatonCodeE 1 Reply Last reply
        1
        • ODБOïO 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
          
              }
          

          }

          }

          EatonCodeE Offline
          EatonCodeE Offline
          EatonCode
          wrote on last edited by
          #4

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

          1 Reply Last reply
          1
          • ODБOïO 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
                            }
                        }
                    }
                }
            }
            
            
            EatonCodeE Offline
            EatonCodeE Offline
            EatonCode
            wrote on last edited by
            #5

            @LeLev Your second example is pretty amazing also.

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

            ODБOïO 1 Reply Last reply
            0
            • EatonCodeE EatonCode

              @LeLev Your second example is pretty amazing also.

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

              ODБOïO Offline
              ODБOïO Offline
              ODБOï
              wrote on last edited by
              #6

              @EatonCode ;)

              1 Reply Last reply
              1

              • Login

              • Login or register to search.
              • First post
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved