0

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{}
    }
Anas AG
  • 87
  • 9

1 Answers1

2

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.

David K. Hess
  • 16,632
  • 2
  • 49
  • 73
  • The window is of fixed size, users can't scale it. I tried the first option by simply adding Item as a parent for the Loader, but it gave no effect. I tried the second option, but it gave similar troubles as the initial problem. Basically, in the second option, the image sizing and positioning behave weirdly when using an anchor inside a Layout parent. – Anas AG Apr 20 '21 at 19:34
  • As a workaround, I added a bottom margin for the last Item in the Component to act as a safety measure to avoid having it collide with the other bottom Items. Though I would like to solve it professionally. – Anas AG Apr 20 '21 at 19:37
  • 1
    > I tried the first option by simply adding Item as a parent for the Loader, but it gave no effect... Make sure to set proper margins / size relative to parent as needed. For the second option you don't use anchors, you use Layout attached properties. – pooya13 Apr 21 '21 at 02:45