QML 中的堆栈布局

Posted 2023-02-23

【中文标题】QML 中的堆栈布局

【英文标题】：StackLayout in QML

【发布时间】：2020-11-26 09:53:46

【问题描述】：

要求：我正在 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
            
        
    

【问题讨论】：

也许这有帮助：***.com/questions/22168457/…

【参考方案1】：

你目前在哪里

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

替换为

qmlClassName 
              id: someId