Qt Quick - StackLayout 堆布局

一、概述

StackLayout 其实就是说，在同一个时刻里面，只有一个页面是展示出来的，类似QStackWidget 的功能，主要就是切换界面的功能。这个类型我们可以通过设置currentIndex属性来修改当前可见的项。索引对应于StackLayout子元素的顺序。

StackLayout切换界面

与大多数其他布局不同，子项的Layout.fillWidth 和Layout.fillHeight 属性默认是被设置为true，因此，默认情况下，子项的填充大小与StackLayout的大小相同，只要它们的布局相同。最大宽度或布局。maximumHeight不会阻止它。

通过重新将项目添加到布局中来将项目添加到布局中。类似地，删除是通过从布局中重新父元素来完成的。这两个操作都会影响布局的count属性。

二、attached 属性

StackLayout 支持下面这些属性，但是我们一般不会去动的，而且这个类型是没提到外边距 margin的属性，就不去设置啦

• Layout.minimumWidth
• Layout.minimumHeight
• Layout.preferredWidth
• Layout.preferredHeight
• Layout.maximumWidth
• Layout.maximumHeight
• Layout.fillWidth
• Layout.fillHeight

三、例子

1. 按钮切换 StackLayout 页面

import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.3
import QtQuick.Controls 2.5Window {id: rootvisible: truewidth: 319height: 570title: qsTr("Hello World")ColumnLayout{anchors.fill: parentRowLayout{Layout.alignment: Qt.AlignHCenterButton{text: "首页"Layout.alignment: Qt.AlignHCenteronClicked:{stackWig.currentIndex = 0;}}Button{text: "联系"Layout.alignment: Qt.AlignHCenteronClicked:{stackWig.currentIndex = 1;}}}StackLayout{id:stackWigcurrentIndex: 0Rectangle{color: "#00B000"Text {id: homePagetext: qsTr("首页")anchors.verticalCenter: parent.verticalCenteranchors.horizontalCenter: parent.horizontalCenterverticalAlignment: Text.AlignVCenterhorizontalAlignment: Qt.AlignHCenter}}Rectangle{id: rectanglecolor: "steelblue"Text {id: contactPagetext: qsTr("联系")anchors.verticalCenter: parent.verticalCenteranchors.horizontalCenter: parent.horizontalCenterverticalAlignment: Text.AlignVCenterhorizontalAlignment: Qt.AlignHCenter}}}}
}