GridLayout and reparenting

DuBu

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!

p3c0

@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:
http://doc.qt.io/qt-5/qtquicklayouts-overview.html#size-constraints

DuBu

This post is deleted!

DuBu

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

DuBu

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