×
Namespaces

Variants
Actions

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

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

代码示例
兼容于
平台:
Symbian

文章
zhouhl 在 05 Dec 2010 创建
最后由 hamishwillee 在 11 Oct 2012 编辑


Contents

引言

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

QMLPathView1.JPG

QMLPathView2.JPG

QMLPathView3.JPG

QMLPathView4.JPG

QMLPathView5.JPG

下载例程

Media:QMLPathView.zip

相关链接

This page was last modified on 11 October 2012, at 04:18.
210 page views in the last 30 days.