@RiteshPanchal Ok. Here is a very simplified demo which may help you understand the basics. Once you get familiar with these you can explore other options like StackView or SwipeView which also acts as a container for pages and provides methods for its manipulation.
The following example consider Item as root element for the child components. You can change it to Window or whatever and adding its related small changes.
//Main window
//RootWindow.qml
import QtQuick 2.6
import QtQuick.Controls 2.0
import QtQuick.Window 2.1
Window {
id: root
width: 250
height: 250
property QtObject obj1
property QtObject obj2
signal hideObj(QtObject obj)
Component.onCompleted: {
root.hideObj.connect(onHideObj)
}
function onHideObj(obj) {
obj.visible = !obj.visible
}
Row {
anchors.top: parent.top
Button {
text: "One"
onClicked: {
if(!obj1) {
obj1 = Qt.createComponent("Item1.qml").createObject(root);
}
obj1.visible = true;
}
}
Button {
text: "Two"
onClicked: {
if(!obj2) {
obj2 = Qt.createComponent("Item2.qml").createObject(root);
}
obj2.visible = true;
}
}
}
}
//Item1.qml
import QtQuick 2.6
Item {
id: item1
anchors.bottom: parent.bottom
anchors.left: parent.left
width: 50
height: 50
Rectangle {
color: "red"
anchors.fill: parent
Text {
anchors.centerIn: parent
text: "Item1"
}
MouseArea {
anchors.fill: parent
onClicked: root.hideObj(obj2)
}
}
}
//Item2.qml
import QtQuick 2.6
Item {
id: item2
anchors.bottom: parent.bottom
anchors.right: parent.right
width: 50
height: 50
Rectangle {
color: "green"
anchors.fill: parent
Text {
anchors.centerIn: parent
text: "Item2"
}
MouseArea {
anchors.fill: parent
onClicked: root.hideObj(obj1)
}
}
}
The two buttons here creates and shows 1 item each containing a colored rectangle and a text displayed at the bottom. Then after creating these 2 items, try clicking on each individual colored rectangle, it will hide/show other rectangle. This works by sending a signal to the root window from the child component.
