QML中的StackLayout

Question

要求:我正在建立一个QML的设置应用程序，其中我已经将屏幕划分为一个网格。在网格的左侧，有按钮:主页、连接性、设置和退出。在右手边，应该绘制相应的显示。目前，我已经添加了一个矩形，当我点击Home、Settings、connectivity等按钮时。。在StackLayout的矩形内编写的代码成功执行。

我不想在矩形中编写代码，而是希望在一个单独的文件中编写代码，如settings.qml、connectivity.qml。

如何通过点击按钮和设置当前索引来调用不同的文件

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

您当前拥有的位置

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

替换为

qmlClassName {
              id: someId
}