Receiving 'Cannot anchor to a null item' when using States - qml

Question

I have a rectangle with a fixed size that should always stay attached to the bottom of the vertical center of my window. If the window height gets small enough for the rectangle to touch the border I want to change the anchors of the rectangle for it to stick to the bottom of the window instead.
I achieved this using States:
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
id: window
width: 200
height: 480
minimumHeight: maxSize
visible: true
property int maxSize: 150
property bool centerTop: maxSize < (height / 2)
Rectangle {
id: rect
states: [
State {
name: "Centered"
when: centerTop
PropertyChanges {
target: rect
anchors.top: parent.verticalCenter
anchors.bottom: undefined
}
},
State {
name: "Bottom"
when: !centerTop
PropertyChanges {
target: rect
anchors.top: undefined
anchors.bottom: parent.bottom
}
}
]
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 10
anchors.rightMargin: 10
height: maxSize
color: "red"
}
}
This is what the result looks like:
This works perfectly fine, but whenever I decreased the window size to reach the state Bottom and increase it again to reach the state Centered I get the error message
qrc:/main.qml:14:5: QML Rectangle: Cannot anchor to a null item.
Is there a solution or a better approach to my problem?

Answer 1

You want to make sure you use an AnchorChanges instead of PropertyChanges when dealing with anchors. The docs don't give much of an explanation other than to say:
PropertyChanges can be used to change anchor margins, but not other anchor values; use AnchorChanges for this instead.
states: [
State {
name: "Centered"
when: centerTop
AnchorChanges {
target: rect
anchors.top: parent.verticalCenter
anchors.bottom: undefined
}
},
State {
name: "Bottom"
when: !centerTop
AnchorChanges {
target: rect
anchors.top: undefined
anchors.bottom: parent.bottom
}
}
]