StackLayout堆栈布局与PageIndicator页面指示器连用_stack_layout总页数

1、StackLayout堆栈布局，一个页面管理器，且只显示一页，和QWiget的QStackedLayout一样
属性列表如下

子页面默认填充父页面，也可单独设置，子页面可以通过如下属性调整其位置和大小

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

2、PageIndicator这里不在阐述，如有兴趣，可参考另一篇文章https://blog.csdn.net/u012093557/article/details/134284315?spm=1001.2014.3001.5501

3、通过切换页面指示器PageIndicator实现切换StackLayout

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("StackLayout Test")

    StackLayout{
      id:stack
      anchors.fill: parent
      currentIndex: indicator.currentIndex // 与PageIndicator联动
      Item {
          id: item1
          Rectangle {
              anchors.fill: parent
              color: "Aquamarine"
          }
          Label{
              text:"page one"
          }

      }
      Item {
          id: item2
          Rectangle {
              color: "Khaki "
              anchors.fill: parent
          }
          Label{
              text:"page two"
          }
      }
      Item {
          id: item3
          Rectangle {
              color: "Magenta"
              anchors.fill: parent
          }
          Label{
              text:"page three"
          }
      }
    }


    PageIndicator{
        id:indicator
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        count: stack.count
        interactive: true // 必须打开此属性，默认是false.否则页面指示无法点击切换
    }
}
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

实现效果如下

4、StackLayout与PageIndicator连用使用场景和SwipeView与PageIndicator连用很相识，但SwipeView多一个滑动效果；StackLayout若要实现后期添加页面，或者动态创建 可对item设置 parent: stack属性。SwipeView则可使用addItem（）动态添加页面