QML多页面应用状态保持求助：切换页面不丢失状态

核心思路 #

• 放弃StackView的动态创建/销毁逻辑，将所有页面（主窗口内容+三个目标页面）作为ApplicationWindow的直接子项
• 通过控制visible属性切换页面显示，页面实例始终存在，状态自然保留
• 主窗口的三个按钮负责切换到对应页面，每个页面的返回按钮切换回主窗口内容

修改后的代码示例 #

main.qml #

ApplicationWindow {
    id: root
    visible: true
    width: 8 * Screen.width / 10
    height: 8 * Screen.height / 10
    color: "#154c79"

    Component.onCompleted: {
        x = Screen.width / 10
        y = Screen.height / 10
    }

    minimumWidth: 700
    minimumHeight: 400

    // 主窗口内容：三个切换按钮
    Item {
        id: mainContent
        anchors.fill: parent
        visible: true

        Row {
            anchors.centerIn: parent
            spacing: 20

            Button {
                text: "页面1"
                onClicked: {
                    mainContent.visible = false
                    pageOne.visible = true
                }
            }

            Button {
                text: "页面2"
                onClicked: {
                    mainContent.visible = false
                    pageTwo.visible = true
                }
            }

            Button {
                text: "页面3"
                onClicked: {
                    mainContent.visible = false
                    pageThree.visible = true
                }
            }
        }
    }

    // 三个目标页面，初始隐藏
    PageOne {
        id: pageOne
        anchors.fill: parent
        visible: false
        onBackClicked: {
            pageOne.visible = false
            mainContent.visible = true
        }
    }

    PageTwo {
        id: pageTwo
        anchors.fill: parent
        visible: false
        onBackClicked: {
            pageTwo.visible = false
            mainContent.visible = true
        }
    }

    PageThree {
        id: pageThree
        anchors.fill: parent
        visible: false
        onBackClicked: {
            pageThree.visible = false
            mainContent.visible = true
        }
    }
}

PageOne.qml（PageTwo/PageThree可直接复用逻辑） #

Item {
    id: root
    anchors.fill: parent

    // 定义返回信号，供主窗口响应切换
    signal backClicked()

    Rectangle {
        color: "#03fc88"
        anchors.fill: parent

        TextField {
            anchors.right: parent.right
            anchors.top: parent.top
            width: 120
            height: 60
            placeholderText: qsTr("Enter: ")
            // 输入内容会完整保留，页面实例从未销毁
        }

        Label {
            anchors.centerIn: parent
            text: "页面1"
        }

        RoundButton {
            id: btnBack
            text: "\u003C"
            onClicked: root.backClicked()
        }
    }
}

补充优化方案 #

如果页面数量较多、担心初始创建所有实例占用内存，可以结合Loader的active属性控制，既保留实例状态又暂时释放资源：

// 主窗口中替换直接实例为Loader
Loader {
    id: pageOneLoader
    anchors.fill: parent
    sourceComponent: PageOne {}
    active: false // 初始不激活，节省内存
    onBackClicked: {
        pageOneLoader.active = false
        mainContent.visible = true
    }
}

// 按钮点击时激活页面
Button {
    text: "页面1"
    onClicked: {
        mainContent.visible = false
        pageOneLoader.active = true
    }
}

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