在一个窗口中显示多个类 QML答案

【问题标题】：Displaying multiple classes in one window QML在一个窗口中显示多个类 QML
【发布时间】：2020-12-19 22:39:04
【问题描述】：

我有一个窗口，其中包含一个 Rectangle 和一个按钮，Loader 在该按钮上将 AnotherClass.qml 加载到 Rectangle 中。这按预期工作，但是当从 AnotherClass.qml 中按下另一个按钮时，会出现两个带有 MainMenu.qml 的窗口。

MainMenu.qml：

Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: "MainMenu.qml"
    
    Rectangle {
        id: rect
        anchors.fill: window

        Button {
            id: calcButton
            height: 100
            anchors.horizontalCenterOffset: 320
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 220

            onClicked: {
                pageLoader.source = "AnotherClass.qml"
            }

        }
        Loader { id: pageLoader; sourceComponent: rect}  
}
}

另一个类.qml：

Rectangle {
    id: window
    visible: true
    width: 640
    height: 480

     Button {
            id: calcButton
            height: 100
            anchors.horizontalCenterOffset: 320
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 220

            onClicked: {
                pageLoader.source = "MainMenu.qml"
            }
        }
        Loader { id: pageLoader; sourceComponent: rect} }

我决定尝试以不同的方式实现它，但问题仍然存在。

Rectangle {
    id: window
    visible: true
    width: 640
    height: 480

    MainMenu{
        id: mm
    } 

    Button {
            id: calcButton
            height: 100
            anchors.horizontalCenterOffset: 320
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 220

            onClicked: {
                mm.pageLoader.source = "MainMenu.qml"
            }
        } }

How it looks

【问题讨论】：

标签： qt qml

【解决方案1】：

您的代码实际上存在大量问题。您可能需要多阅读一些关于如何使用 Loaders 的内容。您获得两个单独的 Windows 的原因是您使用 Loader 创建了 MainMenu 的第二个实例。做你想做的事情的一种方法是使用 StackView。

Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: "MainMenu.qml"

    StackView {
        id: stack
        initialItem: mainMenu
        anchors.fill: parent
    }

    Component {
        id: mainMenu

        Rectangle {
            id: rect

            Button {
                id: calcButton
                height: 100
                anchors.horizontalCenterOffset: 320
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                anchors.topMargin: 220

                onClicked: {
                    stack.push(anotherClass)
                }
            }
        }
    }

    Component {
        id: anotherClass

        Rectangle {

            Button {
                id: calcButton
                height: 100
                anchors.horizontalCenterOffset: 320
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                anchors.topMargin: 220

                onClicked: {
                    stack.pop()
                }
            }
        }
    }
}

【讨论】：