QT Creator设计视图布局正常，编译后应用显示异常求助

你的问题核心是布局元素缺少明确的尺寸约束：Design视图会自动补全默认布局逻辑，但运行时QML严格按照你编写的约束渲染，导致布局坍塌。下面是具体修复方案：

关键修改点 #

• 外层Column需明确占满Window空间，否则它会仅包裹子项的最小尺寸
• SwipeView必须指定宽高，否则无法填充TabBar下方的剩余区域
• SwipeView的子页面（包括占位Rectangle）需要继承父容器的尺寸
• 确保自定义页面AutoCalPage和PathreadPage内部也设置了占满父容器的宽高

修复后的完整代码 #

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{
        width: parent.width  // 让Column占满Window宽度
        height: parent.height // 让Column占满Window高度
        spacing: 0  // 移除TabBar和SwipeView之间的默认间距

        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
            width: parent.width  // 占满Column宽度
            height: parent.height - topTab.height  // 占满TabBar下方剩余高度

            AutoCalPage{
                width: parent.width
                height: parent.height
            }
            Rectangle{
                id: flinPagePlaceholder
                width: parent.width
                height: parent.height
                Text {
                    id: name
                    text: qsTr("Placeholder")
                    anchors.centerIn: parent  // 让文字居中显示
                }
            }
            PathreadPage{
                width: parent.width
                height: parent.height
            }
        }
    }
}

额外注意事项 #

• 如果AutoCalPage和PathreadPage是自定义组件，需要在它们的内部根元素添加width: parent.width和height: parent.height，否则页面内容依然会布局异常
• 可通过spacing属性控制Column内子元素的间距，避免不必要的留白

内容的提问来源于stack exchange，提问作者dwoods