Important: Please read the Qt Code of Conduct -

GridLayout and reparenting

  • Hello,
    I want to reparent an item from a GridLayout to the main window and back. But it doesn't behave as expected. First, here is what I tried so far:

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.0
    ApplicationWindow {
      visible: true
      width: 640
      height: 480
      title: qsTr("GridLayout test")
      Item {
        id: window
        anchors.fill: parent
        GridLayout {
          id: grid
          anchors.fill: parent
          columns: 2
          Repeater {
            id: repeater
            model: ListModel {
              ListElement { color: "blue" }
              ListElement { color: "red" }
              ListElement { color: "green" }
              ListElement { color: "yellow" }
            Rectangle {
              id: rectangle
              Layout.fillHeight: true
              Layout.fillWidth: true
              Layout.column: model.index % grid.columns
              Layout.row: model.index / grid.columns
              color: model.color
              states: State {
                name: "detached"
                ParentChange {
                  target: rectangle
                  parent: window
                  x: 10
                  y: 10
                  width: 400
              MouseArea {
                anchors.fill: parent
                onClicked: {
                  if (parent.state !== "detached") {
                    parent.state = "detached"
                  else {
                    parent.state = ""

    When one clicks on a rectangle it should reparent itself to the main window and after clicking the rectangle again it should reparent itself back to the grid. So far so good.
    The issue I have is when I want the width or height to be changed when parented to the main window. It should change back to the width or height it had before when parenting back to the grid. But it doesn't! The width or height is bigger as expected and the grid rearrange its rows or columns. It works when the new width or height is smaller as in the grid.
    Is there something wrong in my code or is there a bug in the GridLayout?

    Thanks in advance!

  • Moderators

    @DuBu You need to specify Layout properties such as minimum, preferred, and maximum sizes of all item. Apply them and it should work.
    More info here:

  • This post is deleted!

  • @p3c0 Maybe I wasn't clear enough what happens. By saying the width is bigger then expected I meant the width of the rectangle which was paranted back to the GridLayout is bigger then the other rectangles. Before reparenting all rectangles had the same width. And to make it even worse it happens only the first time a rectangle is reparented.
    As far as I understood the doc about min/max/preferred sizes it wouldn't help here.

  • @p3c0 I'm sorry, you are right. When I set an arbitrary preferredWidth it works. I don't know why and how a randomly chosen preferredWidth fixes this issue, but I'm happy it works now. Thanks, for pointing me in that direction.

Log in to reply