Qt Quick之StackView具体解释（1）

Qt Quick中有个StackView。我在《Qt Quick核心编程》一书中没有讲到。近期有人问起，趁机学习了一下，把它的基本使用方法记录下来。

我准备分两次来说。第一次讲主要的使用方法。包含StackView的适用场景、基本属性和方法的使用方法。第二次讲一些略微复杂点的东西，比方被StackView管理的view的生命周期、delegate定制、查找等。

演示样例会用到动态建立组建，可以參考我以前的文章“Qt Quick 组件与对象动态建立具体解释”。也会用到锚布局。參考“Qt Quick 布局介绍”。还会用到Button、Rectangle、MouseArea、Text等基本元素，请參考《Qt Quick核心编程》一书。

StackView介绍

StackView实现了一个栈式的导航。“栈”你们都知道是怎么回事儿，就是一种数据结构，先进后出（FILO），支持pop、push等操做。StackView用于栈类似的行为方式管理一系列的View（页面或视图），这些View之间可能有内在联系，依据业务需要，可以一级一级向深处的跳转。当前的View上发生点儿什么事儿，就可能会产生一个新的View或返回以前的页面。

举两个简单的场景。

比方注冊帐号这个场景，有一种作法是分几个步骤，比方第一步先让你输入username、password，你点击下一步以后呢，会出现新的页面。接着让你输入姓名、爱好、邮箱、社交方式等。

比方你在某个招聘站点提交简历，先是填写基本信息，如姓名、毕业院校、联系方式、求职意向等，而后下一步，就让你加入工做经验……一路Next下去就能够。讲到这里你可以看看我以前写的一篇文章。史上最全的程序猿求职渠道总结。

StackView是FocusScope的子类，FocusScope是Item的子类。从这个继承关系来看，StackView要做为一个Window的孩子（孩子的孩子也可以。孩子的孩子的孩子也可以……）来使用。固然假设你用QQuickView来载入main.qml的话，StackView也可以做为main.qml的根节点，没必要嵌套在一个Window里。

StackView有几个属性：

• busy 指示StackView是否正在应用过渡动画。为true时表示正在应用动画。可以经过属性变化信号处理器onBusyChanged来响应busy属性变化，结合咱们的业务需求来作一些处理，比方在动画期间禁止用户点击。

• currentItem 指向栈顶的View（Item），可能为空。
• delegate 用于定制页面切换时的过渡动画。
• depth 栈的深度，StackView中没有子页面时。depth为0。有一个子页面时。depth为1……
• initialItem 初始的View（Item）。

  咱们可以经过这个属性来指定StackView管理的第一个页面（View），假设你在初始化时给initalItem赋值，效果就至关于咱们在Component.onCompleted信号处理器中调用 push(yourItem)。假设你不显式给initalItem赋值，当第一个页面被push进StackView时。这个属性也会被本身主动赋值。

StackView有几个方法：

• clear()。顾名思义。干掉StackView管理的所有页面
• pop(item)，出栈操做。无參调用pop时，讲栈顶的页面弹出。假设带參数，则将參数指定的页面以后的所有页面都弹出。举个样例吧，现在栈内页面时酱紫的，[A,B,C,D,E]，pop()调用后。就变为[A,B,C,D]。你再调用pop(B)，就会变成[A,B]。
• push(item)，入栈操做，參数是Item。将一个页面压入StackView。这个页面（Item）一般是动态建立的。

  待会儿咱们的演示样例可以看到。有一个特别的使用方法，可以替换栈顶元素，比方你的栈是[A,B,C,D]，push(E, replace)，就会用E替换栈顶的D，栈就会变为[A,B,C,E]。关于push，另外一些其余使用方法。參考Qt帮助吧。

• find(func, onlySearchLoadedItems)，查找StackView管理的某个页面。

  find将对栈内的每个页面应用func方法，当func返回true时。表示找到了，查找过程就会中止，而后find会返回找到的那个Item。

• completeTransition()，立刻结束过渡动画。

再啰嗦几句吧。

StackView自己事实上是一个正常的Item。这从它的类继承关系可以看出来。

因此呢，你可以指定它的大小（width、height），也可以使用anchors等布局。StackView管理的页面，都会做为StackView的孩子，这些子View们，默认会充满StackView的可用区域，咱们不能使用anchors来布局子页面，假如你为子View使用了anchors，那页面切换时的动画效果就会失效。

另外一点，指定子页面的大小（width、height）也不管用。因此。省事儿啦。

StackView演示样例

设计了一个很easy的演示样例，效果例如如下图所看到的：

咱们看到。在上面的GIF中，点击Nextbutton会新建立一个页面并将这个页面加入到StackView中，页面切换时有一个动画效果。这个动画效果是StackView提供的默认效果。假设咱们想改变它。就可以经过delegate属性来定制。

所有代码在这里了：

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2

Window {
    title: "StackViewDemo";
    width: 480;
    height: 320;
    visible: true;

    StackView {
        id: stack;
        anchors.centerIn: parent;
        width: 600;
        height: 300;
        property var home: null;

        Text {
            text: "Click to create first page";
            font.pointSize: 14;
            font.bold: true;
            color: "blue";
            anchors.centerIn: parent;
            MouseArea {
                anchors.fill: parent;
                onClicked: if(stack.depth == 0)stack.push(page);
            }
        }
    }

    Component {
        id: page;

        Rectangle {
            color: Qt.rgba(stack.depth*0.1, stack.depth*0.2, stack.depth*0.3);

            Text {
                anchors.centerIn: parent;
                text: "depth - " + stack.depth;
                font.pointSize: 24;
                font.bold: true;
                color: stack.depth <= 4 ? Qt.lighter(parent.color) : Qt.darker(parent.color);
            }

            Button {
                id: next;
                anchors.right: parent.right;
                anchors.bottom: parent.bottom;
                anchors.margins: 8;
                text: "Next";
                width: 70;
                height: 30;
                onClicked: {
                    if(stack.depth < 8) stack.push(page);
                }
            }

            Button {
                id: back;
                anchors.right: next.left;
                anchors.top: next.top;
                anchors.rightMargin: 8;
                text: "Back";
                width: 70;
                height: 30;
                onClicked: {
                    if(stack.depth > 0) stack.pop();
                }
            }

            Button {
                id: home;
                anchors.right: back.left;
                anchors.top: next.top;
                anchors.rightMargin: 8;
                text: "Home";
                width: 70;
                height: 30;
                onClicked: {
                    if(stack.depth > 0)stack.pop(stack.initialItem);
                }
            }

            Button {
                id: clear;
                anchors.right: home.left;
                anchors.top: next.top;
                anchors.rightMargin: 8;
                text: "Clear";
                width: 70;
                height: 30;
                onClicked: {
                    if(stack.depth > 0)stack.clear();
                }
            }
        }
    }
}

简单解释一下上面的代码。id为stack的StackView，内部放了一个Text元素，点击时建立第一个页面。页面由内嵌在main.qml中的Component提供。

id为page的组件，顶层元素是个Rectangle对象，颜色由StackView的depth属性决定。这个Rectangle内部，中间放了一个Text。底部放了Clear、Home、Back、Next几个button，在这些button的onClicked信号处理器中，调用了StackView的clear、pop、push等方法。

你可以使用qmlscene来载入演示样例qml文档，也可以经过Qt Creator建立一个Qt Quick App来查看效果。建议使用Qt SDK 5.3.0及以上版本号。

OK，此次就先到这里了。下次咱们来说StackView管理的页面（View）的生命周期、查找View、动画定制等内容。

---

不少其余Qt Quick文章请參考个人Qt Quick专栏，想系统学些Qt Quick(QML)，请阅读《Qt Quick核心编程》。

我开通了微信订阅号“程序视界”，关注就能够第一时间看到个人原创文章以及我推荐的精彩文章：