如何实现QML中的pathview

在之前的很多练习及教程中，我们展示了如何在QML语言设计中使用ListView及GridView来展示我们所需要的效果．在今天的教程中，我们来深刻体会一下如何使用QML语言中的PathView来展示我们的效果．在PathView中，我们可以用它来显示旋转木马的效果．如果大家有使用我们的Ubuntu
Scope的话，可能大家已经曾经使用carousel显示模板．在很多的场合中可以实现很炫的显示效果．

一个简单的实验

我们只打入如下的代码：

import QtQuick 2.0
import Ubuntu.Components 1.1

/*!
\brief MainView with a Label and Button elements.
*/

MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"

// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "carousel0.liu-xiao-guo"

property int pathMargin: units.gu(10)

width: units.gu(60)
height: units.gu(85)

Page {
title: i18n.tr("carousel0")

PathView {
id: view
anchors.fill: parent
model: 32
delegate: Text { text: index }

path: Path {
startX: 0
startY: pathMargin
PathLine { x: view.width; y: pathMargin }
}
}
}
}

我们只使用了上面一些简单的代码．在这里，我们没有使用什么特别的model，我们只定义了一个简单的PathLine:

PathLine { x: view.width; y: pathMargin }

这是一条从做到右的直线．我们的delegate也相对比较简单，我们只显示了每个项的index．运行我们的应用结果如下：


　


我们可以在上面进行左右的滑动，并看见数字可以在左右平滑地滑动．由于显示的效果没什么特别的，所以没有特别感觉到上面惊人的地方．我们通过这个例子对PathView有一个感性的认识．代码在地址：https://github.com/liu-xiao-guo/carousel0

加入我们的照片

我们可以在地址下载一些小的图标，并存于我们的项目中的一个叫做icons的目录中．为了能够在我们的例程中使用这些图片，我们创建了一个叫做Model0.qml的文件：

Model0.qml

import QtQuick 2.0

ListModel {
ListElement { title: "Calendar"; iconSource: "icons/calendar.png" }
ListElement { title: "Setup"; iconSource: "icons/develop.png" }
ListElement { title: "Internet"; iconSource: "icons/globe.png" }
ListElement { title: "Messages"; iconSource: "icons/mail.png" }
ListElement { title: "Music"; iconSource: "icons/music.png" }
ListElement { title: "Call"; iconSource: "icons/phone.png" }
ListElement { title: "PodCast"; iconSource: "icons/podcast.png" }
ListElement { title: "Recycle"; iconSource: "icons/recycle.png" }
}

同时也把我们的Main.qml修改为：

Main.qml

import QtQuick 2.0
import Ubuntu.Components 1.1

/*!
\brief MainView with a Label and Button elements.
*/

MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"

// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "carousel0.liu-xiao-guo"

property int pathMargin: units.gu(10)

width: units.gu(60)
height: units.gu(85)

Page {
title: i18n.tr("carousel0")

PathView {
id: view
width: parent.width
height: parent.height*.2
model: Model0 {}
delegate: Item {
id: wrapper
width: parent.width/4
height: width

Image {
width: parent.width*.5
height: width
source: iconSource
}
}
path: Path {
startX: 0
startY: pathMargin
PathLine { x: view.width; y: pathMargin }
}
}
}
}

在这里，我们使用了Model0.qml中定义的数据，我们同时也修改了delegate部分来显示相应的图片．运行我们的应用：





我们可以在上面的图片中滑动，并可以看见图片从做到右或从右到左的移动．我们可以使用这个效果来做一些菜单等．
项目的源码：https://github.com/liu-xiao-guo/carousel1

加入我们的特效

在上面的例程中，我们虽然能够显示我们所需要的PathView，但是总体来说没有什么特效．如果细心的开发者可以看到在我们的Ubuntu Scope中，Carsousel中的图片有大有小，下面，我们重新改写我们的例程如下：

Main.qml

import QtQuick 2.0
import Ubuntu.Components 1.1

/*!
\brief MainView with a Label and Button elements.
*/

MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"

// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "carousel.liu-xiao-guo"

property int pathMargin: units.gu(10)

width: units.gu(60)
height: units.gu(85)

Page {
title: i18n.tr("carousel")

PathView {
id: view
width: parent.width
height: parent.height*.2
model: Model0 {}
delegate: Item {
id: wrapper
width: parent.width/4
height: width
scale: PathView.scale
Image {
width: parent.width*.5
height: width
source: iconSource
}
}
path: Path {
startX: 0
startY: pathMargin
PathAttribute { name: "scale"; value: 0.3 }
PathLine { x: view.width/4; y: pathMargin }
PathAttribute { name: "scale"; value: 0.6 }
PathLine { x: view.width*2/4; y: pathMargin }
PathAttribute { name: "scale"; value: 1.0 }
PathLine { x: view.width*3/4; y: pathMargin }
PathAttribute { name: "scale"; value: 0.6 }
PathLine { x: view.width*4/4; y: pathMargin }
PathAttribute { name: "scale"; value: 0.3 }
}
}

}
}

在上面的例程中，我们多创建了几个PathLine，同时在每个PathLine中，我们同时加入一个叫做PathAttribute的属性．比如：

PathAttribute { name: "scale"; value: 0.3 }

通过上面的定义，我们额外地定义了一些属性．注意这里的名字scale可以是你自己喜欢的名字．我们可以在我们的delegate中进行使用它：

delegate: Item {
id: wrapper
width: parent.width/4
height: width
scale: PathView.scale
Image {
width: parent.width*.5
height: width
source: iconSource
}
}

在上面我们定义了一个额外的scale属性．这样它就可以对我们的每个图片定制自己的大小．重新运行我们的应用：





整个项目的源码在: https://github.com/liu-xiao-guo/carousel2

利用PathQuad制作特效

我们上面所使用的都是PathLine．我们也可以使用PathQuad来制作我们特别想要的一些效果：

PathView {
id: view1
// anchors.fill: parent
width: parent.width
height: parent.height*0.8
anchors.top: view.bottom

model: Model1 {}
delegate: mydelegate
path: Path {
startX: view1.width/2; startY: 2* view1.height / 3;
PathAttribute { name: "opacity"; value: 1 }
PathAttribute { name: "scale"; value: 1 }
PathAttribute { name: "z"; value: 100 }
PathQuad { x: view1.width/2; y: view1.height / 3; controlX: view1.width+200; controlY: view1.height/2}
PathAttribute { name: "opacity"; value: 0.3 }
PathAttribute { name: "scale"; value: 0.5 }
PathAttribute { name: "z"; value: 0 }
PathQuad { x: view1.width/2; y: 2*view1.height / 3; controlX: -200; controlY: view1.height/2}
}
}

运行我们的应用：





整个项目的源码在：https://github.com/liu-xiao-guo/carousel3