QML StackView Crash After Frequent Page Switching

[iliya faramarzi]

Description:

I'm using a StackView in my main QML page that holds six components, each with a Loader for different QML files. I load different pages using MouseArea clicks to switch between them. However, after switching pages 9–10 times, the application crashes with the following error messages:

qrc:/stackMenu.qml:36:25: QML Control: Cannot anchor to an item that isn't a parent or sibling.
Model size of -1 is less than 0
qrc:/stackMenu.qml:58: TypeError: Cannot read property 'verticalCenter' of undefined
qrc:/stackMenu.qml:101: TypeError: Cannot read property 'verticalCenter' of undefined
qrc:/stackMenu.qml:144: TypeError: Cannot read property 'verticalCenter' of undefined
qrc:/stackMenu.qml:187: TypeError: Cannot read property 'verticalCenter' of undefined
qrc:/stackMenu.qml:230: TypeError: Cannot read property 'verticalCenter' of undefined
qrc:/stackMenu.qml:273: TypeError: Cannot read property 'verticalCenter' of undefined
qrc:/stackMenu.qml:322: TypeError: Cannot read property 'verticalCenter' of undefined

Code Details:

Here's the relevant code for StackView:

StackView {
    id: stack
    initialItem: userManagement
    width: 1366
    height: 696
    replaceEnter: Transition {
        PropertyAnimation{
            property: "opacity"
            from: 0
            to: 1
            duration: 250
        }
    }

    replaceExit: Transition {
        PropertyAnimation{
            property: "opacity"
            from: 1
            to: 0
            duration: 150
        }
    }
}
Component {
    id: userManagement
    Loader {
        source: "qrc:/userWindow.qml"
    }
}
Component {
    id: videoAndAudioConfiguration
    Loader {
        source: "qrc:/videoAndAudio.qml"
    }
}
Component {
    id: emergencyFiles
    Loader {
        source: "qrc:/emergencyFiles.qml"
    }
}
Component {
    id: routineDays
    Loader {
        source: "qrc:/routineDays.qml"
    }
}
Component {
    id: occasionalDays
    Loader {
        source: "qrc:/occasionalDays.qml"
    }
}
Component {
    id: firmware
    Loader {
        source: "qrc:/firmware.qml"
    }
}

I load pages with a MouseArea as shown here:

MouseArea {
    id: firmwareMouseArea
    anchors.fill: parent
    onClicked: {
        userSettingsRect.color = "#232323";
        videoAndAudioRect.color = "#232323";
        emergencyFilesRect.color = "#232323";
        routineDaysRect.color = "#232323";
        occasionalDaysRect.color = "#232323";
        firmwareRect.color = "#4B4B4B";
        userSettingsMouseArea.enabled = true;
        videoAndAudioMouseArea.enabled = true;
        emergencyFilesMouseArea.enabled = true;
        routineDaysMouseArea.enabled = true;
        occasionalDaysMouseArea.enabled = true;
        firmwareMouseArea.enabled = false;
        stack.replace(firmware);
    }
}

Question:

Why might switching between these pages crash the app after several switches? Could it be related to the StackView or the anchoring errors? Any insights on how to resolve this would be greatly appreciated.

[Ronel_qtmaster]

@iliya-faramarzi Consider using Page instead of Component
to load a page on the stack use push

[iliya faramarzi]

@Ronel_qtmaster
Thank you! This has resolved the crashes, but unfortunately, all styles are now broken. Is there a way to retain the original styling, including background and positioning?

[iliya faramarzi]

@iliya-faramarzi
Apologies for the confusion about the styles—that was on me. Thanks so much for your help!