Margins and anchors not working good in Qt, QML - qt

Question

I'm new at QML and I have a very confusing situation.
So, this is my main.qml file:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
Window {
id:rootWin
visible: true
width: 350
height: 330
ConnectBox
{
id:boxConnect
MouseArea
{
id: connectMouse
hoverEnabled: true
anchors.fill: boxConnect
}
}
Rectangle {
id: randomRec
width: parent.width/2
height: parent.height/6
// x: 50
anchors.top: boxConnect.bottom
// anchors.horizontalCenter: parent
anchors.topMargin: 10
border.color: "dimgray"
border.width: 5
radius: 14
}
}
ConnectBox.qml:
import QtQuick 2.0
Rectangle {
id: connectRec
width: parent.width/2
height: parent.height/6
anchors.centerIn: parent
border.color: "dimgray"
border.width: 5
radius: 14
}
I want it to be randomRec below boxConnect, so it does but it is all left and it only moves when I put for example x: 50 but its not convenient for every size of the window.

Answer 1

First off: I'd advise to put the anchors that are related to each other all on the same file.
But to get the randomRec to center below the connectBox you should use the following anchors:
Rectangle {
id: rect1
width: 100
height: 200
color: "red"
anchors.centerIn: parent
}
Rectangle {
id: rect2
width: 75
height: 50
color: "yellow"
anchors.top: rect1.bottom
anchors.horizontalCenter: rect1.horizontalCenter
}
So I guess you where almost there, with the horizontalCenter: parent line, which should have .horizontalCenter as well. However, I anchored it on rect1 since that is what you want (let's say you might want to move the boxConnect in the future... you would have to find all of the references)