How to load a QML component on click

Question

I will try to explain my problem with a simple example.

I have a Rectangle A and a Rectangle B. I want that when you click on A, a view (for example a listView) is loaded in B. If you click again on A, the listView will disapear. I know it is something about class Loader but I have trouble to make it work correctly.

Rectangle {
    id: A
    MouseArea {
         anchors.fill: parent
         onClicked {
            //Load or Close listView
         }
    }
 }
 Rectangle {
     id:B
     //here load or unload the listView
 }

Does anyone could provide a simple example ?

NB : I don't want to use visible because I need to refresh data when the rectangle is clicked.

Answer 1

Here is a simple example:

Rectangle {
    id: A
    MouseArea {
        anchors.fill: parent
        onClicked {
            ld.active = !ld.active
        }
   }
}

Rectangle {
    id:B

    Loader {
        id: ld

        sourceComponent: comp
        active: false
        anchors.fill: parent
    }

    Component {
         id: comp

         Rectangle { //replace this with your listview
              color: blue
         }
    }
}

When you click on rectangle A the state of loader changes and component comp loading/unloading.