Prevent Page from Restarting when Switching Tabs in QML

Gustavo Dev

Hello everyone,

I'm currently developing a QML application with Qt6 and PyQT6 and I have an issue I need some help with. I have a side menu with different tabs, represented by icons. When a user clicks on an icon, it switches the current view to the associated page. The pages are being managed using a StackView.

Here's the part of the code for the side menu:

// ...
onIconClicked: {
        stackView.clear()
        switch (index) {
        case 0:
            stackView.push(Qt.resolvedUrl("MainScreen.qml"))
            break;
// other cases...

The issue I'm facing is that every time I switch tabs, the MainScreen.qml view (which is a grid of cameras with AI) restarts. I would like to maintain the state of the MainScreen.qml when I switch to another tab and come back.

I've tried using a Loader and Qt.createComponent, but it didn't work as expected. Here's what I tried:

//....
onIconClicked: {
        loader.sourceComponent = screenItems[index]
    }

property var screenItems: [
        Qt.createComponent(Qt.resolvedUrl("MainScreen.qml")),
// other screens....

Unfortunately, I received an error message: "Unable to assign QUrl to QQmlComponent*". I'd like to know how I can keep the state of the MainScreen.qml view when switching tabs. Any advice would be greatly appreciated.

Thank you.

some parts are in portuguese

import QtQuick 6.2
import QtQuick.Controls 6.2

// Lista de ícones do menu lateral
Item {
    id: listaIcones
    property int selectedIndex: 0

    signal iconClicked(int index)

    onIconClicked: {
        loader.sourceComponent = telaItems[index]
    }

    Column {
        id: colunaIcones
        width: listaIcones.width
        height: listaIcones.height
        anchors.right: parent.right
        anchors.rightMargin: 0

        Repeater {
            id: repetidorIcones
            model: listaIcones.icones

            delegate: Item {
                id: botao
                property bool ativo: index === listaIcones.selectedIndex
                width: linhaIcone.width
                height: linhaIcone.height

                Row {
                    id: linhaIcone
                    width: listaIcones.width
                    height: listaIcones.height / 6
                    layoutDirection: Qt.RightToLeft
                    spacing: 21

                    // Imagem do ícone
                    Button {
                        id: imagemIcone
                        width: linhaIcone.height / 2
                        height: width
                        anchors.verticalCenter: parent.verticalCenter
                        icon.source: modelData.source
                        icon.color: botao.ativo ? "#0db563" : "#95989e"
                        smooth: true
                        antialiasing: true

                        background: undefined
                    }

                    // Barra lateral do ícone
                    Rectangle {
                        id: barraLateral
                        width: imagemIcone.width / 6
                        height: imagemIcone.height * 1.5
                        color: botao.ativo ? "#0db563" : "#95989e"
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.right: parent.right
                        anchors.rightMargin: 0
                        layer.enabled: false
                    }

                    // Área clicável do ícone
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            listaIcones.selectedIndex = index;
                            listaIcones.iconClicked(index);
                        }
                    }
                }
            }
        }
    }

    property var icones: [
        {source: "icons/casa.png"},
        {source: "icons/engrenagem.png"},
        {source: "icons/video-camera-alt.png"},
        {source: "icons/sino.png"},
        {source: "icons/calendario.png"},
        {source: "icons/do-utilizador.png"}
    ]
    property var telaItems: [        
        Qt.createComponent(Qt.resolvedUrl("MainScreen.qml")),
        Qt.createComponent(Qt.resolvedUrl("SettingsScreen.qml")),
        Qt.createComponent(Qt.resolvedUrl("CameraSettingsScreen.qml")),
        Qt.createComponent(Qt.resolvedUrl("NotificationScreen.qml")),
        Qt.createComponent(Qt.resolvedUrl("CalendarScreen.qml")),
        Qt.createComponent(Qt.resolvedUrl("UserSettingsScreen.qml"))  
    ]
}