引言
QML中的Model View——一个ListView实例 这篇文章为大家介绍了 QML 中的 Model View,并提供了一个 ListView 的实例,本文将在此基础上再为大家提供一个 PathView 的例子。这个例子同样也是很简单的,仅用了一百二十行的 QML 代码,在 N8 上运行的效果见下文所附图片。
PathView主要代码分析
为了简单明了,我们把所有需要的组件都写到了main.qml中。我们一部分一部分来看一下。
PathView { id: view focus: true model: myModel delegate: myDelegate anchors.fill: parent pathItemCount: 13 preferredHighlightBegin: 0.5 preferredHighlightEnd: 0.5 highlightRangeMode: PathView.StrictlyEnforceRange flickDeceleration: 390 path: myPath }
我们这里使用了 QML PathView Element。 与 ListView 类似,它也有需要有 Delegate 和 Model,只是说它多出了一个 Path,这是 PathView 所特有的,也是其特色所在。
下面我们看下 Path 是如何定义的:
Path { id: myPath startX: 0; startY: 150 PathAttribute {name: "rotateY"; value: 50.0} PathAttribute {name: "scalePic"; value: 0.5} PathAttribute {name: "zOrder"; value: 1} PathLine{x:180; y: 150} PathPercent {value: 0.44} PathAttribute {name: "rotateY"; value: 50.0} PathAttribute {name: "scalePic"; value: 0.5} PathAttribute {name: "zOrder"; value: 10} PathQuad{x:320; y: 190; controlX: 290; controlY: 190} PathPercent {value: 0.50} PathAttribute {name: "rotateY"; value: 0.0} PathAttribute {name: "scalePic"; value: 1.0} PathAttribute {name: "zOrder"; value: 50} PathQuad{x:460; y: 150; controlX: 510; controlY: 150} PathPercent {value: 0.56} PathAttribute {name: "rotateY"; value: -50.0} PathAttribute {name: "scalePic"; value: 0.5} PathAttribute {name: "zOrder"; value: 10} PathLine{x:640; y: 150} PathPercent {value: 1.00} PathAttribute {name: "rotateY"; value: -50.0} PathAttribute {name: "scalePic"; value: 0.5} PathAttribute {name: "zOrder"; value: 1} }
通俗一点讲 Path 就是 Items 所走的线路,我们画好一条线,那么所有 Items 就会沿着这条线走。这条线可以由很多段线段连接而成,线段可以使直线 PathLine,可以使二次贝塞尔曲线 PathQuad,也可以是三次贝塞尔曲线 PathCubic。
在每段线段的末尾端点,我们可以自定义一些Item的属性,这样当Item移动到这个点的时候,它就会具有我们所设置的属性。这样就给了我们很大的自由发挥空间,我们可以设置出很多我们想要的效果。
这里的属性名我们可以任意设置,在 Delegate 中是可以直接引用这些属性名的。
然后我们继续看 Delegate 是如何做的:
Component { id: myDelegate Item{ property real tmpAngle : PathView.rotateY property real scaleValue: PathView.scalePic width: 340 height: 260 visible: PathView.onPath z: PathView.zOrder Image{ id:myImage width: 340 height: 260 source: picName anchors.horizontalCenter: parent.horizontalCenter smooth: true } Image { id: subImage width: 340 height: 260 source: picName anchors.horizontalCenter: parent.horizontalCenter smooth: true transform: Rotation { origin.x: 0; origin.y: 260; axis { x: 1; y: 0; z: 0 } angle: 180 } } Rectangle{ y: myImage.height; x: -1 width: myImage.width + 1 height: myImage.height gradient: Gradient { GradientStop { position: 0.0; color: Qt.rgba(0,0,0, 0.7) } } } transform:[ Rotation{ angle: tmpAngle origin.x: 340/2 axis { x: 0; y: 1; z: 0 } }, Scale { xScale:scaleValue; yScale:scaleValue origin.x: 340/2; origin.y: 260/2 } ] }//Item }
非常简单,画了张图片并对其进行了旋转和缩放,还做了倒影效果(由于手机性能限制,我们不能做的很精细,在 PC 机上做精细之后效果会更好)。
Model 的定义非常简单只是提供了几张图片而已,实际应用中大家可以根据自己的需要设置。
ListModel { id: myModel ListElement { picName: "pics/1.png" } ListElement { picName: "pics/2.png" } ListElement { picName: "pics/3.png" } ListElement { picName: "pics/4.png" } ListElement { picName: "pics/7.png" } ListElement { picName: "pics/8.jpg" } ListElement { picName: "pics/9.jpg" } ListElement { picName: "pics/10.jpg"} ListElement { picName: "pics/5.png" } ListElement { picName: "pics/6.png" } } 原文链接程序截图
下面是程序在N8上面的运行效果: