QML布局管理器_qml stacklayout

1. StackLayout

1.1 简介

StackLayout是一种布局管理器，用于在不同的子项之间进行堆叠式布局。它类似于一叠卡片，只显示其中的一个，其他的子项被叠在其下面。可以通过操纵可见的子项来实现在堆叠中切换的效果。

1.2 主要属性和方法

1. spacing：该属性用于设置子项之间的间距（以像素为单位）。默认值为 0，即子项之间没有间距。
2. orientation：该属性用于设置堆叠的方向，可以是 Qt.Horizontal（水平方向）或 Qt.Vertical（垂直方向）。默认值为 Qt.Horizontal
3. currentIndex：该属性用于设置当前可见的子项的索引。默认情况下，currentIndex 的值为 0，即第一个子项可见。可以通过修改 currentIndex 来切换可见的子项，实现在堆叠中切换的效果。
4. itemAt(index)：这是一个方法，用于返回指定索引处的子项。例如，stackLayout.itemAt(0) 返回第一个子项。
5. count：该属性用于返回堆叠中子项的数量。

1.3 示例

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300

    StackLayout {
        id: stackLayout
        anchors.fill: parent
        spacing: 10

        Rectangle {
            width: 200
            height: 100
            color: "red"
        }

        Rectangle {
            width: 200
            height: 100
            color: "green"
        }

        Rectangle {
            width: 200
            height: 100
            color: "blue"
        }
    }

    Timer {
        interval: 2000
        repeat: true
        running: true
        onTriggered: {
            // 每两秒切换可见的子项
            stackLayout.currentIndex = (stackLayout.currentIndex + 1) % stackLayout.count;
        }
    }
}
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