前言

StackView的属性

常用属性

• busy : 指示StackView是否正在应用过渡动画，为true时表示正在应用动画
• currentItem : 保存堆栈中当前最顶层的项目
• depth : 保存当前推送到堆栈上的项目数
• empty : 保存堆栈是否为空
• initialItem : 保存创建StackView时应显示的初始项目，初始项目可以是Item，Component或url

附加属性

• index : 保存附加的项目的堆栈索引，-1代表该项目不在堆栈中
• status : 保留其附加到的物品的堆叠状态

• view : 保留其附加到的项目的堆栈视图，null代表该项目不在堆栈中
• visible : 保留其附加到的项目的可见性

附件信号

• activated ()：当附件中的项目在堆栈中被激活时，将发出此附件信号
• activating ()：当附件中的项目正在堆栈中激活时，会发出此附件信号
• deactivated ()：当堆叠中的项目被取消激活时，将发出此附件信号
• deactivating ()：当堆叠中的项目正在被取消激活时，将发出此附件信号
• removed ()：当已经将推入堆栈的项目从堆栈中移出时，将发出此附着的信号

方法

• void clear(transition) ：从堆栈中删除所有页面
• Item find(callback, behavior) ：查找StackView管理的某个页面
• Item get(index, behavior) ：返回位于堆栈中位置index处的项目
• Item pop(item, operation) ：从堆栈中弹出一个或多个页面，出栈操作
• Item push(item, properties, operation) ：使用指定的operation操作将页面推入堆栈，入栈操作
• Item replace(target, item, properties, operation) ：用指定的项目item和操作operation替换堆栈中的一个或多个页面，并有选择地在该项目上应用一组属性properties

StackView的例程

StackView支持三种主要的导航操作：push（），pop（）和replace（）。这些都属于很经典的堆栈操作，我们先来说一下这3个方法的用法。

1. pop()，出栈操作，没有参数调用pop时，栈顶的页面将会弹出。如果带着参数，则将参数指定的页面之后的所有页面都弹出。比如说，栈内原先有4个界面[A,B,C,D]，调用pop()后，就变为[A,B,C]；如果调用pop(B),就会变成[A,B]。
2. push()，入栈操作，参数是Item，将一个页面压入StackView。这个页面（Item）一般是动态创建的。
3. replace()，替换操作，比如说，栈内原先有4个界面[A,B,C,D]，调用replace(D,E)后，就变为[A,B,C,E]。

先来看一个简单的程序：

StackView {
    id: stack
    anchors.fill: parent
    Text{
        text: "Click to create first page"
        font.pointSize: 14
        font.bold: true
        color: "blue"
        anchors.centerIn: parent
        MouseArea {
           anchors.fill: parent
           onClicked: stack.push(mainView)
Component {
    id: mainView
    Rectangle{
        id: rect
        color: "lightyellow"
        anchors.fill: parent
        Text {
            id: text
            anchors.centerIn: parent
            text: stack.depth
            font.pixelSize: 30
}

id为stack的StackView，内部放了一个Text元素，用来创建第一个页面，通过鼠标事件点击时通过push函数创建第一个页面。页面由Component提供。第一个页面上的内容也很简单，就是一个矩形放了一个Text元素，显示的是当前推送到堆栈上的项目数depth。

然后我们再来建立页面之间内联关系，在Rectangle对象中继续添加代码

Row {
    spacing: 10
    anchors.top: text.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.margins: 80
    Button {
        text: "Push"
        onClicked: stack.push(mainView)
    Button {
        text: "Pop"
        enabled: stack.depth > 1
        onClicked: stack.pop()
    Button {
        text: "Clear"
        onClicked: stack.clear()
}

可以看到，我们通过行定位器添加了几个button按钮，首先看push按钮，当点击时，会调用stack.push函数，创建新的界面。pop按钮点击时话调用stack.pop函数，因为没有参数，所以弹出当前页面。其实也就是回退到上一个界面，注意，这里还设置了一个属性enabled，当界面回退到最后一个时，pop按钮就不能用了。clear按钮就更简单了，点击时会删除所有创建的界面。

StackView的拓展

还有就是大家要知道一页页面在StackView里，其实有很多状态，比如说非活动，正在激活等。非栈顶的页面，都处在inactive实例化状态。栈顶的页面，当StackView可见时处于active活动状态，当StackView不可见时，栈顶的页面处于inactive非活动状态。

最后我们还可以通过StackView的6个属性定制过渡动画Transition 。这几个属性在上面没有提到。具体如下：

• popEnter : 此属性保存当一个页面弹出堆栈时，另一个页面进入堆栈的页面的过渡
• popExit : 此属性保存当页面从堆栈中弹出时的过渡
• pushEnter : 此属性保存当一个页面进入堆栈时，另一个页面弹出堆栈的页面的过渡
• pushExit : 此属性保存当页面从进入堆栈时的过渡
• replaceEnter : 此属性保存在替换另一个项目时进入堆栈的页面的过渡
• replaceExit : 此属性保存另一个项目被替换时退出堆栈的页面的过渡。

了解了这些属性之后我们就通过属性定制一个过渡动画，在StackView对象中设置其属性。

pushEnter: Transition {
     PropertyAnimation {
         target: rect
         property: "color"
         to: "orange"
         duration: 1000
pushExit: Transition {
    PropertyAnimation {
        target: rect
        property: "color"
        to: "orange"
        duration: 1000
popEnter: Transition {
    PropertyAnimation {
        target: rect
        property: "color"
        from:"orange"
        to: "green"
        duration: 1000
popExit: Transition {
    PropertyAnimation {
        target: rect
        property: "color"
        from:"orange"
        to: "green"
        duration: 1000
}

其实这几个属性的设置都是差不多的，我们就讲解popEnter吧！在popEnter用到了一个陌生的元素PropertyAnimation,提供了一种对属性值的更改进行动画处理的方法，它可以通过多种方式用于定义动画。比如说上面代码中显示的在过渡方面的动画。它的属性target代表要设置的属性组目标，这里设置了rect。要处理的属性property就是rect的color，它的一个效果就是从橘黄色变为绿色，持续1000ms的时间。

关于PropertyAnimation的内容大家可以参考此 链接

最后运行看一下效果

总结