PathView（路径视图）

PathView 显示从内置 QML 类型（如 ListModel 和 XmlListModel）创建的模型的数据，或者在从 QAbstractListModel 继承的C++中定义的自定义模型类。

视图有一个模型（定义要显示的数据）和一个委托（用于定义应如何显示数据）。为路径上的每个项实例化委托。可以轻拂这些物品以沿路径移动它们。

• PathView继承自Item

属性：

附加属性文档：

信号：

方法：

positionViewAtIndex: 

Path（路径）

path定义供路径视图和形状使用的路径。路径由一个或多个路径段组成 - PathLine、PathPolyline、PathQuad、PathCubic、PathAngleArc、PathCurve、PathSvg

属性：

方法：

 使用场景：

 使用方法：

模型和组件为： 

ListModel {id: nameModelListElement {name: "a"}ListElement {name: "b"}ListElement {name: "c"}ListElement {name: "d"}ListElement {name: "e"}ListElement {name: "f"}ListElement {name: "g"}ListElement {name: "h"}ListElement {name: "i"}ListElement {name: "j"}ListElement {name: "k"}}Component {id: nameDelegateText {text: name;font.pixelSize: 24anchors.leftMargin: 2}}

绘制（PathLine）直线：

PathView{anchors.fill: parentmodel:nameModeldelegate: nameDelegatepath: Path{startX: 100;startY: 100  //起点PathLine{x:300;y:100}  //线段的终点}}

 绘制（PathQuad）二次贝塞尔曲线

PathView{anchors.fill: parentmodel:nameModeldelegate: nameDelegatepath: Path{startX: 0;startY:0PathQuad{ //绘制二次贝塞尔曲线x: 200; y: 0; 定义曲线的终点controlX: 100; controlY: 150 //定义控制点的位置}}}

 绘制（PathCubic）三次贝塞尔曲线

PathView{anchors.fill: parentmodel:nameModeldelegate: nameDelegatepath: Path{startX: 100;startY:100PathCubic {x: 280; y: 0control1X: -10; control1Y: 190control2X: 350; control2Y: 190}}}

 绘制（PathArc）弧

PathView{anchors.fill: parentmodel:nameModeldelegate: nameDelegatepath: Path{startX: 100;startY:100PathArc {x: 280; y: 400//终点radiusX: 100;radiusY: 200//半径direction: PathArc.Counterclockwise//逆时针}}}

绘制（PathAngleArc）中心点、半径和角度指定的弧

由于要使用QtQuick 2.15，我这里的版本不够高，这里就不演示了

绘制（PathCurve）曲线 

PathView{anchors.fill: parentmodel:nameModeldelegate: nameDelegatepath: Path{startX: 100;startY:100PathCurve { x: 75; y: 75 }PathCurve { x: 200; y: 150 }PathCurve { x: 325; y: 25 }PathCurve { x: 400; y: 100 }}}

设置 PathAttribute（属性）

使用方法：

1. 先创建PathAttribute{name:"xxxx";value:xx}
2. 在委托中使用 PathView.xxxx来设置

Component {id: nameDelegateText {scale: PathView.textScale  //委托中使用opacity: PathView.textOpacity//委托中使用text: name;font.pixelSize: 24anchors.leftMargin: 2}}PathView{id:pathview1anchors.fill: parentmodel:nameModeldelegate: nameDelegatepath: Path{startX: 120; startY: 100PathAttribute { name: "textScale"; value: 1.0 } //创建属性PathAttribute { name: "textOpacity"; value: 1.0 }//创建属性PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }PathAttribute { name: "textScale"; value: 0.3 } //创建属性PathAttribute { name: "textOpacity"; value: 0.5 } //创建属性PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }}focus: true //获取焦点Keys.onLeftPressed: decrementCurrentIndex()//添加左右键盘移动Keys.onRightPressed: incrementCurrentIndex()}

PathPercent（沿路径的各个段分散项目的方法）

 PathPercent允许您操作PathView路径上项目之间的间距。您可以使用它将路径的一部分上的项目聚集在一起，并将它们分散到路径的其他部分。 

 正常的情况：

PathView{id:pathview1x:100;y:100width: 400;height: 400model:nameModeldelegate: nameDelegatepath: Path{startX: 20; startY: 0PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 }PathLine { x: 150; y: 80 }PathQuad { x: 180; y: 0; controlX: 200; controlY: 80 }}focus: trueKeys.onLeftPressed: decrementCurrentIndex()Keys.onRightPressed: incrementCurrentIndex()}

使用 PathPercent设置间距：

PathView{id:pathview1x:100;y:100width: 400;height: 400model:nameModeldelegate: nameDelegatepath: Path{startX: 20; startY: 0PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 }PathPercent { value: 0.25 }PathLine { x: 150; y: 80 }PathPercent { value: 0.75 }PathQuad { x: 180; y: 0; controlX: 200; controlY: 80 }PathPercent { value: 1 }}focus: trueKeys.onLeftPressed: decrementCurrentIndex()Keys.onRightPressed: incrementCurrentIndex()}

直线部分更加密集： 

 使用高亮：

PathView{id:pathview1x:100;y:100width: 400;height: 400model:nameModeldelegate: nameDelegatepath: Path{startX: 100;startY: 100  //起点PathLine{x:300;y:100}  //线段的终点}highlight: Rectangle{width: 20;height: 20color: "lightBlue"}focus: trueKeys.onLeftPressed: decrementCurrentIndex()Keys.onRightPressed: incrementCurrentIndex()}