QML StackView 使用(滑动方式改变)

1、定义一个StackView，初始窗口为WindowsA，当点击WindowsA的时候，将WindowsB压栈并显示WindwsB，当点击WindowB时，将栈顶的WindowsB弹出，又显示WindowsA。

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.2
Window {
    id: mainWindow
    visible: true    
    width: Screen.width 
    height: Screen.height 
    StackView {
        id: stackView
        initialItem: WindowsA
        anchors.fill: parent
        //focus: true
            
    }
    Component {
        id: WindowsA

        Rectangle {
            color: "red"
            anchors.fill: parent           
            Rectangle{
                id: recA
                anchors.fill: parent
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    stackView.push(WindowsB)

                }
            }            
        }
    }
    Component {
        id: WindowsB

        Rectangle {
            color: "black"
            anchors.fill: parent
            Rectangle{
                id: recB                
                anchors.fill: parent
            }  
            MouseArea {
                anchors.fill: parent
                onClicked: {
                     stackView.pop()
                }
            }         
        }
    }
}

2、显示方法改动：

默认显示方式是:WindowsA 和WindowsB交互滑动显示。通过重写popEnter、popExit、pushEnter响应方式，改变窗口切换方式

StackView {
        id: stackView
        initialItem:  WindowsA
        anchors.fill: parent
        //focus: true
        //
        popEnter: replaceExit
        popExit: replaceExit
        pushEnter: replaceEnter
        replaceEnter: Transition { //下边是转场动画
            PropertyAnimation {
                target: stackView
                property: "opacity"
                easing.type: Easing.InBack
                from: 0
                to: 1
                duration: 1 //单位ms 切换时间
            }
        }
        replaceExit: Transition { //下边是转场动画

            PropertyAnimation {
                target: stackView
                property: "opacity"
                from: 0
                to: 1
                easing.type: Easing.InQuad
                duration: 500 //单位ms 切换时间
            }
        }
    }