Prevent Page from Restarting when Switching Tabs in QML
-
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")) ] }