立即注册 找回密码

微雪课堂

搜索
微雪课堂 树莓派 树莓派QT教程 查看内容

树莓派Qt系列教程22:栈式导航模型StackView

2020-8-11 16:03| 发布者: dasi| 查看: 1321| 评论: 0|原作者: dasi

摘要: 这一节我们将学习栈式导航模型StackView........

前言

这一节我们将讲解另外一种页面导航模型——StackView,StackView实现了一个栈式的导航。“栈”就是一种数据结构,先进后出(FILO),支持pop、push等操作。StackView用于栈类似的行为方式管理一系列的View(页面或视图),这些View之间可能有内在联系,根据业务需要,可以一级一级向深处跳转,当前的View上发生点儿什么事儿,就可能会产生一个新的View或者返回之前的页面。

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就像将它作为子级添加到Window对象内一样简单,在StackView中显示的第一项是分配给initialItem的项,如果未设置initialItem,则是最高的项。

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管理的页面,通常是动态创建的,那这些动态创建的对象,就需要在合适的时候销毁,不然的话就内存泄露了。但是,我们使用stackView时不需要担心这个问题,因为stackView会接管它维护的页面对象(View)的生命周期。当我们调用pop时,那些出栈的Item,会被销毁掉。

还有就是大家要知道一页页面在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的内容大家可以参考此链接

最后运行看一下效果

总结


关于QML的页面导航模型我们就讲到这里了,真的非常有趣,大家可以参考我们的代码开发自己的导航界面,实现界面之间的切换。我们下节再会!

50

顶一下

刚表态过的朋友 (50 人)

相关阅读

微雪官网|产品资料|手机版|小黑屋|微雪课堂. ( 粤ICP备05067009号 )

GMT+8, 2021-12-9 22:16 , Processed in 0.012269 second(s), 13 queries .

返回顶部