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

嘿，我来帮你捋捋这个问题——你点击按钮后弹出两个MainMenu窗口，其实是页面结构设计和Loader用法出了问题，咱们一步步搞定它：

问题根源拆解 #

1. Window组件被重复实例化：你原来的MainMenu.qml本身就是一个Window顶层组件，当你用Loader加载它时，会新建一个Window实例，而原来的MainMenu窗口并没有被关闭，自然就出现了两个窗口。
2. Loader用法错误：代码里的sourceComponent: rect是错的，sourceComponent需要接收一个Component类型的对象，而rect是已经实例化的Rectangle，这样Loader会克隆这个已有实例，直接导致页面结构混乱。
3. 页面组件不必要的可见性控制：AnotherClass.qml里的Rectangle设置了visible: true，但它作为被Loader加载的页面，可见性应该由Loader或者父容器控制，完全不需要自己设置。

修正后的实现方案 #

我们把顶层窗口和页面内容彻底分离，只保留一个顶层Window作为容器，页面切换完全在这个容器内部的Loader中完成，页面组件不再是Window，也不控制自身可见性。

1. 重构MainMenu.qml（作为页面组件，不再是Window） #

Rectangle {
    id: root
    anchors.fill: parent

    Button {
        id: calcButton
        height: 100
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 220
        text: "跳转到AnotherClass"
        onClicked: {
            // 引用顶层窗口的Loader完成页面切换
            mainWindow.pageLoader.source = "AnotherClass.qml"
        }
    }
}

2. 重构AnotherClass.qml（同样作为页面组件） #

Rectangle {
    id: root
    anchors.fill: parent

    Button {
        id: calcButton
        height: 100
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 220
        text: "返回MainMenu"
        onClicked: {
            mainWindow.pageLoader.source = "MainMenu.qml"
        }
    }
}

3. 创建顶层窗口容器AppWindow.qml #

Window {
    id: mainWindow
    visible: true
    width: 640
    height: 480
    title: "主应用窗口"

    // 核心的页面切换Loader
    Loader {
        id: pageLoader
        anchors.fill: parent
        // 默认加载初始页面MainMenu
        source: "MainMenu.qml"
    }
}

额外优化小提示 #

如果你不想通过mainWindow直接引用Loader（避免全局依赖），也可以给页面组件定义一个switchPage信号，然后在顶层窗口中监听这个信号来控制Loader的source，这样结构会更解耦哦。

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