QML中的Model View——一个PathView实例

引言

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上面的运行效果：