QML单窗口多类显示异常：点击按钮重复弹出MainMenu窗口

看起来你遇到的核心问题是每次切换页面时都会创建新的Window实例，导致弹出多个窗口。我们先拆解下你代码里的几个关键错误，再给出正确的实现方式：

为什么会弹出两个窗口？ #

1. 组件类型错误：你的MainMenu.qml是一个Window组件，而Window本身是顶级窗口容器——每次通过Loader加载它或者直接实例化时，都会创建一个独立的新窗口。
2. Loader用法错误：你在两个qml文件里都写了Loader { id: pageLoader; sourceComponent: rect}，这里的sourceComponent需要接收一个Component类型的对象，而rect是已经实例化的Rectangle，这属于用法错误，会导致Loader的加载逻辑混乱。
3. 页面切换逻辑错误：你试图在Window之间互相加载，而不是在同一个主窗口内切换页面内容，这必然会不断创建新窗口。

正确的实现方案：单窗口+页面组件切换 #

我们需要把窗口容器和页面内容拆分，只保留一个顶级Window，用它来管理所有页面的切换，所有页面都用非Window类型的组件（比如Rectangle）实现。

步骤1：创建唯一的主窗口（MainWindow.qml）

这个窗口作为整个应用的容器，里面只放一个Loader负责页面切换：

Window {
    id: mainWindow
    visible: true
    width: 640
    height: 480
    title: "Main Application"

    // 负责切换页面的Loader，填满整个窗口
    Loader {
        id: pageLoader
        anchors.fill: parent
        source: "MainMenuPage.qml" // 默认加载主菜单页面
    }
}

步骤2：创建主菜单页面（MainMenuPage.qml）

把原来MainMenu里的内容提取出来，做成一个独立的页面组件（注意不是Window）：

Rectangle {
    id: mainMenuPage
    color: "#f0f0f0"

    Button {
        id: goToAnotherBtn
        height: 100
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 220
        text: "跳转到另一个页面"
        onClicked: {
            // 告诉主窗口的Loader切换页面
            mainWindow.pageLoader.source = "AnotherPage.qml"
        }
    }
}

步骤3：创建另一个页面（AnotherPage.qml）

同样把原来的AnotherClass改成页面组件：

Rectangle {
    id: anotherPage
    color: "#e0f7fa"

    Button {
        id: backToMenuBtn
        height: 100
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 220
        text: "返回主菜单"
        onClicked: {
            // 切换回主菜单页面
            mainWindow.pageLoader.source = "MainMenuPage.qml"
        }
    }
}

进阶优化：解耦页面与主窗口 #

如果不想直接通过主窗口id访问Loader，可以用信号与槽的方式解耦，让页面只负责发出切换信号，主窗口负责处理：

比如在MainMenuPage.qml里定义信号：

Rectangle {
    id: mainMenuPage
    color: "#f0f0f0"

    // 定义切换页面的信号
    signal switchToAnotherPage()

    Button {
        id: goToAnotherBtn
        // ... 其他属性不变
        onClicked: switchToAnotherPage()
    }
}

然后在MainWindow.qml里监听信号：

Loader {
    id: pageLoader
    anchors.fill: parent
    source: "MainMenuPage.qml"

    // 页面加载完成后绑定信号
    onLoaded: {
        item.switchToAnotherPage.connect(() => {
            pageLoader.source = "AnotherPage.qml"
        })
    }
}

这样页面和主窗口的耦合度更低，更适合复杂项目的扩展。

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