Qt Quick - StackLayout 堆布局_qt stack layout

一、概述

StackLayout 其实就是说，在同一个时刻里面，只有一个页面是展示出来的，类似QStackWidget 的功能，主要就是切换界面的功能。这个类型我们可以通过设置currentIndex属性来修改当前可见的项。索引对应于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.5

Window {
    id: root
    visible: true
    width: 319
    height: 570
    title: qsTr("Hello World")

    ColumnLayout
    {

        anchors.fill: parent

        RowLayout
        {
            Layout.alignment: Qt.AlignHCenter

            Button{
                text: "首页"
                Layout.alignment: Qt.AlignHCenter

                onClicked:
                {
                    stackWig.currentIndex = 0;
                }
            }

            Button{
                text: "联系"
                Layout.alignment: Qt.AlignHCenter

                onClicked:
                {
                    stackWig.currentIndex = 1;
                }
            }
        }

        StackLayout
        {
            id:stackWig

            currentIndex: 0
            Rectangle
            {
                color: "#00B000"
                Text {
                    id: homePage
                    text: qsTr("首页")
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.horizontalCenter: parent.horizontalCenter
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Qt.AlignHCenter
                }
            }

            Rectangle
            {
                id: rectangle
                color: "steelblue"
                Text {
                    id: contactPage
                    text: qsTr("联系")
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.horizontalCenter: parent.horizontalCenter
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Qt.AlignHCenter
                }
            }
        }

    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77