StackLayout in QML

Question

Requirement: I am building a Settings app in QML, in which the I have divided screen into a grid. On the left hand side of the Grid, there are buttons : Home, Connectivity, Settings and Quit. and on the right hand side, corresponding display should be drawn. Currently, I have added a rectangle, and when I click on buttons like Home, Settings, connectivity etc.. . Code written inside the rectangle of StackLayout is executed successfully.

Instead of writing code in a rectangle, i want to write code in a separate file like settings.qml, connectivity.qml.

How to call the different file by clicking on buttons and setting current Index

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.3

ApplicationWindow {
id:main1
visible: true
x:0
y:20
width: Screen.width
height: Screen.height
title: qsTr("Settings")

GridLayout {
    id: gridLayout
    width: parent.width
    height:main1.height
    columns: 2


    Rectangle {
       id: left_rect
       width: Screen.width/4
       height: gridLayout.height
       color:"yellow"

       Button {
           id: button
           text: qsTr("Home")
           anchors.right: parent.right
           anchors.rightMargin: 5
           anchors.left: parent.left
           anchors.leftMargin: 5
           anchors.top: parent.top
           anchors.topMargin: 5
           onClicked: {
              layout.currentIndex =  0
           }
       }

       Button {
           id: button1
           x: 1
           y: -4
           text: qsTr("Connectivity")
           anchors.topMargin: 59
           anchors.leftMargin: 5
           anchors.left: parent.left
           anchors.top: parent.top
           anchors.rightMargin: 5
           anchors.right: parent.right
           onClicked: {
               layout.currentIndex =  1
           }

       }

       Button {
           id: button2
           x: 5  
           y: -8
           text: qsTr("Settings")
           anchors.topMargin: 112
           anchors.leftMargin: 5
           anchors.left: parent.left
           anchors.top: parent.top
           anchors.rightMargin: 5
           anchors.right: parent.right
           onClicked: {
               layout.currentIndex =  2
           }
       }

       Button {
           id: button3
           x: 6
           y: -16
           text: qsTr("Quit")
           anchors.topMargin: 172
           anchors.leftMargin: 5
           anchors.left: parent.left
           anchors.top: parent.top
           anchors.rightMargin: 5
           anchors.right: parent.right
           onClicked: {
              Qt.quit()
           }

       }

  }

   Rectangle {
       id: right_rect
       width: ( Screen.width/4 )*3
       height: Screen.height
       color:"green"

       StackLayout {
          id: layout
          anchors.fill: parent
          currentIndex: 0
          
          Rectangle {
                color: 'teal'
                implicitWidth: 200
                implicitHeight: 200
          }
          Rectangle {
                color: 'plum'
                implicitWidth: 300
                implicitHeight: 200
          }
          Rectangle {
                color: 'orange'
                implicitWidth: 300
                implicitHeight: 200
            }
        }
    }
}

Answer 1

Where you currently have

Rectangle {
            color: 'teal'
            implicitWidth: 200
            implicitHeight: 200
}

replace with

qmlClassName {
              id: someId
}