How update bottom control based on loader in QML - c++

Question

I have a main qml file which contains top item is a rectangle, middle item is a loader which loads different qml files and bottom item is some text.
Based on loader item i want bottom item should adjust, i tried to use anchors but some how it's not working could some one explain me how to do this.
Here is my code:
main.qml
import QtQuick 2.3
import QtQuick.Controls 1.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle{
anchors.fill: parent
Rectangle{
id: toprect
width: 100
height: 100
color: "green"
anchors.horizontalCenter: parent.horizontalCenter
}
Loader{
id: middlerect
anchors.top: toprect.bottom
source: "qrc:/new.qml"
}
Rectangle{
id: belowrect
anchors.top: middlerect.bottom
Text{
text: "Bottom"
}
}
}
}
new.qml
import QtQuick 2.0
import QtQuick.Controls 1.2
Item {
id: newid
Column{
spacing: 10
Rectangle{
width: 100
height: 50
color: "lightblue"
}
Rectangle{
width: 100
height: 50
color: "lightgreen"
}
}
}
Issue:
Bottom item is overlapping on middle item

Answer 1

you have 2 problems in your code:
you should give a height and width to the belowrect
you should give a height and width to your new.qml object
try this:
main.qml
import QtQuick 2.3
import QtQuick.Controls 1.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle{
anchors.fill: parent
Rectangle{
id: toprect
width: 100
height: 100
color: "green"
anchors.horizontalCenter: parent.horizontalCenter
}
Loader{
id: middlerect
anchors.top: toprect.bottom
source: "qrc:/new.qml"
}
Rectangle{
id: belowrect
color:"yellow"
width: childrenRect.width
height: childrenRect.height
anchors.top: middlerect.bottom
Text{
id:text
text: "Bottom"
}
}
}
}
new.qml
import QtQuick 2.0
import QtQuick.Controls 1.2
Item {
id: newid
width: childrenRect.width
height: childrenRect.height
Column{
spacing: 10
Rectangle{
width: 100
height: 50
color: "lightblue"
}
Rectangle{
width: 100
height: 50
color: "lightgreen"
}
}
}