Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Prevent Page from Restarting when Switching Tabs in QML
Forum Updated to NodeBB v4.3 + New Features

Prevent Page from Restarting when Switching Tabs in QML

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
1 Posts 1 Posters 154 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • G Offline
    G Offline
    Gustavo Dev
    wrote on last edited by
    #1

    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"))  
        ]
    }
    
    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved