QT Creator Design View 显示布局正确，但编译后的应用程序完全不同

Question

我有一个在 QT Creator 中编写的非常基本的 QML 文件。当我在“设计”选项卡中打开它时，它看起来是正确的。当我编译并运行该应用程序时，它完全不同且不正确。

设计视图：

编译的应用程序：

以下是 QML 应用程序的代码。

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{}

    }
    }
}

非常感谢任何帮助。我是 QT 新手，正在尝试学习。

我尝试更改特定元素的高度和宽度。我尝试在 TabBar 周围添加各种列和行。

Answer 1

我找到了this页面，这让我看到了中继器的父级。

一旦我删除了作为中继器父级的列，情况就好多了。

Answer 2

如果您使用

Page.header

，您会发现不需要使用

Column

。另外，对于

header

，默认情况下，

width: parent.width

是隐式的，因此您不需要设置它：

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
        Label { text: "Cal Page" }
        Label { text: "Flin Page" }
        Label { text: "Pathread Page" }
    }
}