Qt Quick之StackView具体解释

Posted 2020-09-28 yangykaifa

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核心编程》。

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