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. Window resize problem
Forum Updated to NodeBB v4.3 + New Features

Window resize problem

Scheduled Pinned Locked Moved Solved QML and Qt Quick
20 Posts 6 Posters 1.3k Views 1 Watching
  • 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.
  • SGaistS SGaist

    Hi,

    Without a minimal example showing your issue, it's impossible to answer your question.

    Qt version and OS used are also a good thing to provide.

    V Offline
    V Offline
    Vijaykarthikeyan
    wrote on last edited by Vijaykarthikeyan
    #3

    @SGaist

    Rectangle
                {
                    id:mapContainer
                    width:parent.width
                    height: parent.height
                    
    
                    MouseArea
                                {
                                    id:click
                                    anchors.fill: parent
                                    x:parent.x
                                    y:parent.y
                                    acceptedButtons: Qt.LeftButton| Qt.RightButton
    
                                    onClicked: function(mouse)
                                        {
                                            mouse.accepted=true
                                            
                                           f((mapContainer.width<model.width)&&(mapContainer.height<model.height))
                                                    {
                                                        swapped()
                                                        console.log("small map and Big model in Bottom")
                                                    }
    
                                        
                                        }
                                }
    
                        }
                
    
     Rectangle
                {
                    id: model
                    width:0.18*root.width
                    height:.24*root.height
                    border.color: "black"
                    border.width: 3
                    visible: true
                    color:"White"
                    anchors.margins: 0.01*parent.width
                 
                            MouseArea
                                {
                                    id:model_area
                                    anchors.fill: parent
                                    drag.target: parent
    
                                    onClicked:
                                        {
                                            if((model.width<mapContainer.width)&&(model.height<mapContainer.height))
                                                {
                                                   swapped()
                                                   console.log("small model and Big Map in Bottom")
                                                }
    
                                            
    
                                        }
                                }
                        }
    
                
    
    function swapped()
            {
    
                if (mapContainer.z==0)
                    {
                        map_x  = mapContainer.x
                        map_y  = mapContainer.y
                        width2 = mapContainer.width
                        height2= mapContainer.height
    
                        mapContainer.x = model.x
                        mapContainer.y = model.y
                        mapContainer.z = 1
                        mapContainer.width = model.width
                        mapContainer.height= model.height
                        mapContainer.anchors.margins=0.01*root.width
                        model.x = map_x
                        model.y = map_y
                        model.z=0
                        model.width = width2
                        model.height= height2
                        model.anchors.margins=0
                        cam.z=1
                    }
    
                else
                    {
                        map_x  = model.x
                        map_y  = model.y
                        width2 = model.width
                        height2= model.height
    
                        //clearAnchors(model)
                        model.x = mapContainer.x
                        model.y = mapContainer.y
                        model.width = mapContainer.width
                        model.anchors.margins=10
    
                        mapContainer.x = map_x
                        mapContainer.y = map_y
                        mapContainer.z=0
                        mapContainer.width = width2
                        mapContainer.height= height2
                        mapContainer.anchors.margins=0
    
                }
            }
    
    1 Reply Last reply
    0
    • SGaistS Offline
      SGaistS Offline
      SGaist
      Lifetime Qt Champion
      wrote on last edited by
      #4

      That's not a minimal sample.

      Please reduce it to the bare minimum (and a minimum that can be used directly to test).

      Interested in AI ? www.idiap.ch
      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

      V 1 Reply Last reply
      0
      • SGaistS SGaist

        That's not a minimal sample.

        Please reduce it to the bare minimum (and a minimum that can be used directly to test).

        V Offline
        V Offline
        Vijaykarthikeyan
        wrote on last edited by Vijaykarthikeyan
        #5

        @SGaist

        Rectangle
                    {
                        id:mapContainer
                        width:parent.width
                        height: parent.height
                        z:0
                        MouseArea
                                    {
                                        id:click
                                        anchors.fill: parent
                                        acceptedButtons: Qt.LeftButton| Qt.RightButton
        
                                        onClicked: function(mouse)
                                            {
                                                mouse.accepted=true
                                                
                                               
                                       if((mapContainer.width<model.width)&& 
                                           (mapContainer.height<model.height))
                                                        {
                                                            swapped();
                                                        }
                                            }
                                    }
        
                            }
                    
         Rectangle
                    {
                        id: model
                        width:0.18*root.width
                        height:.24*root.height              
                        visible: true
                        z:1
                        anchors.margins: 0.01*parent.width
                     
                                MouseArea
                                    {
                                        id:model_area
                                        anchors.fill: parent
        
                                        onClicked:
                                            {
                                                
                                      if((model.width<mapContainer.width)&& 
                                      (model.height<mapContainer.height))
                                                    {
                                                       swapped()                                 
                                            }
                                    }
                            }
        }
        
        function swapped()
                {
        
                    if (mapContainer.z==0)
                        {
                            map_x  = mapContainer.x
                            map_y  = mapContainer.y
                            width2 = mapContainer.width
                            height2= mapContainer.height
        
                            mapContainer.x = model.x
                            mapContainer.y = model.y
                            mapContainer.z = 1
                            mapContainer.width = model.width
                            mapContainer.height= model.height
                            mapContainer.anchors.margins=0.01*root.width
                            model.x = map_x
                            model.y = map_y
                            model.z=0
                            model.width = width2
                            model.height= height2
                            model.anchors.margins=0
                            cam.z=1
                        }
        
                    else
                        {
                            map_x  = model.x
                            map_y  = model.y
                            width2 = model.width
                            height2= model.height
        
                            model.x = mapContainer.x
                            model.y = mapContainer.y
                            model.width = mapContainer.width
                            model.anchors.margins=10
        
                            mapContainer.x = map_x
                            mapContainer.y = map_y
                            mapContainer.z=0
                            mapContainer.width = width2
                            mapContainer.height= height2
                            mapContainer.anchors.margins=0
        
                    }
                }
        
        JonBJ 1 Reply Last reply
        0
        • V Vijaykarthikeyan

          @SGaist

          Rectangle
                      {
                          id:mapContainer
                          width:parent.width
                          height: parent.height
                          z:0
                          MouseArea
                                      {
                                          id:click
                                          anchors.fill: parent
                                          acceptedButtons: Qt.LeftButton| Qt.RightButton
          
                                          onClicked: function(mouse)
                                              {
                                                  mouse.accepted=true
                                                  
                                                 
                                         if((mapContainer.width<model.width)&& 
                                             (mapContainer.height<model.height))
                                                          {
                                                              swapped();
                                                          }
                                              }
                                      }
          
                              }
                      
           Rectangle
                      {
                          id: model
                          width:0.18*root.width
                          height:.24*root.height              
                          visible: true
                          z:1
                          anchors.margins: 0.01*parent.width
                       
                                  MouseArea
                                      {
                                          id:model_area
                                          anchors.fill: parent
          
                                          onClicked:
                                              {
                                                  
                                        if((model.width<mapContainer.width)&& 
                                        (model.height<mapContainer.height))
                                                      {
                                                         swapped()                                 
                                              }
                                      }
                              }
          }
          
          function swapped()
                  {
          
                      if (mapContainer.z==0)
                          {
                              map_x  = mapContainer.x
                              map_y  = mapContainer.y
                              width2 = mapContainer.width
                              height2= mapContainer.height
          
                              mapContainer.x = model.x
                              mapContainer.y = model.y
                              mapContainer.z = 1
                              mapContainer.width = model.width
                              mapContainer.height= model.height
                              mapContainer.anchors.margins=0.01*root.width
                              model.x = map_x
                              model.y = map_y
                              model.z=0
                              model.width = width2
                              model.height= height2
                              model.anchors.margins=0
                              cam.z=1
                          }
          
                      else
                          {
                              map_x  = model.x
                              map_y  = model.y
                              width2 = model.width
                              height2= model.height
          
                              model.x = mapContainer.x
                              model.y = mapContainer.y
                              model.width = mapContainer.width
                              model.anchors.margins=10
          
                              mapContainer.x = map_x
                              mapContainer.y = map_y
                              mapContainer.z=0
                              mapContainer.width = width2
                              mapContainer.height= height2
                              mapContainer.anchors.margins=0
          
                      }
                  }
          
          JonBJ Offline
          JonBJ Offline
          JonB
          wrote on last edited by JonB
          #6

          @Vijaykarthikeyan
          So in response to @SGaist's request for a "bare minimum" you have copied and pasted what you had already posted, right?

          V 1 Reply Last reply
          0
          • JonBJ JonB

            @Vijaykarthikeyan
            So in response to @SGaist's request for a "bare minimum" you have copied and pasted what you had already posted, right?

            V Offline
            V Offline
            Vijaykarthikeyan
            wrote on last edited by
            #7

            @JonB No..wrong..reduced the code to the atmost minimum..beyond that,you can't get the code structure correct..defining 2 rectangles..defining swapping function..called it in both rectangles..Besides that,how could one reduce as much as it is?

            JonBJ 1 Reply Last reply
            0
            • V Vijaykarthikeyan

              @JonB No..wrong..reduced the code to the atmost minimum..beyond that,you can't get the code structure correct..defining 2 rectangles..defining swapping function..called it in both rectangles..Besides that,how could one reduce as much as it is?

              JonBJ Offline
              JonBJ Offline
              JonB
              wrote on last edited by
              #8

              @Vijaykarthikeyan
              So I was wrong even though I compared the two, they were within one line of each other and the only difference I could see was the removal one one already commented-out line? And all those lines are required, without reducing it the problem does not happen?

              Anyway, good luck, perhaps someone will accept this.

              V 1 Reply Last reply
              0
              • JonBJ JonB

                @Vijaykarthikeyan
                So I was wrong even though I compared the two, they were within one line of each other and the only difference I could see was the removal one one already commented-out line? And all those lines are required, without reducing it the problem does not happen?

                Anyway, good luck, perhaps someone will accept this.

                V Offline
                V Offline
                Vijaykarthikeyan
                wrote on last edited by
                #9

                @JonB If Even I gave you your desired example. are you guys would help me? No..it is never going to happen since it was never happened before. I sorted out the problems on my own throughout these days. you guys only came here to find out the non-important errors claiming those are the essential one and blaming me to go and study go and study, go and study.

                JonBJ B 3 Replies Last reply
                0
                • V Vijaykarthikeyan

                  @JonB If Even I gave you your desired example. are you guys would help me? No..it is never going to happen since it was never happened before. I sorted out the problems on my own throughout these days. you guys only came here to find out the non-important errors claiming those are the essential one and blaming me to go and study go and study, go and study.

                  JonBJ Offline
                  JonBJ Offline
                  JonB
                  wrote on last edited by
                  #10

                  @Vijaykarthikeyan
                  Yes, you say the same each time. Everybody here is bad. Not much point asking if you never get any useful help and sort it out yourself.

                  V 1 Reply Last reply
                  0
                  • V Vijaykarthikeyan

                    @JonB If Even I gave you your desired example. are you guys would help me? No..it is never going to happen since it was never happened before. I sorted out the problems on my own throughout these days. you guys only came here to find out the non-important errors claiming those are the essential one and blaming me to go and study go and study, go and study.

                    B Offline
                    B Offline
                    Bob64
                    wrote on last edited by
                    #11

                    @Vijaykarthikeyan it's not a very active forum. There are only a couple of real experts who hang out here and I imagine they are busy. Unless an answer is obvious or you make it really easy to reproduce a problem - i.e. by providing a small example which can be run easily - it is unlikely that you will get a lot of help.

                    I have asked a few questions here that have gone unanswered. That's the way it is. Nobody owes me anything.

                    V 1 Reply Last reply
                    0
                    • V Vijaykarthikeyan

                      @JonB If Even I gave you your desired example. are you guys would help me? No..it is never going to happen since it was never happened before. I sorted out the problems on my own throughout these days. you guys only came here to find out the non-important errors claiming those are the essential one and blaming me to go and study go and study, go and study.

                      JonBJ Offline
                      JonBJ Offline
                      JonB
                      wrote on last edited by
                      #12

                      @Vijaykarthikeyan
                      Intended as a constructive suggestion: if you are not happy with the answers here, maybe post a question to https://stackoverflow.com/ ? If you get an answer there they tend to be more "formal", perhaps will give you a solution in the form you would like.

                      1 Reply Last reply
                      0
                      • GrecKoG Offline
                        GrecKoG Offline
                        GrecKo
                        Qt Champions 2018
                        wrote on last edited by
                        #13

                        Here's a screenshot of what I have when running your code : f47432c5-7371-46b1-8589-2ef114998f41-image.png

                        Not really self explanatory. Why is it 100 lines long to swap 2 items?
                        It also refers to variable not declared, root, map_x, map_y.

                        Your original question is not very clear, next time you might want to include a visual schema of what you want, it will be easier to understand.

                        Anyway, here's what I would do if I understood correctly what you want:

                        import QtQuick 2.15
                        import QtQuick.Window 2.15
                        
                        Window {
                            id: root
                        
                            width: 640
                            height: 480
                            visible: true
                        
                            property bool graphInCorner: true
                        
                            Rectangle {
                                id: fullContainer
                                width: parent.width
                                height: parent.height
                                border.width: 1
                            }
                        
                            Rectangle {
                                id: cornerContainer
                                width: 0.18 * parent.width
                                height: 0.24 * parent.height
                                border.width: 1
                            }
                            Text {
                                parent: root.graphInCorner ? fullContainer : cornerContainer
                                anchors.fill: parent
                                text: "MAP"
                                horizontalAlignment: Text.AlignHCenter
                                verticalAlignment: Text.AlignVCenter
                                MouseArea {
                                    anchors.fill: parent
                                    onClicked: root.graphInCorner = !root.graphInCorner
                                }
                            }
                            Text {
                                parent: root.graphInCorner ? cornerContainer : fullContainer
                                anchors.fill: parent
                                text: "GRAPH"
                                horizontalAlignment: Text.AlignHCenter
                                verticalAlignment: Text.AlignVCenter
                                MouseArea {
                                    anchors.fill: parent
                                    onClicked: root.graphInCorner = !root.graphInCorner
                                }
                            }
                        }
                        

                        Have two container parents and swap the parent of the graph and map items to one of those.

                        V 3 Replies Last reply
                        3
                        • GrecKoG GrecKo

                          Here's a screenshot of what I have when running your code : f47432c5-7371-46b1-8589-2ef114998f41-image.png

                          Not really self explanatory. Why is it 100 lines long to swap 2 items?
                          It also refers to variable not declared, root, map_x, map_y.

                          Your original question is not very clear, next time you might want to include a visual schema of what you want, it will be easier to understand.

                          Anyway, here's what I would do if I understood correctly what you want:

                          import QtQuick 2.15
                          import QtQuick.Window 2.15
                          
                          Window {
                              id: root
                          
                              width: 640
                              height: 480
                              visible: true
                          
                              property bool graphInCorner: true
                          
                              Rectangle {
                                  id: fullContainer
                                  width: parent.width
                                  height: parent.height
                                  border.width: 1
                              }
                          
                              Rectangle {
                                  id: cornerContainer
                                  width: 0.18 * parent.width
                                  height: 0.24 * parent.height
                                  border.width: 1
                              }
                              Text {
                                  parent: root.graphInCorner ? fullContainer : cornerContainer
                                  anchors.fill: parent
                                  text: "MAP"
                                  horizontalAlignment: Text.AlignHCenter
                                  verticalAlignment: Text.AlignVCenter
                                  MouseArea {
                                      anchors.fill: parent
                                      onClicked: root.graphInCorner = !root.graphInCorner
                                  }
                              }
                              Text {
                                  parent: root.graphInCorner ? cornerContainer : fullContainer
                                  anchors.fill: parent
                                  text: "GRAPH"
                                  horizontalAlignment: Text.AlignHCenter
                                  verticalAlignment: Text.AlignVCenter
                                  MouseArea {
                                      anchors.fill: parent
                                      onClicked: root.graphInCorner = !root.graphInCorner
                                  }
                              }
                          }
                          

                          Have two container parents and swap the parent of the graph and map items to one of those.

                          V Offline
                          V Offline
                          Vijaykarthikeyan
                          wrote on last edited by
                          #14

                          @GrecKo understood..can i have some question

                          1 Reply Last reply
                          0
                          • JonBJ JonB

                            @Vijaykarthikeyan
                            Yes, you say the same each time. Everybody here is bad. Not much point asking if you never get any useful help and sort it out yourself.

                            V Offline
                            V Offline
                            Vijaykarthikeyan
                            wrote on last edited by
                            #15

                            @JonB Whenever I asking any doubt,at the end of the day,the intend of the topic diverted as off your desire. Then.what's the purpose of asking question? When I came here for one small doubt, you guys totally diverting it to somewhere which is not important,indeed not relevant to the topic, finally leads to find the solution on my own

                            1 Reply Last reply
                            0
                            • B Bob64

                              @Vijaykarthikeyan it's not a very active forum. There are only a couple of real experts who hang out here and I imagine they are busy. Unless an answer is obvious or you make it really easy to reproduce a problem - i.e. by providing a small example which can be run easily - it is unlikely that you will get a lot of help.

                              I have asked a few questions here that have gone unanswered. That's the way it is. Nobody owes me anything.

                              V Offline
                              V Offline
                              Vijaykarthikeyan
                              wrote on last edited by
                              #16

                              @Bob64 I ready to give anything the speakers need to see..Perhaps,they are totally diverting the intent of the question. If I gave a code snippet,they didn't tell me to repost it or correct it but always insulting the needy like go and study the documrentation, go and study the documentation.. I go through the documentation many times before coming here, If the solution was there,why should I coming here to clear my doubt?

                              1 Reply Last reply
                              0
                              • GrecKoG GrecKo

                                Here's a screenshot of what I have when running your code : f47432c5-7371-46b1-8589-2ef114998f41-image.png

                                Not really self explanatory. Why is it 100 lines long to swap 2 items?
                                It also refers to variable not declared, root, map_x, map_y.

                                Your original question is not very clear, next time you might want to include a visual schema of what you want, it will be easier to understand.

                                Anyway, here's what I would do if I understood correctly what you want:

                                import QtQuick 2.15
                                import QtQuick.Window 2.15
                                
                                Window {
                                    id: root
                                
                                    width: 640
                                    height: 480
                                    visible: true
                                
                                    property bool graphInCorner: true
                                
                                    Rectangle {
                                        id: fullContainer
                                        width: parent.width
                                        height: parent.height
                                        border.width: 1
                                    }
                                
                                    Rectangle {
                                        id: cornerContainer
                                        width: 0.18 * parent.width
                                        height: 0.24 * parent.height
                                        border.width: 1
                                    }
                                    Text {
                                        parent: root.graphInCorner ? fullContainer : cornerContainer
                                        anchors.fill: parent
                                        text: "MAP"
                                        horizontalAlignment: Text.AlignHCenter
                                        verticalAlignment: Text.AlignVCenter
                                        MouseArea {
                                            anchors.fill: parent
                                            onClicked: root.graphInCorner = !root.graphInCorner
                                        }
                                    }
                                    Text {
                                        parent: root.graphInCorner ? cornerContainer : fullContainer
                                        anchors.fill: parent
                                        text: "GRAPH"
                                        horizontalAlignment: Text.AlignHCenter
                                        verticalAlignment: Text.AlignVCenter
                                        MouseArea {
                                            anchors.fill: parent
                                            onClicked: root.graphInCorner = !root.graphInCorner
                                        }
                                    }
                                }
                                

                                Have two container parents and swap the parent of the graph and map items to one of those.

                                V Offline
                                V Offline
                                Vijaykarthikeyan
                                wrote on last edited by
                                #17

                                @GrecKo That is because of the relative positioning.These 2 components should swap with respect to the 3rd element in 3 different positions. each of these 3 components have 2 positions so,6 different fucntions are needed according to the positions

                                1 Reply Last reply
                                0
                                • GrecKoG GrecKo

                                  Here's a screenshot of what I have when running your code : f47432c5-7371-46b1-8589-2ef114998f41-image.png

                                  Not really self explanatory. Why is it 100 lines long to swap 2 items?
                                  It also refers to variable not declared, root, map_x, map_y.

                                  Your original question is not very clear, next time you might want to include a visual schema of what you want, it will be easier to understand.

                                  Anyway, here's what I would do if I understood correctly what you want:

                                  import QtQuick 2.15
                                  import QtQuick.Window 2.15
                                  
                                  Window {
                                      id: root
                                  
                                      width: 640
                                      height: 480
                                      visible: true
                                  
                                      property bool graphInCorner: true
                                  
                                      Rectangle {
                                          id: fullContainer
                                          width: parent.width
                                          height: parent.height
                                          border.width: 1
                                      }
                                  
                                      Rectangle {
                                          id: cornerContainer
                                          width: 0.18 * parent.width
                                          height: 0.24 * parent.height
                                          border.width: 1
                                      }
                                      Text {
                                          parent: root.graphInCorner ? fullContainer : cornerContainer
                                          anchors.fill: parent
                                          text: "MAP"
                                          horizontalAlignment: Text.AlignHCenter
                                          verticalAlignment: Text.AlignVCenter
                                          MouseArea {
                                              anchors.fill: parent
                                              onClicked: root.graphInCorner = !root.graphInCorner
                                          }
                                      }
                                      Text {
                                          parent: root.graphInCorner ? cornerContainer : fullContainer
                                          anchors.fill: parent
                                          text: "GRAPH"
                                          horizontalAlignment: Text.AlignHCenter
                                          verticalAlignment: Text.AlignVCenter
                                          MouseArea {
                                              anchors.fill: parent
                                              onClicked: root.graphInCorner = !root.graphInCorner
                                          }
                                      }
                                  }
                                  

                                  Have two container parents and swap the parent of the graph and map items to one of those.

                                  V Offline
                                  V Offline
                                  Vijaykarthikeyan
                                  wrote on last edited by
                                  #18

                                  @GrecKo Untitled.png

                                  As I explained the reason why I used a lot of lines for swapping ,this is the picture of what i want to achieve. Actually, these are the 3 components..each have to swap from their respective position to fill the window. But,their sizes and positions should be dynamically attached with the window for any resolution. So,according to the logics, the swapping must be bigger.

                                  And in my updtaed swapping,there are only 10-15 lines of code for swappuing and it works..no issue with that

                                  L 1 Reply Last reply
                                  0
                                  • V Vijaykarthikeyan

                                    @GrecKo Untitled.png

                                    As I explained the reason why I used a lot of lines for swapping ,this is the picture of what i want to achieve. Actually, these are the 3 components..each have to swap from their respective position to fill the window. But,their sizes and positions should be dynamically attached with the window for any resolution. So,according to the logics, the swapping must be bigger.

                                    And in my updtaed swapping,there are only 10-15 lines of code for swappuing and it works..no issue with that

                                    L Offline
                                    L Offline
                                    lemons
                                    wrote on last edited by lemons
                                    #19

                                    @Vijaykarthikeyan
                                    Instead of using x and y coordinates, I would place 3 of the same objects into the view and align them according to what you want in the end. Here you should apply all resizing and alignment constrains, so that they represent the final "wrapper" of your different views, which resize automatically with window changes.

                                    Then add your components as children to those 3 objects. As each of your components now has the same type of parent object, you can simply swap the parents.

                                    Here a very basic example of what I understood from your question.
                                    Note: I would use anchors and layouts, so all resizing is managed automatically.

                                    ApplicationWindow {
                                        width: 860
                                        height: 640
                                        visible: true
                                    
                                        // switch parents
                                        function switchParents(item1, item2) {
                                            let temp = item1.parent
                                            item1.parent = item2.parent
                                            item2.parent = temp
                                        }
                                    
                                        // full screen view
                                        // note: main view should use the same parent object as mini views
                                        // to swap parents without issues
                                        // in this example "ColumnLayout"
                                        ColumnLayout {
                                            id: viewManager
                                            anchors.fill: parent
                                            Rectangle {
                                                id: map
                                                Layout.fillWidth: true
                                                Layout.fillHeight: true
                                                color: "red"
                                                Text {
                                                    anchors.centerIn: parent
                                                    text: "Map"
                                                }
                                                MouseArea {
                                                    anchors.fill: parent
                                                    onClicked: {
                                                        switchParents(parent, viewManager.children[0])
                                                    }
                                                }
                                            }
                                        }
                                        // mini views
                                        Item {
                                            id: miniViews
                                            anchors.right: parent.right
                                            anchors.bottom: parent.bottom
                                            // adjust to your liking
                                            height: parent.height * 2 / 3
                                            width: height < 250 ? parent.width / 2 : parent.width / 4
                                            // use gridlayout to easily switch between vertical and horizontal
                                            // alignment of mini views
                                            GridLayout {
                                                anchors.fill: parent
                                                anchors.margins: 20
                                                // make the miniviews be shown next to each other
                                                // if the height is smaller than a breakpoint
                                                columns: height >= 250 ? 1 : 2
                                                columnSpacing: 20
                                                rowSpacing: 20
                                                ColumnLayout {
                                                    Layout.fillWidth: true
                                                    Layout.fillHeight: true
                                                    Rectangle {
                                                        id: cam
                                                        color: "green"
                                                        Layout.fillWidth: true
                                                        Layout.fillHeight: true
                                                        Text {
                                                            anchors.centerIn: parent
                                                            text: "Cam"
                                                        }
                                                        MouseArea {
                                                            anchors.fill: parent
                                                            onClicked: {
                                                                switchParents(parent, viewManager.children[0])
                                                            }
                                                        }
                                                    }
                                                }
                                                ColumnLayout {
                                                    Layout.fillWidth: true
                                                    Layout.fillHeight: true
                                                    Rectangle {
                                                        id: graph
                                                        color: "yellow"
                                                        Layout.fillWidth: true
                                                        Layout.fillHeight: true
                                                        Text {
                                                            anchors.centerIn: parent
                                                            text: "Graph"
                                                        }
                                                        MouseArea {
                                                            anchors.fill: parent
                                                            onClicked: {
                                                                switchParents(parent, viewManager.children[0])
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    
                                    V 1 Reply Last reply
                                    1
                                    • L lemons

                                      @Vijaykarthikeyan
                                      Instead of using x and y coordinates, I would place 3 of the same objects into the view and align them according to what you want in the end. Here you should apply all resizing and alignment constrains, so that they represent the final "wrapper" of your different views, which resize automatically with window changes.

                                      Then add your components as children to those 3 objects. As each of your components now has the same type of parent object, you can simply swap the parents.

                                      Here a very basic example of what I understood from your question.
                                      Note: I would use anchors and layouts, so all resizing is managed automatically.

                                      ApplicationWindow {
                                          width: 860
                                          height: 640
                                          visible: true
                                      
                                          // switch parents
                                          function switchParents(item1, item2) {
                                              let temp = item1.parent
                                              item1.parent = item2.parent
                                              item2.parent = temp
                                          }
                                      
                                          // full screen view
                                          // note: main view should use the same parent object as mini views
                                          // to swap parents without issues
                                          // in this example "ColumnLayout"
                                          ColumnLayout {
                                              id: viewManager
                                              anchors.fill: parent
                                              Rectangle {
                                                  id: map
                                                  Layout.fillWidth: true
                                                  Layout.fillHeight: true
                                                  color: "red"
                                                  Text {
                                                      anchors.centerIn: parent
                                                      text: "Map"
                                                  }
                                                  MouseArea {
                                                      anchors.fill: parent
                                                      onClicked: {
                                                          switchParents(parent, viewManager.children[0])
                                                      }
                                                  }
                                              }
                                          }
                                          // mini views
                                          Item {
                                              id: miniViews
                                              anchors.right: parent.right
                                              anchors.bottom: parent.bottom
                                              // adjust to your liking
                                              height: parent.height * 2 / 3
                                              width: height < 250 ? parent.width / 2 : parent.width / 4
                                              // use gridlayout to easily switch between vertical and horizontal
                                              // alignment of mini views
                                              GridLayout {
                                                  anchors.fill: parent
                                                  anchors.margins: 20
                                                  // make the miniviews be shown next to each other
                                                  // if the height is smaller than a breakpoint
                                                  columns: height >= 250 ? 1 : 2
                                                  columnSpacing: 20
                                                  rowSpacing: 20
                                                  ColumnLayout {
                                                      Layout.fillWidth: true
                                                      Layout.fillHeight: true
                                                      Rectangle {
                                                          id: cam
                                                          color: "green"
                                                          Layout.fillWidth: true
                                                          Layout.fillHeight: true
                                                          Text {
                                                              anchors.centerIn: parent
                                                              text: "Cam"
                                                          }
                                                          MouseArea {
                                                              anchors.fill: parent
                                                              onClicked: {
                                                                  switchParents(parent, viewManager.children[0])
                                                              }
                                                          }
                                                      }
                                                  }
                                                  ColumnLayout {
                                                      Layout.fillWidth: true
                                                      Layout.fillHeight: true
                                                      Rectangle {
                                                          id: graph
                                                          color: "yellow"
                                                          Layout.fillWidth: true
                                                          Layout.fillHeight: true
                                                          Text {
                                                              anchors.centerIn: parent
                                                              text: "Graph"
                                                          }
                                                          MouseArea {
                                                              anchors.fill: parent
                                                              onClicked: {
                                                                  switchParents(parent, viewManager.children[0])
                                                              }
                                                          }
                                                      }
                                                  }
                                              }
                                          }
                                      }
                                      
                                      V Offline
                                      V Offline
                                      Vijaykarthikeyan
                                      wrote on last edited by
                                      #20

                                      @lemons Thank you for the logic

                                      1 Reply Last reply
                                      0
                                      • V Vijaykarthikeyan has marked this topic as solved on

                                      • Login

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