How update bottom control based on loader in QML

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:

1. you should give a height and width to the belowrect
2. 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"
        }
    }
}