PathView的用法

pathView的使用类似与ListView,都需要模型(model)和代理(delegate),只不过pathView多了一个路径(path)属性,顾名思义路径就是item滑动的路径.
区别与listView的是pathView可以分别设置item的属性不想listView一样每个item的样子都差不多.上个图就能很清晰地看到区别了,下面图片中item绕着z轴旋转了所以字体变卷了

下面给出一个简单的上下滑动的示例.

import QtQuick 2.0

Rectangle {
    id: root
    width: 300;
    height: 200;
    color: "black";

    ListModel {
        id: imageModel
        ListElement {
            normalSource: "pic/1.png"
            selectedSource: "pic/11.gif"
        }
        ListElement {
            normalSource: "pic/2.png"
            selectedSource: "pic/22.gif"
        }
        ListElement {
            normalSource: "pic/3.png"
            selectedSource: "pic/33.gif"
        }
        ListElement {
            normalSource: "pic/4.png"
            selectedSource: "pic/44.gif"
        }
        ListElement {
            normalSource: "pic/5.png"
            selectedSource: "pic/55.gif"
        }
        ListElement {
            normalSource: "pic/6.png"
            selectedSource: "pic/66.gif"
        }
        ListElement {
            normalSource: "pic/7.png"
            selectedSource: "pic/77.gif"
        }
    }

    Component {
        id: rectDelegate;
        Item {
            id: wrar
            scale: PathView.t_scale
            z: PathView.itemZ
            Image {
                id: icon
                source: pathView.currentIndex===index? normalSource : selectedSource
            }
            implicitWidth: icon.width
            implicitHeight: icon.height
        }
    }

    PathView {
        id: pathView;
        anchors.fill: parent

        pathItemCount: 3;
        preferredHighlightBegin: 0.5;
        preferredHighlightEnd: 0.5;
        highlightRangeMode: PathView.StrictlyEnforceRange;


        maximumFlickVelocity: 200

        delegate: rectDelegate;
        model: imageModel;

        path: pathVertical

        Path {
            id:pathVertical
            property int height: root.height
            startX: width/2
            startY: 0
            PathAttribute { name: "t_scale"; value: 0.5}
            PathAttribute { name: "itemZ"; value: 0}
            PathLine { x: pathVertical.startX; y: height*0.5}

            PathAttribute { name: "t_scale"; value: 0.5}
            PathAttribute { name: "itemZ"; value: 1}
            PathLine { x: pathVertical.startX; y: height}

        }

        focus: true
        Keys.onLeftPressed: decrementCurrentIndex();
        Keys.onRightPressed: incrementCurrentIndex();
    }
}

简单解析一下代码,属性pathItemCount控制显示在界面的item个数(Component中的item),
preferredHighlightBegin: 0.5;
preferredHighlightEnd: 0.5;
highlightRangeMode: PathView.StrictlyEnforceRange;
这几句的作用是pathView进行拖动时当前item一直在中间位置
属性maximumFlickVelocity控制滑动速度,数值越大滑动越快

重点来了,PathLine是一个路径元素
startX: width/2; startY: 0
PathLine { x: pathVertical.startX; y: height*0.5}
PathLine { x: pathVertical.startX; y: height}
这几句代码让pathView排列在水平中心位置,夹在相邻两个PathLine元素中间的PathAttribute代表的是两个PathLine元素间隔路径上item的属性,可以通过自定义PathAttribute控制item的属性

PathAttribute 定义一些属性，它的声明语法类似下面：
PathAttribute { name: “t_scale”; value: 0.5; }
name 属性指定待定义属性的名字， real 类型的 value 属性的值为待定义的属性的值。
PathAttribute 放在某个路径段的前面，指明这段路径起始时的属性值；路径段后面的 PathAttribute 指明路径段终止时的属性值；而在路径段上的属性值， Path 会根据起、止值自动插值计算。