qt - QML 中的堆栈布局

Question

要求：我正在 QML 中构建一个设置应用程序，其中我已将屏幕划分为网格。在网格的左侧，有按钮：主页、连接、设置和退出。在右侧，应绘制相应的显示。目前，我添加了一个矩形，当我点击主页、设置、连接等按钮时...... 写在 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
}