Высота слоя через Loader = 0. Как исправить

[vebmaster]

Делаю вставку через Loader страницы qml. Но почему то высота rectLoader (Rectangle ), где лежит Loader равна 0 и следующий объект располагается от объекта который был до Loader-а.
Делаю привязку rectLoader к элементу до и после, но всё безуспешно. Наверно типичная ошибка новичка, подскажите пожалуйста как исправить.

Код:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Flickable {
        id: flic
        anchors.fill: parent
        contentWidth: wrapper.width
        contentHeight: wrapper.height
        ScrollBar.vertical: ScrollBar { }
        ScrollBar.horizontal: ScrollBar { }

        Column {
            id: wrapper
            spacing: 20
//                anchors.fill: parent
//                height: 1200;

            Rectangle {
                width: 300
                height: 300
                color: "blue"
            }
            Rectangle {
                id: rectB
                width: 300
                height: 300
                color: "black"
                MouseArea {
                    anchors.fill: parent
                    onClicked: console.log(rectLoader.height)
                }
            }
            Rectangle {
                id: rectLoader
                anchors.top: rectB.bottom
                anchors.bottom: butB.top
                height: pageLoader.height
                Loader {
                    id: pageLoader
                    source: "Page1.qml"
                }
            }
            Button {
                id: butB
                //height: pageItem.height
                text: "Закрыть"
            }
        }

    }
}

Page1.qml

Код:

import QtQuick 2.7

Item {
    id: pageItem
    height: pageColumn.height
    Column {
        id: pageColumn
        spacing: 30
        Text {
            text: "111"
            font.pointSize: 20
        }
        Rectangle {
            width: 100
            height: 400
            color: "green"
        }
        Rectangle {
            width: 100
            height: 400
            color: "red"
        }
    }
}

[vebmaster]

Решение: вынести Loader из ректангла:

Код:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Flickable {
        id: flic
        anchors.fill: parent
        contentHeight: wrapper.height
        ScrollBar.vertical: ScrollBar { }
        ScrollBar.horizontal: ScrollBar { }

        Column {
            id: wrapper
            spacing: 20
            width: flic.width

            Rectangle {
                width: 300
                height: 300
                color: "blue"
            }
            Rectangle {
                id: rectB
                width: 300
                height: 300
                color: "black"
                MouseArea {
                    anchors.fill: parent
                    onClicked: console.log(rectLoader.height)
                }
            }
            Loader {
                id: pageLoader
                source: "page-1.qml"
            }
            Button {
                id: butB
                text: "Закрыть"
            }
        }

    }
}

Page1.qml

Код:

import QtQuick 2.7

Column {
    id: pageColumn
    spacing: 30
    Text {
        text: "111"
        font.pointSize: 20
    }
    Rectangle {
        width: 100
        height: 400
        color: "green"
    }
    Rectangle {
        width: 100
        height: 400
        color: "red"
    }
}