If you add some more debugging output, you can observe the order in which the properties change, then you set a new layout
.
Example 0 -> 2
/* Console log output
'Text Button' clicked: Change layout 0 to 2
Label horizontalCenter: undefined
Label verticalCenter: parent.verticalCenter
Label top: undefined
Label left: buttonImage.right
Image horizontalCenter:undefined
Image verticalCenter:parent.verticalCenter
Image top: undefined
Image left: parent.left
Rectangle implicitWidth: Sum
Rectangle implicitHeight: Max
*/
That means the outer rectangle is recalculated last. Thus all the other alignments happen relative to the old rectangle.
To reset the anchors I'd implement the auto-generated function 'onLayoutChanged':
onLayoutChanged: {
console.log("Layout changed to new id: " + layout + ". Time to reset alignments using javascript")
switch(layout) {
case 0:
// do stuff
break;
case 1:
// do stuff
break;
case 2:
// do stuff
break;
case 3:
// do stuff
break;
case 4:
// do stuff
break;
default:
console.log("Invalid layout id.")
break;
}
}