Qt Component Loader scaling to fill the whole Window therefore covering the other Items

Question

I work on a Qt project, where almost all of the QML Items are in the same file main.qml. The application uses StackLayout to navigate through other QML files, plus the need to present the Items within the main.qml itself.

I use Loader to call a Component containing a GridLayout containing Labels and Images. Outside this container, there are other Images and Labels anchored to the bottom of the mainWindow.

Problem is, when calling the Component within the StackLayout using Loader, the Component dimensions cover the Image defined in the ApplicationWindow. It behaves as fillHeight all the Window which is not what I desire.

Question is, how can I load the Component without it filling the whole Window, but keeping the same size it originally was before using the StackLayout.

I'm still a beginner at Qt, so any other preferred methods of suggestions are welcome.

The code structure is similar to this,

ApplicationWindow {
    id: mainWindow
    width: 500
    height: 400

    (... some code ...)

    Image{
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.bottomMargin: 22
        anchors.leftMargin: 24
        width: 80
        height: 40
        fillMode: Image.Stretch
        source: "qrc:/image.png"
    }

    StackLayout {
        id: mainStackLayout
        width: mainWindow.width
        height: mainWindow.height

        FirstPage {}  // another .qml file
        Loader {
            sourceComponent: component
        }
    }

    Component{
        id: component

    GridLayout {
        id: grid
        width: mainWindow.width
        height: mainWindow.height
        columns: 4

    Labels{}
    ...
    ...
    ...
    Labels{}
    }

Answer 1

The issue is primarily that you have setup your StackLayout to cover the entire window with:

        width: mainWindow.width
        height: mainWindow.height

and StackLayout will grow its children to fit its size.

Two simple options:

1. Place your Loader inside of an Item so that the Item grows instead and your loaded component's size is not affected.
2. Put a layout on the ApplicationWindow so that your Image and your StackLayout are managed better in relation to each other.

I'd recommend option 2. Unless you aren't going to allow users to resize your window, all of your QML components should be designed to be resizable.