Custom component remains at state after changing it

[marcosbontempo]

Hello,

I'm learning QT and I had some problems when creating a wizard. I found this solution:

 Loader {
    id: loader
    anchors.fill: parent
         visible: source != ""
 }

 Button { text: "Next"; onClicked: container.state = "next"  }

states: [
    State {
        name: "next"
        PropertyChanges {
            target: loader
            source: "next.qml"
        }
        extend: "none"
    }]

It worked fine. My next step was learning how to create a custom component. I did it by creating a new file with the name of the component:

Marcos.qml:

   Item {
     width: 100; height: 100

 Component {
     id: redSquare

     Rectangle {
         color: "red"
         width: 10
         height: 10
     }
 }
}

And I called the custom component in my main application:
Marcos { x: 50; width: 100; height: 50;}

It also works but when I change the state in the wizard the component remains at the screen even with no declarations. Do you why it's happening? I need a way to destroy the component I've created which doesn't belong to the other state.

Any tip will be very helpful.
Thanks.

[p3c0]

Hi @marcosbontempo,
The state has nothing to do with Marcos component unless you add another state which will load Marcos similar to next.qml. With your current approach you will need to make it hide explicitly using invisible but it wont destroy it and if you do it in similar way as you load next.qml then

states: [
    State {
        name: "next"
        PropertyChanges {
            target: loader
            source: "next.qml"
        }
        extend: "none"
    },
    State {
        name: "marcos"
        PropertyChanges {
            target: loader
            source: "Marcos.qml"
        }
        extend: "none"
    }
]

Here Loader will remove the earlier component and load the new one when the state changes.