QT Creator Design View shows layout correctly, but complied app is completely different

Question

I have a very basic QML file that I wrote in QT Creator. When I open it in the Design tab, it looks correct. When I compile and run the application, it is completely different and incorrect.

Design View: This is what appears in the Design Tab

Compiled App: This is the compiled app

Below is the code for the QML application.

import QtQuick 6.0
import QtQuick.Window 6.0
import QtQuick.Controls 6.0

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Mamba Test Suite")
    Column{

        TabBar{
            property int numTabs: 3
            width:parent.width
            id:topTab
            currentIndex:btmswipe.currentIndex

            Repeater {
                  model: ["Autocal","FLIN","4 path read"]

                  TabButton {
                      text: modelData
                      width: Math.max(100, topTab.width / topTab.numTabs)
                  }
              }

    }



    SwipeView{
        id:btmswipe
        currentIndex: topTab.currentIndex
        AutoCalPage{}
        Rectangle{
        id:flinPagePlaceholder
        Text {
            id: name
            text: qsTr("Placeholder")
        }
        }
        PathreadPage{}

    }
    }
}

Any help is greatly appreciated. I am new to QT and I'm attempting to learn.

I've tried changing the heights and width of specific elements. I've tried adding various Columns and Rows around the TabBar.

Answer 1

I found this page which led me to look at the parent of the repeater.

Once I removed the Column as the parent of the repeater, This got a lot better.

Answer 2

I spot one minor issue in your code. It's not clear what the width of your Column is. You could fix it by explicitly setting it, e.g. Column { width: parent.width // ... .

However, I typically try to use the Page component. In this case, had you use Page, you can make use of Page.header and completely eliminate the need for Column. Also, header, by default implictly has width: parent.width so you don't need to explictly set it. Finally, if TabBar is sized correctly, you do not need to explicitly set the size of each TabButton; each TabButton should automatically be sized to fit.

import QtQuick
import QtQuick.Controls
Page {
    background: Rectangle { color: "#848895" }
    header: TabBar {
        id: topTab
        currentIndex: btmswipe.currentIndex
        Repeater {
            model: ["Autocal","FLIN","4 path read"]
            TabButton {
                text: modelData
            }
        }
    }
    SwipeView{
        id:btmswipe
        currentIndex: topTab.currentIndex
        anchors.fill: parent
        Page { Label { anchors.centerIn: parent; text: "Autocal" } }
        Page { Label { anchors.centerIn: parent; text: "FLIN" } }
        Page { Label { anchors.centerIn: parent; text: "4 path read" } }
    }
}

You can Try it Online!