QML_栈式导航模型StackView

最新推荐文章于 2024-07-16 08:00:00 发布

HX科技

最新推荐文章于 2024-07-16 08:00:00 发布

阅读量1.3k

点赞数

分类专栏： Qt开发文章标签： qt ui

本文链接：https://blog.csdn.net/weixin_50183638/article/details/125237143

版权

Qt开发专栏收录该内容

51 篇文章 6 订阅

订阅专栏

QML_栈式导航模型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个方法的用法。
pop()，出栈操作，没有参数调用pop时，栈顶的页面将会弹出。如果带着参数，则将参数指定的页面之后的所有页面都弹出。比如说，栈内原先有4个界面[A,B,C,D]，调用pop()后，就变为[A,B,C]；如果调用pop(B),就会变成[A,B]。
push()，入栈操作，参数是Item，将一个页面压入StackView。这个页面（Item）一般是动态创建的。
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
        }
    }
}

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

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
            }
        }
    }

    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()
        }
    }

StackView的拓展
通过前面的代码大家也应该发现了，stackView管理的页面，通常是动态创建的，那这些动态创建的对象，就需要在合适的时候销毁，不然的话就内存泄露了。但是，我们使用stackView时不需要担心这个问题，因为stackView会接管它维护的页面对象（View）的生命周期。当我们调用pop时，那些出栈的Item，会被销毁掉。
还有就是大家要知道一页页面在StackView里，其实有很多状态，比如说非活动，正在激活等。非栈顶的页面，都处在inactive实例化状态。栈顶的页面，当StackView可见时处于active活动状态，当StackView不可见时，栈顶的页面处于inactive非活动状态。
最后我们还可以通过StackView的6个属性定制过渡动画Transition 。这几个属性在上面没有提到。具体如下：
popEnter : 此属性保存当一个页面弹出堆栈时，另一个页面进入堆栈的页面的过渡
popExit : 此属性保存当页面从堆栈中弹出时的过渡
pushEnter : 此属性保存当一个页面进入堆栈时，另一个页面弹出堆栈的页面的过渡
pushExit : 此属性保存当页面从进入堆栈时的过渡
replaceEnter : 此属性保存在替换另一个项目时进入堆栈的页面的过渡
replaceExit : 此属性保存另一个项目被替换时退出堆栈的页面的过渡。

实现一个切换页面有动画渐变的工程

Window {
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    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)
            }
        }

        pushEnter: Transition {
             PropertyAnimation {
                 target: rect
                 property: "color"
                 to: "orange"
                 duration: 3000  //设置渐变时间
             }
        }
        pushExit: Transition {
            PropertyAnimation {
                target: rect
                property: "color"
                to: "orange"
                duration: 3000
            }
        }
        popEnter: Transition {
            PropertyAnimation {
                target: rect
                property: "color"
                from:"orange"
                to: "green"
                duration: 3000
            }
        }
        popExit: Transition {
            PropertyAnimation {
                target: rect
                property: "color"
                from:"orange"
                to: "green"
                duration: 3000
            }
        }
    }

    Component {
        id: mainView
        Rectangle{
            id: rect
            color: "lightyellow"
            anchors.fill: parent
            Text {
                id: text
                anchors.centerIn: parent
                text: stack.depth
                font.pixelSize: 30
            }
        }
    }

    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()
        }
    }
}