QML PathView的使用

QML提供了一个功能强大的控件切换工具PathView，使用PathView可以极为自由的扩展你的页面展现方式，比如图片轮播等动画效果。

首先看看实现效果：

 使用左右按钮可以控制你的多页面顺时针或逆时针轮转，图上方块还能有大小和透明度的变化。

图片轮转的位置和速度变化由QML的Path类型定制，你可以定制你想要的图片轮转的路径。

上代码：

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.12

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




    ListModel {
        id: listModel
        ListElement {
            name: "Bill Jones"
            color: "blue"
        }
        ListElement {
            name: "Jane Doe"
            color:"red"
        }
        ListElement {
            name: "John Smith"
            color:"green"
        }
        ListElement {
            name: "Bill Jones"
            color: "brown"
        }
        ListElement {
            name: "Jane Doe"
            color:"orange"
        }
        ListElement {
            name: "John Smith"
            color:"purple"
        }
    }

    Rectangle {
        id: rect
        width: 700; height: 200
        anchors.centerIn: parent

        Component {
            id: delegate
            Rectangle {
                id: wrapper
                scale: PathView.iconScale
                width: 200
                height: 200
                color: model.color
                z: PathView.iconZ        //这里的z坐标需要变换，否则可能当前项会被其他项挡住
                opacity: PathView.iconOpacity
                MouseArea{
                    anchors.fill: parent
                    onClicked: pathView.currentIndex = index
                }
            }
        }

        PathView {
            id: pathView
            anchors.fill: parent
            model: listModel
            delegate: delegate
            pathItemCount: 3
            property real vcenter: 300
            highlightMoveDuration: 300
            maximumFlickVelocity:30
            interactive: false
            path: Path {
                         startX: 350; startY: 100//启动位置
                            //选中项的属性
                         PathAttribute { name: "iconScale"; value: 1.0;  }
                         PathAttribute { name: "iconOpacity"; value: 1.0 }
                         PathAttribute { name: "iconZ"; value: 1.0 }
                         PathQuad { x: 350; y: 100; controlX: 650; controlY: 100 }
                            //非选中项属性
                         PathAttribute { name: "iconScale"; value: 0.7 }
                         PathAttribute { name: "iconOpacity"; value: 0.3 }
                         PathAttribute { name: "iconZ"; value: 0.0 }
                         PathQuad { x: 350; y: 100; controlX: 50; controlY: 100 }
                     }
        }
    }
    Button{
        text: "<"
        anchors.right: rect.left
        anchors.verticalCenter: rect.verticalCenter
        onClicked: pathView.decrementCurrentIndex()
    }
    Button{
        text: ">"
        anchors.left: rect.right
        anchors.verticalCenter: rect.verticalCenter
        onClicked: pathView.incrementCurrentIndex()
    }

}

PathQuad是这里比较难以理解的，x,y是选中项的位置，也就是它停留的位置，而controlX，controlY是控制点，需要有左右两个控制点