效果图
创建了⼀个可以让⼦项沿着任意路径移动的视图。沿着相同的路径，使⽤缩放（ scale ），透明（ opacity ）等元素可以更加详细的控制过程。
当使⽤路径视图（ PathView ）时，你必须定义⼀个代理和⼀个路径。在这些 之上，路径视图（PathView ）本⾝也可以⾃定义⼀些属性的区间。通常会使 ⽤pathItemCount 属性，它控制了⼀次可⻅的⼦项总数。 preferredHighLightBegin属性控制了⾼亮区间， preferredHighlightEnd 与 highlightRangeMode，控制了当前项怎样沿着路径显⽰。
路径 （path ）属性使⽤⼀个路径（ path ）元素来定义路径视图（ PathView ）内代 理的滚动路径，路径使⽤startx 与 starty 属性来链接路径（ path ）元素，例如
PathLine,PathQuad 和 PathCubic 。
可以使⽤ PathPercent 和 PathAttribute 元素来进⼀步设 置。它们被放置在路径元素之间，并且为经过它们的路径和代理提供更加细 致的控制。PathPercent 提供了如何控制每个元素之间覆盖区域部分的路径， 然后反过来控制分布在这条路径上的代理元素
preferredHightlightBegin 与 preferredHighlightEnd 属性由 PathView （路径视 图）输⼊到图⽚元素中。它们的值在0~1 之间。结束值⼤于等于开始值。
， PathAttribute 元素也是被放置在元素之间的，就像 PathPercent 元
素。它们可以让你指定属性的值然后插⼊的路径中去。这些属性与代理绑定
可以⽤来控制任意的属性。
路径视图：
需要注意的是路径视图（ PathView ）链接的 PathView.onPath 属性的
⽤法。通常对于这个属性都绑定为可⻅，这样允许路径视图（ PathView ）缓
冲不可⻅的元素。这不是通过剪裁处理来实现的，因为路径视图
（ PathView ）的代理⽐其它的视图，例如链表视图（ ListView ）或者栅格视
图（ GridView ）放置更加随意。
完整代码：
import QtQuick 2.15Item {height: 500width: 300Rectangle{id: rootwidth: parent.widthheight: parent.heightcolor: "white"PathView{anchors.fill: parentmodel: 100delegate: flipCardDelegatepath: Path{startX: root.width/2startY: 0PathAttribute{name: "itemZ"; value: 0;}PathAttribute{name: "itemAngle"; value:-90; }PathAttribute{name: "itemScale"; value: 0.5;}PathLine{x: root.width/2;y: root.height*0.4;}PathPercent { value: 0.48; }PathLine { x: root.width/2; y: root.height*0.5; }PathAttribute { name: "itemAngle"; value: 0.0; }PathAttribute { name: "itemScale"; value: 1.0; }PathAttribute { name: "itemZ"; value: 100 }PathLine { x: root.width/2; y: root.height*0.6; }PathPercent { value: 0.52; }PathLine { x: root.width/2; y: root.height; }PathAttribute { name: "itemAngle"; value: 90.0; }PathAttribute { name: "itemScale"; value: 0.5; }PathAttribute { name: "itemZ"; value: 0 }}pathItemCount: 16preferredHighlightBegin: 0.5preferredHighlightEnd: 0.5}Component {id: flipCardDelegateItem {id: wrapperwidth: 64height: 64visible: PathView.onPathscale: PathView.itemScalez: PathView.itemZproperty variant rotX: PathView.itemAngletransform: Rotation { axis { x: 1; y: 0; z: 0 } angle: wrapper.rotX; origin { x: 32; y: 32; } }Rectangle {anchors.fill: parentcolor: "lightGray"border.color: "black"border.width: 3}Text {anchors.centerIn: parenttext: indexfont.pixelSize: 30}}}}}
