前言这一节我们将讲解另外一种页面导航模型——StackView，StackView实现了一个栈式的导航。“栈”就是一种数据结构，先进后出（FILO），支持pop、push等操作。StackView用于栈类似的行为方式管理一系列的View（页面或视图），这些View之间可能有内在联系，根据业务需要，可以一级一级向深处跳转，当前的View上发生点儿什么事儿，就可能会产生一个新的View或者返回之前的页面。StackView的属性常用属性
附加属性
附件信号
方法
StackView的例程在应用程序中使用StackView就像将它作为子级添加到Window对象内一样简单，在StackView中显示的第一项是分配给initialItem的项，如果未设置initialItem，则是最高的项。StackView支持三种主要的导航操作：push（），pop（）和replace（）。这些都属于很经典的堆栈操作，我们先来说一下这3个方法的用法。
先来看一个简单的程序： 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管理的页面，通常是动态创建的，那这些动态创建的对象，就需要在合适的时候销毁，不然的话就内存泄露了。但是，我们使用stackView时不需要担心这个问题，因为stackView会接管它维护的页面对象（View）的生命周期。当我们调用pop时，那些出栈的Item，会被销毁掉。还有就是大家要知道一页页面在StackView里，其实有很多状态，比如说非活动，正在激活等。非栈顶的页面，都处在inactive实例化状态。栈顶的页面，当StackView可见时处于active活动状态，当StackView不可见时，栈顶的页面处于inactive非活动状态。 最后我们还可以通过StackView的6个属性定制过渡动画Transition 。这几个属性在上面没有提到。具体如下：
了解了这些属性之后我们就通过属性定制一个过渡动画，在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的内容大家可以参考此链接 最后运行看一下效果
总结 |
